style(playground): wip

playground/app/app.vue

@@ -1,6 +1,37 @@
+<script lang="ts" setup>
+    import { repository, version } from "../../package.json";
+
+    const repoUrl = "https://github.com/" + repository;
+</script>
+
 <template>
-    <div m="2">
-        <theme-switch />
-        <plain-shiki />
-    </div>
+    <header flex="~ items-center justify-between" m="x-auto y-3" p="x-3" max-w="screen-lg">
+        <hgroup flex="~ gap-2 items-center">
+            <h1>Plain Shiki Playground</h1>
+            <span
+                p="x-1 y-.5"
+                b="rounded-1"
+                bg="primary op-20"
+                text="3 primary"
+            >v{{ version }}</span>
+        </hgroup>
+        <nav flex="~ gap-2">
+            <nav-button icon="ph:github-logo" as="a" :href="repoUrl"/>
+            <theme-button mode="light" icon="solar:sun-2-outline"/>
+            <theme-button mode="system" icon="solar:monitor-outline"/>
+            <theme-button mode="dark" icon="solar:moon-outline"/>
+        </nav>
+    </header>
+    <main m="x-auto" max-w="screen-lg">
+        <div m="3" b="1 solid gray op-40 rounded-md">
+            <div
+                flex="~ gap-2 items-center"
+                p="x-3 y-2"
+                b-b="~ solid gray op-40"
+            >
+                <plain-select :items="['javascript', 'typescript', 'html', 'css', 'json']"/>
+            </div>
+            <plain-shiki />
+        </div>
+    </main>
 </template>

playground/app/assets/style.css

@@ -21,4 +21,8 @@ body {
     -webkit-font-smoothing: antialiased;
     text-size-adjust: 100%;
     font-family: var(--font);
-}
+}
+
+a {
+    color: inherit;
+}

playground/app/components/nav-button.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+    const {
+        as = "a"
+    } = defineProps<{
+        as?: string;
+        icon: string;
+    }>();
+
+    const attrs = computed(() => (as === "a" ? {
+        rel: "noopener noreferrer",
+        target: "_blank"
+    } : {}));
+</script>
+
+<template>
+    <component
+        :is="as"
+        v-bind="attrs"
+        grid="~ place-items-center"
+        size="9"
+        b="1 solid gray op-40 rounded-md"
+        bg="transparent"
+        un-text="5"
+        transition="250"
+        cursor="pointer"
+    >
+        <iconify :name="icon"/>
+    </component>
+</template>
+
+<style scoped>
+    .is-checked {
+        --uno: outline-primary outline outline-2 outline-offset--1;
+    }
+</style>

playground/app/components/plain-select.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+    const props = defineProps<{
+        items: string[];
+    }>();
+    const modelValue = defineModel<string>();
+</script>
+
+<template>
+    <select-root v-model="modelValue">
+        <select-trigger
+            flex="inline justify-between items-center gap-1"
+            h="8"
+            min-w="40"
+            bg="inherit"
+            font="mono"
+            text="sm"
+        >
+            <select-value />
+            <select-icon />
+        </select-trigger>
+        <select-portal>
+            <select-content font="mono" bg="inherit">
+                <select-scroll-up-button />
+                <select-viewport>
+                    <select-item v-for="item, i in items" :key="i" :value="item">
+                        <select-item-text>{{ item }}</select-item-text>
+                    </select-item>
+                </select-viewport>
+                <select-scroll-down-button />
+            </select-content>
+        </select-portal>
+    </select-root>
+</template>

playground/app/components/plain-shiki.vue

@@ -16,11 +16,9 @@
         ref="editor"
         class="plain-shiki"
         p="x-3 y-2"
-        b="1 solid gray op-40 rounded-md"
         outline="none"
         whitespace="break-spaces"
         lh="6"
-        text="4"
         contenteditable
         v-html="example"
     ></div>

playground/app/components/theme-button.vue

@@ -14,26 +14,17 @@
 </script>
 
 <template>
-    <button
-        grid="~ place-items-center"
-        size="10"
-        b="1 solid gray op-40 rounded-md"
-        bg="transparent"
-        text="5"
-        transition="250"
-        cursor="pointer"
+    <nav-button
+        :icon
         :class="{
             [`is-checked`]: colorMode.preference === mode
         }"
         @click="setColorMode"
-    >
-        <iconify :name="icon"/>
-    </button>
+    />
 </template>
 
 <style scoped>
     .is-checked {
-        outline: 2px solid rgb(79 155 122);
-        outline-offset: -1px;
+        --uno: outline-primary outline outline-2 outline-offset--1;
     }
 </style>

playground/nuxt.config.ts

@@ -24,7 +24,8 @@ export default defineNuxtConfig({
         "@nuxt/icon",
         "@nuxtjs/color-mode",
         "@unocss/nuxt",
-        "@vueuse/nuxt"
+        "@vueuse/nuxt",
+        "radix-vue/nuxt"
     ],
     colorMode: {
         classSuffix: ""

playground/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^11.1.0",
+    "radix-vue": "^1.9.7",
     "vue": "^3.5.11",
     "vue-router": "^4.4.5"
   },

playground/uno.config.ts

@@ -1,8 +1,16 @@
-import { defineConfig, presetAttributify, presetUno } from "unocss";
+import { defineConfig, presetAttributify, presetUno, transformerDirectives } from "unocss";
 
 export default defineConfig({
     presets: [
         presetUno(),
         presetAttributify()
+    ],
+    theme: {
+        colors: {
+            primary: "hsl(154deg 32% 46%)"
+        }
+    },
+    transformers: [
+        transformerDirectives()
     ]
 });