@lucasvu/scope-ui 0.1.0 → 0.1.2

package/dist/core/index.js

@@ -0,0 +1 @@
+export { ROOT_CLIENT_THEME_ATTRIBUTE, ROOT_COLOR_MODE_ATTRIBUTE, applyDocumentClientTheme, applyDocumentColorMode, cn, getSystemColorMode, initializeDocumentColorMode, isColorMode, subscribeToSystemColorMode, syncDocumentColorModeToSystem, uiAiManifest, uiDefaultThemePreset, uiProjectAiRules, uiScreenBlueprint, uiScreenBriefFields, uiThemeContract, uiThemeLayerAssets, uiThemePresets } from '../chunk-CL3F2TWE.js';

package/dist/index.cjs

@@ -7491,15 +7491,182 @@ var uiThemeContract = {
   exampleCss: createThemePresetCssExample(uiDefaultThemePreset)
 };
 var uiProjectAiRules = [
-  "Use @lucasvu/scope-ui as the default UI library.",
+  "Use @lucasvu/scope-ui as the default UI library for React projects, or @lucasvu/scope-ui/core for framework-agnostic theme/runtime usage.",
   "Import @lucasvu/scope-ui/styles.css once at the app entry.",
-  "Import the project override theme file after the package stylesheet.",
+  "Import the project override theme file after the package stylesheet or bundled theme layer.",
   "Stay inside the approved theme preset declared by the project and do not invent a second palette.",
   "Read uiAiManifest to choose the correct component by intent before coding.",
-  "Read uiThemeContract before changing colors, shadows, radius, or theme behavior.",
+  "Read uiThemeContract and uiThemeLayerAssets before changing colors, shadows, radius, or theme behavior.",
   "Prefer root exports and avoid MainFe unless the task explicitly targets a legacy screen."
 ];
 
+// src/theme-layer-assets.ts
+var uiThemeLayerAssets = [
+  {
+    id: "default",
+    label: "Theme Default",
+    importPath: "@lucasvu/scope-ui/themes/theme-default.css",
+    activation: "global",
+    description: "Global default token layer close to the legacy shared theme baseline.",
+    recommendedFor: [
+      "Projects that want a direct global theme layer without extra setup",
+      "Legacy migrations"
+    ]
+  },
+  {
+    id: "new-main-fe",
+    label: "New Main FE",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-new-main-fe.css",
+    activation: "global",
+    description: "Global Argon-inspired shell layer that works immediately after import.",
+    recommendedFor: [
+      "Admin shells",
+      "Projects that want the current shared main-fe tone"
+    ]
+  },
+  {
+    id: "citrus-ink",
+    label: "Citrus Ink",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-citrus-ink.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "citrus-ink",
+    description: "High-contrast graphite theme with mint and citrus accents.",
+    recommendedFor: ["Brand-heavy dashboards"]
+  },
+  {
+    id: "facebook-blue",
+    label: "Facebook Blue",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-facebook-blue.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "facebook-blue",
+    description: "Blue-first neutral theme tuned around a familiar social palette.",
+    recommendedFor: ["Blue-branded products"]
+  },
+  {
+    id: "neo-slate",
+    label: "Neo Slate",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-neo-slate.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "neo-slate",
+    description: "Modern slate-indigo workspace theme with richer shell tokens.",
+    recommendedFor: ["Contemporary SaaS dashboards", "Modern admin shells"]
+  },
+  {
+    id: "siraya-brand",
+    label: "Siraya Brand Sunset",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-new-main-fe-sunset.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "siraya-brand",
+    description: "Warm branded shell with typography and page-slot overrides.",
+    recommendedFor: ["Brand-led marketing or hybrid product shells"]
+  },
+  {
+    id: "pure-white",
+    label: "Pure White",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-pure-white.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "pure-white",
+    description: "Clean white workspace theme with cobalt accents.",
+    recommendedFor: ["Minimalist backoffices"]
+  },
+  {
+    id: "siraya-vii-light",
+    label: "Siraya VII Light",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-siraya-vii-light.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "siraya-vii-light",
+    description: "Light brand system based on the Siraya VII palette.",
+    recommendedFor: ["Brand refresh experiments"]
+  },
+  {
+    id: "solstice-pop",
+    label: "Solstice Pop",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-solstice-pop.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "solstice-pop",
+    description: "Editorial warm-stone theme with stronger typography direction.",
+    recommendedFor: ["Content-heavy dashboards"]
+  },
+  {
+    id: "uat-aurora",
+    label: "UAT Aurora",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-uat-aurora.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "uat-aurora",
+    description: "Soft slate-blue experimental theme using the same token structure as sunset.",
+    recommendedFor: ["UAT or staging environments", "Blue-toned shells"]
+  },
+  {
+    id: "custom-crisp",
+    label: "Custom Crisp",
+    importPath: "@lucasvu/scope-ui/themes/theme-ui-custom-crisp.css",
+    activation: "data-client-theme",
+    clientThemeAttributeValue: "*",
+    description: "Cross-theme typography and control crispness overrides for client-theme-driven shells.",
+    recommendedFor: ["Attribute-scoped client themes that need sharper controls"]
+  }
+];
+
+// src/color-mode.ts
+var ROOT_COLOR_MODE_ATTRIBUTE = "data-ui-color-mode";
+var ROOT_CLIENT_THEME_ATTRIBUTE = "data-client-theme";
+var ROOT_DARK_CLASS = "dark";
+var SYSTEM_DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+var resolveColorModeMediaQuery = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return null;
+  }
+  return window.matchMedia(SYSTEM_DARK_MEDIA_QUERY);
+};
+var isColorMode = (value) => value === "light" || value === "dark";
+var getSystemColorMode = () => resolveColorModeMediaQuery()?.matches ? "dark" : "light";
+var applyDocumentColorMode = (colorMode) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const root = document.documentElement;
+  root.classList.toggle(ROOT_DARK_CLASS, colorMode === "dark");
+  root.setAttribute(ROOT_COLOR_MODE_ATTRIBUTE, colorMode);
+  root.style.colorScheme = colorMode;
+};
+var initializeDocumentColorMode = (colorMode = getSystemColorMode()) => {
+  applyDocumentColorMode(colorMode);
+  return colorMode;
+};
+var subscribeToSystemColorMode = (listener) => {
+  const mediaQuery = resolveColorModeMediaQuery();
+  if (!mediaQuery) {
+    return () => void 0;
+  }
+  const handleChange = (event) => {
+    listener(event.matches ? "dark" : "light");
+  };
+  if (typeof mediaQuery.addEventListener === "function") {
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }
+  mediaQuery.addListener(handleChange);
+  return () => mediaQuery.removeListener(handleChange);
+};
+var syncDocumentColorModeToSystem = () => {
+  const applySystemColorMode = (colorMode) => {
+    applyDocumentColorMode(colorMode);
+  };
+  applySystemColorMode(getSystemColorMode());
+  return subscribeToSystemColorMode(applySystemColorMode);
+};
+var applyDocumentClientTheme = (themeId) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const root = document.documentElement;
+  if (!themeId) {
+    root.removeAttribute(ROOT_CLIENT_THEME_ATTRIBUTE);
+    return;
+  }
+  root.setAttribute(ROOT_CLIENT_THEME_ATTRIBUTE, themeId);
+};
+
 exports.Alert = Alert;
 exports.ArgonSidebar = ArgonSidebar;
 exports.AsyncCombobox = AsyncCombobox;
@@ -7537,6 +7704,8 @@ exports.NumericInput = NumericInput;
 exports.OverflowTooltip = OverflowTooltip;
 exports.PageTitle = PageTitle;
 exports.Pagination = Pagination;
+exports.ROOT_CLIENT_THEME_ATTRIBUTE = ROOT_CLIENT_THEME_ATTRIBUTE;
+exports.ROOT_COLOR_MODE_ATTRIBUTE = ROOT_COLOR_MODE_ATTRIBUTE;
 exports.SearchableSelect = SearchableSelect;
 exports.SectionTitle = SectionTitle;
 exports.Select = Select;
@@ -7552,14 +7721,22 @@ exports.Tabs = Tabs;
 exports.Textarea = Textarea;
 exports.Tooltip = Tooltip;
 exports.TruncatedText = TruncatedText;
+exports.applyDocumentClientTheme = applyDocumentClientTheme;
+exports.applyDocumentColorMode = applyDocumentColorMode;
 exports.cn = cn;
 exports.defaultPermissionChecker = defaultPermissionChecker;
 exports.filterSidebarItems = filterSidebarItems;
+exports.getSystemColorMode = getSystemColorMode;
 exports.hasActiveDescendant = hasActiveDescendant;
+exports.initializeDocumentColorMode = initializeDocumentColorMode;
+exports.isColorMode = isColorMode;
+exports.subscribeToSystemColorMode = subscribeToSystemColorMode;
+exports.syncDocumentColorModeToSystem = syncDocumentColorModeToSystem;
 exports.uiAiManifest = uiAiManifest;
 exports.uiDefaultThemePreset = uiDefaultThemePreset;
 exports.uiProjectAiRules = uiProjectAiRules;
 exports.uiScreenBlueprint = uiScreenBlueprint;
 exports.uiScreenBriefFields = uiScreenBriefFields;
 exports.uiThemeContract = uiThemeContract;
+exports.uiThemeLayerAssets = uiThemeLayerAssets;
 exports.uiThemePresets = uiThemePresets;