@uxfront/layer-docs 0.4.1 → 0.6.0

package/README.md

@@ -1,252 +1,81 @@
 # @uxfront/layer-docs
 
-A neutral, brandable **Nuxt layer** documentation theme. Extend it, supply your
-own branding and content, and get a Docus-shaped docs site — header, footer,
-sidebar, SEO, i18n routing, OG images and analytics — without copying boilerplate
-between repos.
-
-The layer ships **no product branding**. Consuming apps provide title, logos,
-socials, GitHub, footer, table-of-contents links and colour palette via their own
-`app.config.ts`, merged over the layer's neutral defaults by Nuxt's `defu` layer
-merge. Site metadata, SEO and git info are auto-inferred from the consumer's
-`package.json` + git when not supplied.
+The Nuxt layer for UXFront's documentation sites. It extends [Docus](https://docus.dev), which renders the markdown in `content/docs/` with a header, sidebar, search and table of contents, and adds a framework switcher: every reader sees the examples for their framework, on every page. It can also set the header's site name the way the UXFront homepages do, signed "by UXFront".
 
 ## Install
 
-```bash
-npm install -D @uxfront/layer-docs
+```sh
+pnpm add @uxfront/layer-docs
 ```
 
-Then install the peer dependencies the layer expects (the Nuxt documentation
-stack — see [`package.json`](./package.json) `peerDependencies` for pinned
-ranges): `nuxt`, `vue`, `@nuxt/ui`, `@nuxt/image`, `@nuxt/scripts`,
-`@nuxtjs/robots`, `nuxt-og-image`, `satori`, `@resvg/resvg-js`, `nuxt-llms`,
-`tailwindcss`, and — for content and translation — `@nuxt/content`,
-`@nuxtjs/i18n`, `@nuxtjs/mdc`.
-
-## Usage
-
-Extend the layer from your app's `nuxt.config.ts`:
-
 ```ts
+// nuxt.config.ts
 export default defineNuxtConfig({
   extends: ["@uxfront/layer-docs"],
 });
 ```
 
-Supply your branding from your app's `app.config.ts`:
+Then list the frameworks the docs' examples come in, in display order. The first is the default:
 
 ```ts
+// app/app.config.ts
 export default defineAppConfig({
-  header: { title: "My Docs" },
-  // logos, socials, footer, toc links, ui.colors …
-});
-```
-
-### Brand attribution
-
-`header.attribution` renders an optional credit beside the wordmark, where only
-the `label` is a link:
-
-```ts
-export default defineAppConfig({
-  header: {
-    title: "uxd",
-    attribution: { prefix: "by", label: "UXFront", to: "https://uxfront.com" },
+  docsTheme: {
+    frameworks: [
+      { value: "react", label: "React", icon: "i-simple-icons-react" },
+      { value: "vue", label: "Vue", icon: "i-simple-icons-vuedotjs" },
+      { value: "svelte", label: "Svelte", icon: "i-simple-icons-svelte" },
+    ],
   },
 });
 ```
 
-That renders `uxd by UXFront` — the wordmark still links home, `by` is plain
-text, and `UXFront` links out. Omit `attribution` (or leave `label` empty) to
-render the wordmark alone.
-
-## Styling
-
-**The consumer owns the single Tailwind entry.** The layer ships a palette-free
-Tailwind base at `@uxfront/layer-docs/app/assets/css/main.css` and deliberately
-does not register it itself. A brand `@theme` only compiles into real `:root`
-custom properties when it lives inside a Tailwind pass, so your CSS file has to
-_import_ the layer base rather than sit beside it as a second entry — two
-entries each re-emit every base utility into the shipped stylesheet.
-
-Register one CSS entry:
-
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  extends: ["@uxfront/layer-docs"],
-  css: ["./app/assets/css/main.css"],
-});
-```
-
-whose first line imports the layer base, followed by your palette:
-
-```css
-/* app/assets/css/main.css */
-@import "@uxfront/layer-docs/app/assets/css/main.css";
+`value` is the slot name pages write each framework's examples in, and `icon` any [Iconify](https://icones.js.org) icon. The layer ships no default list, so with none, the switcher and the select render nothing.
 
-/* The layer's own `@source` paths are package-relative (they resolve inside
-   node_modules), so re-scan your content and config for utility classes. */
-@source "../../../content/**/*";
-@source "../../app.config.ts";
+## The header wordmark
 
-@theme static {
-  --color-teal: hsl(189, 53%, 41%);
-  /* … the rest of the scale … */
-}
-
-:root {
-  --ui-primary: var(--color-teal);
-}
-```
-
-The scale name must match `ui.colors.primary` in your `app.config.ts` for Nuxt
-UI to resolve component variants onto it.
-
-### Guardrail tests
-
-Both halves of that contract fail silently, so the layer ships the guards.
-`vitest` is an optional peer dependency, needed only for these.
-
-```ts
-// test/brand-palette-css.test.ts — source-level, no build required
-import { describeBrandPaletteCss } from "@uxfront/layer-docs/test";
-
-describeBrandPaletteCss({
-  entry: new URL("../app/assets/css/main.css", import.meta.url),
-  scale: "teal",
-});
-```
+Docus prints the site name in the header as plain text. Set `docsTheme.wordmark` to write it the way the UXFront homepages do, one part bold, and `docsTheme.byline` to sign it "by UXFront", linked to uxfront.com:
 
 ```ts
-// test/brand-palette-compiled.build.test.ts — requires a prior `nuxt build`
-import { describeSingleTailwindPass } from "@uxfront/layer-docs/test";
-
-describeSingleTailwindPass({
-  output: new URL("../.output/public/_nuxt", import.meta.url),
-  scale: "teal",
+// app/app.config.ts
+export default defineAppConfig({
+  docsTheme: {
+    // **Open**Components
+    wordmark: { bold: "Open", regular: "Components" },
+    byline: true,
+  },
 });
 ```
 
-The first asserts your CSS entry is a Tailwind entry and defines the palette.
-The second reads the built stylesheet and asserts every base utility is emitted
-**exactly once** — catching both a duplicate Tailwind pass (double payload) and
-a CSS entry that never reached the bundle (no base utilities at all). Run it in
-whichever CI job already builds the app; it needs `.output/` on disk.
-
-## Storybook embeds
-
-`StorybookEmbed` renders a deployed Storybook story inside a docs page. Point it
-at your Storybook once, from env — the host is a deployment fact, not a code
-fact, so it lives in runtime config rather than `app.config`:
-
-```bash
-# a single Storybook
-NUXT_PUBLIC_STORYBOOK_BASE_URL="https://storybook.example.com"
-
-# or one per framework — `{framework}` is substituted per embed
-NUXT_PUBLIC_STORYBOOK_BASE_URL="https://{framework}.storybook.example.com"
-```
-
-Then use it from markdown:
-
-```mdc
-:storybook-embed{story="components-actions-button--default"}
-
-:storybook-embed{story="components-actions-button--default" mode="panel"}
-
-:storybook-embed{story="components-actions-button--default" title="Button"}
-```
-
-| Prop        | Default          | Notes                                                                                               |
-| ----------- | ---------------- | --------------------------------------------------------------------------------------------------- |
-| `story`     | —                | Storybook story id, e.g. `components-actions-button--default`.                                      |
-| `framework` | `useFramework()` | Fills `{framework}` in the base URL. Follows the tab by default.                                    |
-| `mode`      | `"preview"`      | `preview` (canvas only) · `full` (manager, no sidebar) · `panel` (manager with the controls panel). |
-| `height`    | mode default     | Number (px) or any CSS length. Set it and auto-height is off.                                       |
-| `title`     | —                | Wraps the embed in `BrowserFrame` with this title.                                                  |
-
-The embed mounts its iframe only once it is 200px from the viewport, keeps the
-Storybook's colour mode in sync with the page's, and grows to fit its story.
-Height is always reserved, so none of that shifts layout.
-
-### The Storybook side
-
-Auto-height and theme sync are a two-way `postMessage` contract, so the
-Storybook has to answer. Install the bridge — it is framework-free and imports
-nothing from Nuxt:
-
-```ts
-// .storybook/preview.ts
-import { installDocsEmbedPreviewBridge } from "@uxfront/layer-docs/storybook";
-
-installDocsEmbedPreviewBridge({ onTheme: (theme) => applyTheme(theme) });
-```
-
-```ts
-// .storybook/manager.ts — only needed for `full` / `panel`
-import { installDocsEmbedManagerBridge } from "@uxfront/layer-docs/storybook";
-
-installDocsEmbedManagerBridge({ onTheme: (theme) => applyTheme(theme) });
-```
+The wordmark links home, and its accessible name is Docus's `header.title`, or the site name. The byline sits beside the link, not inside it, and phones leave it out so the header's buttons keep their room. With neither set, the header shows Docus's own title or logo.
 
-Without the bridge the embed still renders; it just holds its default height and
-does not follow the page's colour mode.
+## Writing examples
 
-### Migrating an existing Storybook
+Put one slot per framework in a `::framework-switcher`:
 
-If your Storybook already speaks a branded namespace (`<brand>:theme`,
-`<brand>:height`), name it and both sides accept **and** emit both spellings, so
-the docs site and the Storybook can deploy in either order:
+````md
+::framework-switcher
+#react
 
-```bash
-NUXT_PUBLIC_STORYBOOK_LEGACY_MESSAGE_NAMESPACE="acme"
+```tsx [Button.tsx]
+export const Button = () => <button>Save</button>;
 ```
 
-Unset it once both sides are on `@uxfront/layer-docs/storybook`.
-
-## OG images
+#vue
 
-Social share cards are on by default — the layer registers `nuxt-og-image` and
-calls `defineOgImage` from the docs and landing pages, so a consumer that sets up
-the CSS entry above gets branded 1200×630 cards without writing anything. Opt out
-with the module's own switch: `ogImage: { enabled: false }`.
-
-The accent is resolved to a **literal colour at build time** by following
-`--ui-primary` to the `--color-<scale>` value it aliases in your CSS entry.
-Satori — the renderer behind `.satori.vue` templates — has no CSS cascade and no
-custom properties, so `var(--ui-primary)` would render as nothing, and a utility
-class like `text-teal-500` would render Tailwind's teal rather than yours (your
-`@theme` shadows the stock scale name). Override it with a literal if you need
-something other than the brand colour:
-
-```ts
-export default defineAppConfig({
-  ogImage: { accent: "#a78bfa" },
-});
+```vue [Button.vue]
+<template><button>Save</button></template>
 ```
 
-Two pieces of the card are components rather than props, because `defineOgImage`
-serialises its arguments and a Vue slot cannot cross that boundary. Shadow either
-by creating a file at the same path in your own `app/components/`:
-
-| Component                 | Default                             |
-| ------------------------- | ----------------------------------- |
-| `app/AppOgDecoration.vue` | A neutral radial-gradient flourish  |
-| `app/AppOgLogo.vue`       | A text wordmark from `header.title` |
-
-The wordmark is text, not `AppHeaderLogo`: that component renders
-`UColorModeImage`, and satori has neither a colour mode nor a browser to resolve
-relative image paths against. A brand that wants its mark on the card overrides
-`AppOgLogo.vue` with an `<img>` pointing at an **absolute** URL.
-
-## Compatibility
+::
+````
 
-Pinned to the Nuxt 4 documentation stack (Nuxt 4.4, Nuxt UI 4.8, Content 3.14,
-i18n 10.4, og-image 6, llms 0.2). TypeScript is pinned to the range the Nuxt
-stack supports (`^6.0.3`). See `peerDependencies` for the authoritative ranges.
+## What it adds
 
-## License
+- **`FrameworkSwitcher`.** One tab per framework, on Nuxt UI's tabs, so it follows the WAI-ARIA tabs pattern (arrow keys between tabs, panels labelled by their tab). A page doesn't have to cover every framework: a missing one shows the first one the page has, with a note saying so. When the tabs outgrow the width, the list scrolls.
+- **A Framework select above the sidebar.** It replaces Docus's `DocsAsideLeftTop` and renders Docus's below it.
+- **A header wordmark and byline.** It replaces Docus's `AppHeaderLeft`, and renders Docus's unless the app sets a wordmark.
+- **`useFramework()`.** The reader's pick, shared by every switcher and the select, and kept in `localStorage` across visits. It's read once the page is mounted, so the prerendered HTML shows the default framework and hydrates cleanly.
+- **Bundled icons.** Nuxt Icon bundles the icons named in app config too, so the select's icons don't come from the Iconify API.
 
-[MIT](./LICENSE)
+Everything else is Docus's: configure it as its [docs](https://docus.dev) describe.

package/app/app.config.ts

@@ -1,96 +1,12 @@
-export default defineAppConfig({
-  /**
-   * Neutral shell defaults. This layer ships NO product branding — consuming
-   * apps supply title, logos, socials, GitHub, footer, TOC links and palette
-   * via their own `app.config.ts` (merged over these defaults by Nuxt's `defu`
-   * layer merge). `modules/config.ts` also fills `seo`/`header`/`github` from
-   * the consumer's `package.json` + git as fallbacks.
-   *
-   * @docs https://www.docus.dev/concepts/configuration#global-configuration
-   */
-  toc: {
-    // Title of the main table of contents
-    title: "On this page",
-  },
+import type { FrameworkOption } from "./composables/useFramework";
 
-  header: {
-    /**
-     * Optional brand attribution rendered beside the header wordmark.
-     * `title: "uxd"` plus `{ prefix: "by", label: "UXFront", to: "https://uxfront.com" }`
-     * renders "uxd by UXFront" with only "UXFront" linked. An empty `label`
-     * renders nothing, which is the neutral default.
-     */
-    attribution: {
-      prefix: "",
-      label: "",
-      to: "",
-    },
-  },
+// Empty, so an app that lists none gets no framework switcher or select. Nuxt
+// concatenates app config arrays across layers, so a list here would be added
+// to the app's instead of replaced by it.
+const frameworks: FrameworkOption[] = [];
 
-  /**
-   * Opt-out flags for the layer's client plugins. Defaults keep them on so an
-   * existing consumer is unchanged; a consumer opts out by setting `false`.
-   */
-  analytics: {
-    // PostHog analytics plugin (production only, requires a runtime key).
-    enabled: true,
-  },
-  i18nRedirect: {
-    // Redirect `/` to `/{locale}` (only fires when i18n is configured).
-    enabled: true,
-  },
-
-  ui: {
-    // Palette-free type discriminant — NOT branding. Nuxt UI's wide
-    // `AppConfigUI` type (which permits the component slot overrides below)
-    // only applies to `ui` when a `colors` key is present; without it the
-    // narrow `nuxt.schema.ts` Studio type wins and the slots fail
-    // excess-property checks. The empty object bakes in no palette; each
-    // consumer supplies the real `colors` (merged over this by `defu`).
-    colors: {},
-    // Neutral Nuxt UI Pro component polish — reusable shell defaults every
-    // consumer inherits, not product branding.
-    commandPalette: {
-      slots: {
-        input: "[&_.iconify]:size-4 [&_.iconify]:mx-0.5",
-        itemLeadingIcon: "size-4 mx-0.5",
-      },
-    },
-    contentNavigation: {
-      slots: {
-        trigger: "font-normal text-muted data-[state=open]:text-muted cursor-pointer",
-        linkLeadingIcon: "size-4 mr-1",
-        linkTrailing: "hidden",
-      },
-      compoundVariants: [
-        {
-          variant: "link",
-          active: false,
-          disabled: false,
-          class: {
-            linkLeadingIcon: "group-data-[state=open]:text-dimmed",
-          },
-        },
-      ],
-      defaultVariants: {
-        variant: "link",
-      },
-    },
-    pageLinks: {
-      slots: {
-        linkLeadingIcon: "size-4",
-        linkLabelExternalIcon: "size-2.5",
-      },
-    },
-    pageCard: {
-      slots: {
-        root: "rounded-xl",
-      },
-    },
-    pricingTable: {
-      slots: {
-        tierTitle: "text-highlighted text-2xl sm:text-3xl text-pretty font-semibold",
-      },
-    },
+export default defineAppConfig({
+  docsTheme: {
+    frameworks,
   },
 });

package/app/components/app/AppHeaderLeft.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+// Replaces Docus's, which prints the site name as plain text, to set the app's
+// wordmark (`docsTheme.wordmark`) and sign it "by UXFront" (`docsTheme.byline`),
+// the way the UXFront homepage headers do. With neither, it renders Docus's own.
+import UxFrontMark from "@uxfront/ui/components/icons/UxFrontMark.vue";
+import DocusAppHeaderLeft from "docus/app/components/app/AppHeaderLeft.vue";
+
+const appConfig = useAppConfig();
+const site = useSiteConfig();
+const { localePath } = useDocusI18n();
+
+const wordmark = computed(() => appConfig.docsTheme.wordmark);
+const ariaLabel = computed(() => appConfig.header?.title || site.name);
+</script>
+
+<template>
+  <div class="docs-header-left">
+    <NuxtLink v-if="wordmark" :to="localePath('/')" :aria-label="ariaLabel" class="docs-wordmark">
+      <strong>{{ wordmark.bold }}</strong
+      >{{ wordmark.regular }}
+    </NuxtLink>
+    <DocusAppHeaderLeft v-else />
+    <!-- Beside the home link, not inside it, since it holds a link of its own. -->
+    <span v-if="appConfig.docsTheme.byline" class="docs-byline">
+      by
+      <a href="https://uxfront.com">
+        <UxFrontMark />
+        <span><strong>UX</strong>Front</span>
+      </a>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+/* Styled here rather than with Tailwind utilities: Docus's stylesheet doesn't
+   list this layer among Tailwind's sources, so only utilities Docus happens to
+   use itself would be generated. */
+.docs-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.docs-wordmark {
+  flex-shrink: 0;
+}
+
+/* Phones leave the byline out: beside the header's buttons, it pushes the menu
+   toggle off-screen. */
+.docs-byline {
+  display: none;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  white-space: nowrap;
+  color: var(--ui-text-muted);
+}
+
+.docs-byline a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+  color: var(--ui-text-toned);
+  transition: color 0.15s;
+}
+
+.docs-byline a:hover {
+  color: var(--ui-text-highlighted);
+}
+
+.docs-byline svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+@media (min-width: 40rem) {
+  .docs-byline {
+    display: inline-flex;
+  }
+}
+</style>

package/app/components/content/FrameworkSwitcher.vue

@@ -1,48 +1,74 @@
 <script setup lang="ts">
-const { framework, frameworks } = useFramework();
-const slots = useSlots();
-
-const current = computed(
-  () => frameworks.value.find((f) => f.value === framework.value) ?? frameworks.value[0],
-);
+import type { FrameworkOption } from "../../composables/useFramework";
 
-// When the selected framework has no matching slot on this page, fall back to
-// the first framework that does. Keeps a page authored for a subset of the
-// consumer's framework list usable under an N-tab switcher.
-const fallback = computed(() => {
-  if (slots[framework.value]) return null;
-  return frameworks.value.find((f) => slots[f.value]) ?? null;
-});
+/**
+ * Shows the reader's framework out of a page's per-framework examples:
+ *
+ * ```md
+ * ::framework-switcher
+ * #react
+ * …
+ * #vue
+ * …
+ * ::
+ * ```
+ *
+ * One tab per framework in `docsTheme.frameworks`. Picking one here picks it
+ * everywhere, the sidebar's select included. Nuxt UI's tabs bring the WAI-ARIA
+ * tabs pattern: arrow keys move between tabs, and each panel is labelled by its tab.
+ */
+const { framework, frameworks, current } = useFramework();
+const slots = useSlots();
+const tabs = useTemplateRef("tabs");
 
-function select(value: string) {
-  framework.value = value;
+// A page can cover only some frameworks. The others show the first one it covers.
+function shown(option: FrameworkOption) {
+  return slots[option.value] ? option : frameworks.value.find((f) => slots[f.value]);
 }
+
+// When the tabs outgrow the width, the list scrolls. A pick made elsewhere (in
+// another switcher, in the sidebar, or restored once mounted) scrolls the list
+// to its tab. scrollIntoView() would scroll the page to the switcher too.
+watch(
+  current,
+  (option) => {
+    const index = option ? frameworks.value.indexOf(option) : -1;
+    const tab: HTMLElement | undefined = tabs.value?.triggersRef[index]?.$el;
+    const list = tab?.parentElement;
+    if (!tab || !list) return;
+    const end = tab.offsetLeft + tab.offsetWidth - list.clientWidth;
+    list.scrollLeft = Math.min(tab.offsetLeft, Math.max(list.scrollLeft, end));
+  },
+  { flush: "post" },
+);
 </script>
 
 <template>
-  <div class="framework-switcher">
-    <div
-      v-if="frameworks.length"
-      class="framework-switcher-tabs flex flex-wrap gap-1 mb-3 border-b border-default"
-      role="tablist"
-    >
-      <UButton
-        v-for="option in frameworks"
-        :key="option.value"
-        :icon="option.icon"
-        :label="option.label"
-        :color="option.value === current?.value ? 'primary' : 'neutral'"
-        variant="ghost"
-        size="sm"
-        role="tab"
-        :aria-selected="option.value === current?.value"
-        @click="select(option.value)"
-      />
-    </div>
-    <p v-if="fallback" class="text-sm text-muted mb-2">
-      Not available for {{ current?.label }} — showing {{ fallback.label }}.
-    </p>
-    <slot v-if="!fallback" :name="framework" />
-    <slot v-else :name="fallback.value" />
-  </div>
+  <UTabs
+    v-if="current"
+    ref="tabs"
+    :model-value="current.value"
+    :items="frameworks"
+    color="primary"
+    variant="link"
+    size="sm"
+    class="framework-switcher"
+    :ui="{
+      root: 'my-5 gap-4',
+      // Scrolls when the tabs outgrow the width. The baseline and the selected
+      // tab's underline are drawn inside the list, where scrolling doesn't clip them.
+      list: 'overflow-x-auto border-b-0 mb-0 shadow-[inset_0_-1px_0_var(--ui-border)]',
+      indicator: 'bottom-0',
+      trigger: 'shrink-0',
+      content: '*:first:mt-0 *:last:mb-0',
+    }"
+    @update:model-value="framework = String($event)"
+  >
+    <template #content="{ item }">
+      <p v-if="!slots[item.value] && shown(item)" class="mb-2 text-sm text-muted">
+        Not available for {{ item.label }}, showing {{ shown(item)!.label }}.
+      </p>
+      <slot v-if="shown(item)" :name="shown(item)!.value" />
+    </template>
+  </UTabs>
 </template>

package/app/components/docs/DocsAsideLeftTop.vue

@@ -1,24 +1,18 @@
 <script setup lang="ts">
-/**
- * Persistent framework selector above the docs sidebar navigation.
- *
- * Renders nothing unless the consumer declares `docsTheme.frameworks` in its
- * `app.config.ts`. The in-content `FrameworkSwitcher` shares the same state,
- * but per-page tabs alone scale poorly past a handful of frameworks — this is
- * the always-visible control for the same preference.
- */
+// Replaces Docus's own to put the framework select above the sidebar navigation,
+// and renders Docus's below it, so its section links still show when enabled.
+import DocusAsideLeftTop from "docus/app/components/docs/DocsAsideLeftTop.vue";
+
 const { frameworks } = useFramework();
-const { t } = useDocusI18n();
+const labelId = useId();
 </script>
 
 <template>
   <div v-if="frameworks.length">
-    <span
-      class="group relative w-full pr-2.5 py-1.5 flex items-center gap-1.5 text-sm text-muted cursor-default hover:text-highlighted transition-colors font-normal"
-    >
-      <span class="truncate">{{ t("docs.framework") }}</span>
+    <span :id="labelId" class="w-full pr-2.5 py-1.5 flex items-center text-sm text-muted">
+      Framework
     </span>
-
-    <DocsFrameworkSelect class="mb-2" />
+    <DocsFrameworkSelect :aria-labelledby="labelId" class="mb-2" />
   </div>
+  <DocusAsideLeftTop />
 </template>

package/app/components/docs/DocsFrameworkSelect.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
-const { framework, frameworks } = useFramework();
-
-const current = computed(
-  () => frameworks.value.find((option) => option.value === framework.value) ?? frameworks.value[0],
-);
+const { framework, frameworks, current } = useFramework();
 </script>
 
 <template>
   <USelect
-    v-model="framework"
-    :items="[...frameworks]"
+    :model-value="current?.value"
+    :items="frameworks"
     variant="ghost"
     color="neutral"
     :icon="current?.icon"
     class="w-full"
+    @update:model-value="framework = $event"
   />
 </template>