@uxfront/layer-docs 0.4.0 → 0.5.0

package/README.md

@@ -1,252 +1,63 @@
 # @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.
 
 ## 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.
+`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.
 
-## Styling
+## Writing examples
 
-**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.
+Put one slot per framework in a `::framework-switcher`:
 
-Register one CSS entry:
+````md
+::framework-switcher
+#react
 
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  extends: ["@uxfront/layer-docs"],
-  css: ["./app/assets/css/main.css"],
-});
+```tsx [Button.tsx]
+export const Button = () => <button>Save</button>;
 ```
 
-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";
-
-/* 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";
+#vue
 
-@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",
-});
+```vue [Button.vue]
+<template><button>Save</button></template>
 ```
 
-```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",
-});
-```
-
-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) });
-```
-
-Without the bridge the embed still renders; it just holds its default height and
-does not follow the page's colour mode.
-
-### Migrating an existing Storybook
-
-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:
-
-```bash
-NUXT_PUBLIC_STORYBOOK_LEGACY_MESSAGE_NAMESPACE="acme"
-```
-
-Unset it once both sides are on `@uxfront/layer-docs/storybook`.
-
-## OG images
-
-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" },
-});
-```
-
-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.
+- **`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/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>

package/app/composables/useFramework.ts

@@ -1,61 +1,53 @@
 import { useLocalStorage } from "@vueuse/core";
 
 /**
- * A single selectable framework in the docs `FrameworkSwitcher` and the sidebar
- * `DocsFrameworkSelect`. `value` doubles as the slot name and the persisted
- * storage token; `label` is the visible text; `icon` is an Iconify name.
- * `value` is an open string so a consumer can declare any framework set
- * (e.g. `svelte`, `solid`, `angular`).
+ * A framework offered by the `FrameworkSwitcher` content component and the
+ * sidebar's `DocsFrameworkSelect`.
  */
 export interface FrameworkOption {
+  /** The slot name pages write this framework's examples in (`#react`), and the stored pick. */
   value: string;
   label: string;
+  /** An Iconify icon, as `i-simple-icons-react` or `simple-icons:react`. */
   icon: string;
 }
 
-// Neutral, layer-owned storage key — not tied to any consuming product.
-const STORAGE_KEY = "docs-theme:framework";
+declare module "nuxt/schema" {
+  interface AppConfigInput {
+    docsTheme?: {
+      /** The frameworks the docs' examples come in, in display order. The first is the default. */
+      frameworks?: FrameworkOption[];
+    };
+  }
+}
 
 /**
- * Reads the framework list a consumer declares — in display order — in its
- * `app.config.ts`:
- *
- * ```ts
- * export default defineAppConfig({
- *   docsTheme: {
- *     frameworks: [
- *       { value: "react", label: "React", icon: "i-mdi-react" },
- *       { value: "vue", label: "Vue", icon: "i-mdi-vuejs" },
- *       { value: "svelte", label: "Svelte", icon: "i-mdi-svelte" },
- *     ],
- *   },
- * });
- * ```
+ * The reader's framework, shared by every `FrameworkSwitcher` on the page and
+ * the sidebar's `DocsFrameworkSelect`, and kept across visits. The options are
+ * the app's `docsTheme.frameworks`; with none, the switcher and the select
+ * render nothing.
  *
- * `docsTheme.frameworks` is the only source. Which frameworks a product
- * documents is the product's fact, not the theme's, so the layer ships no
- * default list; a consumer that declares none gets an empty list and the
- * framework UI renders nothing.
- *
- * The list is read from app config rather than merged as a layer default on
- * purpose: Nuxt's `defu` layer merge *concatenates* arrays, so a shipped default
- * would append to (not replace) the consumer's list.
+ * The stored pick is only read once mounted, so the prerendered HTML and the
+ * first client render both show the default, and hydrate cleanly.
  */
-export const useFramework = () => {
-  const appConfig = useAppConfig() as {
-    docsTheme?: { frameworks?: FrameworkOption[] };
-  };
+export function useFramework() {
+  const appConfig = useAppConfig();
 
-  const frameworks = computed<readonly FrameworkOption[]>(
-    () => appConfig.docsTheme?.frameworks ?? [],
-  );
+  const frameworks = computed<FrameworkOption[]>(() => appConfig.docsTheme.frameworks);
 
-  const framework = useLocalStorage<string>(STORAGE_KEY, frameworks.value[0]?.value ?? "", {
+  const framework = useLocalStorage("docs-theme:framework", frameworks.value[0]?.value ?? "", {
     initOnMounted: true,
   });
 
+  // A stored pick that's no longer on the list falls back to the default.
+  const current = computed(
+    () =>
+      frameworks.value.find((option) => option.value === framework.value) ?? frameworks.value[0],
+  );
+
   return {
     framework,
     frameworks,
+    current,
   };
-};
+}