@bysages/nuxt 0.3.1 → 0.4.1

package/dist/module.d.mts

@@ -2,11 +2,11 @@ import * as _nuxt_schema from '@nuxt/schema';
 import { ApplyThemeOptions } from '@bysages/core';
 
 interface BsElementsOptions {
-    /** Prefix for the auto-imported components — "Bs" renders `<BsButton>`.
-     * Empty by default. */
+    /** Prefix for auto-imported components — `Bs` renders `<BsButton>`.
+     * `"Bs"` by default; use `""` only when the app owns the name space. */
     prefix?: string;
-    /** Theme applied on the client before the app mounts: mode, accent,
-     * scene, density, contrast — anything `applyTheme` accepts. */
+    /** Default theme applied before mount: mode, accent, scene, density,
+     * contrast — anything `applyTheme` accepts. A persisted user choice wins. */
     theme?: ApplyThemeOptions;
 }
 declare const _default: _nuxt_schema.NuxtModule<BsElementsOptions, BsElementsOptions, false>;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@bysages/nuxt",
   "configKey": "bsElements",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { tokensCss, componentStyles } from '@bysages/core';
+import { tokensCss, componentStyles, themeStorageKey } from '@bysages/core';
 import { defineNuxtModule, createResolver, addComponent, addTemplate, addPlugin } from '@nuxt/kit';
 
 function isComponentExport(value) {
@@ -9,23 +9,23 @@ function isComponentExport(value) {
     (member) => typeof member === "function" || typeof member === "object" && member !== null && ("render" in member || "setup" in member)
   );
 }
-const RESERVED = /* @__PURE__ */ new Set(["Icon"]);
 const module$1 = defineNuxtModule({
   meta: {
     name: "@bysages/nuxt",
     configKey: "bsElements"
   },
   defaults: {
-    prefix: ""
+    prefix: "Bs"
   },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     const families = await import('@bysages/vue');
     for (const name of Object.keys(families)) {
       if (!/^[A-Z]/.test(name) || !isComponentExport(families[name])) continue;
-      if (RESERVED.has(name)) continue;
+      const componentName = `${options.prefix}${name}`;
+      if (componentName === "Icon") continue;
       addComponent({
-        name: options.prefix + name,
+        name: componentName,
         export: name,
         filePath: "@bysages/vue"
       });
@@ -42,6 +42,28 @@ const module$1 = defineNuxtModule({
     nuxt.options.css.push(styles.dst);
     nuxt.options.app.head.meta ||= [];
     nuxt.options.app.head.meta.push({ name: "bs-styles-shipped", content: "build" });
+    const configuredTheme = JSON.stringify(options.theme ?? null).replaceAll("<", "\\u003c");
+    nuxt.options.app.head.script ||= [];
+    nuxt.options.app.head.script.push({
+      tagPosition: "head",
+      innerHTML: `(() => {
+        try {
+          const stored = JSON.parse(localStorage.getItem(${JSON.stringify(themeStorageKey)}) || "null");
+          const theme = stored || ${configuredTheme};
+          if (!theme) return;
+          const mode = theme.mode === "system"
+            ? (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+            : theme.mode;
+          const root = document.documentElement;
+          if (mode === "dark" || mode === "light") root.dataset.theme = mode;
+          if (theme.contrast === "high") root.dataset.contrast = "high";
+          else delete root.dataset.contrast;
+          root.dataset.density = theme.density || "default";
+          if (theme.scene && theme.scene !== "auto") root.dataset.scene = theme.scene;
+          else delete root.dataset.scene;
+        } catch {}
+      })();`
+    });
     addPlugin(resolver.resolve("./runtime/plugin"));
   }
 });

package/dist/runtime/plugin.d.ts

@@ -1,7 +1,5 @@
-/** Applies the theme configured through module options on the client.
- * The wrappers' own injection already stands down against the build-time
- * stylesheet via the head marker the module plants. Published modules
- * cannot lean on the application's auto-imports — the Nuxt APIs come
- * in explicitly from `#imports`, which the consuming build resolves. */
+/** Applies the configured default theme, but never outranks an explicit
+ * persisted choice. A stored theme is restored before mount instead; the
+ * module's early head script already prevents the first-paint flash. */
 declare const _default: any;
 export default _default;

package/dist/runtime/plugin.js

@@ -1,7 +1,11 @@
-import { applyTheme } from "@bysages/core";
+import { applyTheme, hasStoredTheme, initTheme } from "@bysages/core";
 import { defineNuxtPlugin, useRuntimeConfig } from "#imports";
 export default defineNuxtPlugin(() => {
   if (import.meta.server) return;
   const { theme } = useRuntimeConfig().public.bsElements;
-  if (theme) applyTheme(theme);
+  if (hasStoredTheme()) {
+    initTheme();
+  } else if (theme) {
+    applyTheme(theme);
+  }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/nuxt",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Nuxt module for By Sages Elements — auto-imports the paper-and-ink Vue components and applies the theme",
   "keywords": [
     "components",
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@nuxt/kit": "4.5.2",
-    "@bysages/vue": "0.3.1",
-    "@bysages/core": "0.3.1"
+    "@bysages/core": "0.4.1",
+    "@bysages/vue": "0.4.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "1.0.3",