@lucasvu/scope-ui 0.0.8 → 0.1.1

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

@@ -6647,7 +6647,8 @@ var uiAiManifest = {
   rules: [
     "Import the stylesheet once at the app entry before rendering any component.",
     "If the project declares an approved theme preset in AGENTS.md or ui-theme.css, stay inside that preset and do not invent a second palette.",
-    "Collect the screen brief first: route url, sidebar items, active sidebar item, page title, actions, and the page-specific content schema.",
+    "Collect the shell + screen brief first: layout preset, workspace label, route url, sidebar items, active sidebar item, page title, tabs/actions, and the page-specific content schema.",
+    "If the project ships a generated layout preset file, keep the shell aligned with it instead of inventing a new page frame.",
     "Prefer the canonical component for each intent instead of mixing legacy MainFe components.",
     "Use Input/Textarea/Select label props directly for simple fields; use Field only to wrap custom controls or grouped content.",
     "Use Select for small fixed option lists, SearchableSelect for larger local lists, Combobox for type-and-pick flows, and AsyncCombobox for remote search.",
@@ -6865,6 +6866,30 @@ var uiAiManifest = {
 
 // src/screen-blueprint.ts
 var uiScreenBriefFields = [
+  {
+    id: "layoutPreset",
+    label: "Layout preset",
+    description: "Shared shell preset id that locks the sidebar/topbar/page-card structure.",
+    required: false,
+    appliesTo: ["all"],
+    example: "workspace-admin-v1"
+  },
+  {
+    id: "workspaceLabel",
+    label: "Workspace label",
+    description: "Short label shown in the sidebar or workspace topbar.",
+    required: false,
+    appliesTo: ["all"],
+    example: "Workspace"
+  },
+  {
+    id: "timezoneLabel",
+    label: "Timezone/meta label",
+    description: "Short meta label shown in the top-right shell area, such as a timezone or environment.",
+    required: false,
+    appliesTo: ["all"],
+    example: "UTC+07:00"
+  },
   {
     id: "pageKind",
     label: "Page kind",
@@ -6921,6 +6946,22 @@ var uiScreenBriefFields = [
     appliesTo: ["all"],
     example: "Manage internal user accounts and permissions."
   },
+  {
+    id: "pageTabs",
+    label: "Page tabs",
+    description: "Optional segmented tabs rendered under the intro card.",
+    required: false,
+    appliesTo: ["all"],
+    example: '[{ value: "overview", label: "Overview" }, { value: "coupons", label: "Coupons" }]'
+  },
+  {
+    id: "activePageTab",
+    label: "Active page tab",
+    description: "The selected segmented tab value when tabs are present.",
+    required: false,
+    appliesTo: ["all"],
+    example: "coupons"
+  },
   {
     id: "primaryAction",
     label: "Primary action",
@@ -6953,6 +6994,14 @@ var uiScreenBriefFields = [
     appliesTo: ["list", "dashboard"],
     example: '[{ type: "search", label: "Search user" }, { type: "select", label: "Role" }]'
   },
+  {
+    id: "searchPlaceholder",
+    label: "Search placeholder",
+    description: "Placeholder text for the main toolbar search input when the shell includes one.",
+    required: false,
+    appliesTo: ["list", "dashboard"],
+    example: "Search by coupon code"
+  },
   {
     id: "tableColumns",
     label: "Table columns",
@@ -7017,10 +7066,11 @@ var uiScreenBlueprint = {
       label: "List page",
       frame: [
         "Sidebar shell",
-        "Breadcrumb",
-        "PageTitle with actions",
+        "Workspace topbar",
+        "Page intro card with Breadcrumb and PageTitle",
+        "Optional segmented tabs",
+        "Toolbar card",
         "Optional stats",
-        "Filter card",
         "DataTable card"
       ]
     },
@@ -7029,8 +7079,10 @@ var uiScreenBlueprint = {
       label: "Form page",
       frame: [
         "Sidebar shell",
-        "Breadcrumb",
-        "PageTitle with primary and cancel actions",
+        "Workspace topbar",
+        "Page intro card with Breadcrumb and PageTitle",
+        "Optional segmented tabs",
+        "Header actions",
         "Sectioned form cards",
         "Bottom action row"
       ]
@@ -7040,7 +7092,9 @@ var uiScreenBlueprint = {
       label: "Detail page",
       frame: [
         "Sidebar shell",
-        "Breadcrumb",
+        "Workspace topbar",
+        "Page intro card with Breadcrumb and PageTitle",
+        "Optional segmented tabs",
         "PageTitle with status/actions",
         "Summary stats or metadata card",
         "Detail cards and related tables"
@@ -7051,17 +7105,18 @@ var uiScreenBlueprint = {
       label: "Dashboard page",
       frame: [
         "Sidebar shell",
-        "Breadcrumb",
-        "PageTitle with actions",
+        "Workspace topbar",
+        "Page intro card with Breadcrumb and PageTitle",
+        "Optional segmented tabs",
+        "Toolbar card with actions",
         "Stat cards row",
-        "Filters",
         "Main insight cards and tables"
       ]
     }
   ],
   workflow: [
-    "Collect the screen brief before coding. Do not invent sidebar items, route urls, filters, fields, or table columns if the brief is missing.",
-    "Use Sidebar plus Breadcrumb and PageTitle to lock the shell before building the page body.",
+    "Collect the shell + screen brief before coding. Do not invent layout presets, workspace labels, sidebar items, route urls, tabs, filters, fields, or table columns if the brief is missing.",
+    "Use Sidebar plus the workspace topbar and intro card to lock the shell before building the page body.",
     "Choose only canonical root exports from @lucasvu/scope-ui.",
     "Use Card and ui-grid utilities to create the frame first, then place controls and data components inside.",
     "Keep all palette, radius, surface, and shadow decisions in the shared ui-theme.css preset file.",
@@ -7436,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;
@@ -7482,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;
@@ -7497,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;