@shellui/core 0.0.4

package/src/index.css

@@ -0,0 +1,412 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+/* 
+ * CSS variables defined outside @layer base so they can be overridden
+ * by JavaScript setProperty() calls (Tailwind v4 limitation)
+ * These are fallback defaults - theme system will override them dynamically
+ * 
+ * IMPORTANT: In Tailwind v4, CSS variables must be defined on :root (not in @layer)
+ * for JavaScript overrides to work properly
+ */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 142 71% 45%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 142 71% 55%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+  --sidebar-background: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 94.9%;
+  --sidebar-primary-foreground: 240 5.9% 10%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(
+      --body-font-family,
+      var(
+        --font-family,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        'Helvetica Neue',
+        Arial,
+        sans-serif
+      )
+    );
+    letter-spacing: var(--letter-spacing, normal);
+    text-shadow: var(--text-shadow, none);
+    line-height: var(--line-height, 1.5);
+  }
+
+  /* Apply heading font family if specified, otherwise use body font */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(
+      --heading-font-family,
+      var(
+        --body-font-family,
+        var(
+          --font-family,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI',
+          Roboto,
+          'Helvetica Neue',
+          Arial,
+          sans-serif
+        )
+      )
+    );
+    letter-spacing: var(--letter-spacing, normal);
+    text-shadow: var(--text-shadow, none);
+  }
+
+  /* Add playful styling to buttons for Comic Sans theme */
+  button,
+  [role='button'] {
+    letter-spacing: var(--letter-spacing, normal);
+  }
+
+  button:hover,
+  [role='button']:hover {
+    filter: brightness(0.95);
+  }
+
+  /* Playful input styling */
+  input,
+  textarea,
+  select {
+    letter-spacing: var(--letter-spacing, normal);
+  }
+
+  /* Select field - custom caret with proper spacing */
+  select.select-field {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 1rem 1rem;
+    padding-right: 2.5rem;
+  }
+
+  /* Dark mode caret color */
+  .dark select.select-field {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  }
+}
+:root {
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+  --sidebar: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+/* 
+ * @theme directive for Tailwind v4
+ * This registers CSS variables as theme tokens that Tailwind can use
+ * The tailwind.config.js file handles nested colors (primary.foreground)
+ * but @theme ensures the base CSS variables are available to Tailwind
+ */
+@theme {
+  /* Register CSS variables as theme tokens - these reference the dynamic variables */
+  /* Tailwind v4 will use these to generate utility classes */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-sidebar-background: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  /* Border radius tokens */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+@layer base {
+  * {
+    outline-color: hsl(var(--ring) / 0.5);
+  }
+
+  /* Ensure Sonner toasts use theme variables - override Sonner defaults */
+  [data-sonner-toast] {
+    background-color: hsl(var(--background)) !important;
+    color: hsl(var(--foreground)) !important;
+    border-color: hsl(var(--border)) !important;
+  }
+
+  [data-sonner-toast] [data-description] {
+    color: hsl(var(--muted-foreground)) !important;
+  }
+
+  [data-sonner-toast] [data-button],
+  [data-sonner-toast] button[data-button] {
+    background-color: hsl(var(--primary)) !important;
+    color: hsl(var(--primary-foreground)) !important;
+  }
+
+  [data-sonner-toast] [data-button]:hover,
+  [data-sonner-toast] button[data-button]:hover {
+    background-color: hsl(var(--primary) / 0.9) !important;
+  }
+
+  [data-sonner-toast] [data-cancel],
+  [data-sonner-toast] button[data-cancel] {
+    background-color: hsl(var(--muted)) !important;
+    color: hsl(var(--muted-foreground)) !important;
+  }
+
+  [data-sonner-toast] [data-cancel]:hover,
+  [data-sonner-toast] button[data-cancel]:hover {
+    background-color: hsl(var(--muted) / 0.8) !important;
+  }
+
+  /* Success toast icon uses text color (no separate icon color) */
+  [data-sonner-toast][data-type='success'] [data-icon],
+  [data-sonner-toast][data-type='success'] [data-icon] svg {
+    color: hsl(var(--foreground)) !important;
+  }
+
+  /* Color error toast icon */
+  [data-sonner-toast][data-type='error'] [data-icon],
+  [data-sonner-toast][data-type='error'] svg {
+    color: hsl(var(--destructive)) !important;
+  }
+
+  /* Invert sidebar icons in dark mode - target all icons in sidebar context */
+  /* Exclude app icon and logo which have their own rules */
+  .dark [data-sidebar='sidebar'] img[src*='/icons/']:not(.sidebar-app-icon):not(.sidebar-logo),
+  .dark [data-sidebar='sidebar'] img[src*='icons/']:not(.sidebar-app-icon):not(.sidebar-logo),
+  .dark [data-sidebar='sidebar'] img[src$='.svg']:not(.sidebar-app-icon):not(.sidebar-logo) {
+    filter: invert(1) brightness(1.2);
+  }
+
+  /* Sidebar trigger button icon should adapt to theme */
+  .dark button[aria-label*='sidebar'] img {
+    filter: invert(1);
+  }
+
+  /* Sidebar app icon - match text color for visibility */
+  /* In light mode: make icon dark to match dark text */
+  [data-sidebar='sidebar'] img.sidebar-app-icon {
+    filter: brightness(0) saturate(100%);
+    opacity: 0.9;
+  }
+
+  /* In dark mode: invert to make icon light to match light text */
+  .dark [data-sidebar='sidebar'] img.sidebar-app-icon {
+    filter: brightness(0) invert(1) saturate(100%);
+    opacity: 0.9;
+  }
+
+  /* Sidebar logo - dark in light mode, white in dark mode */
+  /* In light mode: make logo dark */
+  [data-sidebar='sidebar'] img.sidebar-logo {
+    filter: brightness(0) saturate(100%);
+    opacity: 0.9;
+  }
+
+  /* In dark mode: invert to make logo white */
+  .dark [data-sidebar='sidebar'] img.sidebar-logo {
+    filter: brightness(0) invert(1) saturate(100%);
+    opacity: 0.9;
+  }
+}
+
+/* Dialog / modal overlay and content animations */
+[data-dialog-content] {
+  left: 50%;
+  top: 50%;
+}
+
+@keyframes dialog-overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dialog-overlay-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes dialog-content-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes dialog-content-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+[data-dialog-overlay][data-state='open'] {
+  animation: dialog-overlay-fade-in 0.1s ease-out;
+}
+[data-dialog-overlay][data-state='closed'] {
+  animation: dialog-overlay-fade-out 0.1s ease-in;
+}
+
+[data-dialog-content][data-state='open'] {
+  animation: dialog-content-in 0.1s ease-out 0.05s both;
+}
+[data-dialog-content][data-state='closed'] {
+  animation: dialog-content-out 0.1s ease-in both;
+}
+
+/* Cookie consent dialog (bottom-left) animations */
+@keyframes cookie-dialog-content-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes cookie-dialog-content-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+[data-cookie-consent][data-state='open'] {
+  animation: cookie-dialog-content-in 0.15s ease-out 0.05s both;
+}
+[data-cookie-consent][data-state='closed'] {
+  animation: cookie-dialog-content-out 0.15s ease-in both;
+}
+
+/* Loading overlay top bar animation – grows from left to right */
+@keyframes loading-bar-slide {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}

package/src/index.html

@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title></title>
+    <link
+      rel="icon"
+      href="/favicon.svg"
+      type="image/svg+xml"
+    />
+    <script>
+      // Initialize theme immediately to prevent FOUC
+      // This sets both the dark class AND CSS variables before React loads
+      (function () {
+        try {
+          const stored = localStorage.getItem('shellui:settings');
+          let theme = 'system';
+          let themeName = 'default';
+          if (stored) {
+            const parsed = JSON.parse(stored);
+            theme = parsed.appearance?.theme || 'system';
+            themeName = parsed.appearance?.themeName || 'default';
+          }
+
+          // Determine if dark mode
+          let isDark = false;
+          if (theme === 'system') {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            isDark = mediaQuery.matches;
+          } else {
+            isDark = theme === 'dark';
+          }
+
+          // Apply dark class
+          if (isDark) {
+            document.documentElement.classList.add('dark');
+          }
+
+          // Set default theme CSS variables immediately
+          // This ensures bg-primary works from the start
+          // These HSL values match the default theme in themes.ts
+          const root = document.documentElement;
+
+          if (isDark) {
+            // Dark mode default theme colors
+            root.style.setProperty('--primary', '142 71% 55%');
+            root.style.setProperty('--primary-foreground', '0 0% 100%');
+            root.style.setProperty('--background', '222.2 84% 4.9%');
+            root.style.setProperty('--foreground', '210 40% 98%');
+          } else {
+            // Light mode default theme colors
+            root.style.setProperty('--primary', '142 71% 45%');
+            root.style.setProperty('--primary-foreground', '0 0% 100%');
+            root.style.setProperty('--background', '0 0% 100%');
+            root.style.setProperty('--foreground', '222.2 84% 4.9%');
+          }
+
+          // Set other essential variables with defaults
+          root.style.setProperty('--card', isDark ? '222.2 84% 4.9%' : '0 0% 100%');
+          root.style.setProperty('--card-foreground', isDark ? '210 40% 98%' : '222.2 84% 4.9%');
+          root.style.setProperty('--secondary', isDark ? '217.2 32.6% 17.5%' : '210 40% 96.1%');
+          root.style.setProperty('--muted', isDark ? '217.2 32.6% 17.5%' : '210 40% 96.1%');
+          root.style.setProperty('--border', isDark ? '217.2 32.6% 17.5%' : '214.3 31.8% 91.4%');
+          root.style.setProperty('--input', isDark ? '217.2 32.6% 17.5%' : '214.3 31.8% 91.4%');
+          root.style.setProperty('--ring', isDark ? '212.7 26.8% 83.9%' : '222.2 84% 4.9%');
+          root.style.setProperty('--radius', '0.5rem');
+        } catch (e) {
+          // Ignore errors
+          console.error('[Theme Init] Error:', e);
+        }
+      })();
+    </script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden;
+      }
+      #root {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      type="module"
+      src="/main.tsx"
+    ></script>
+  </body>
+</html>

package/src/index.ts

@@ -0,0 +1,31 @@
+/**
+ * ShellUI Core - Main entry point
+ * Exports the App component, types, and utilities for use in config files and other packages.
+ *
+ * CSS is imported as a side effect and extracted to dist/style.css during the library build.
+ * Consumers must import '@shellui/core/style.css' (or include it in their build) for styles to apply.
+ */
+import './index.css';
+
+export { default as App } from './app.js';
+export type {
+  ShellUIConfig,
+  NavigationItem,
+  NavigationGroup,
+  LocalizedString,
+  ThemeDefinition,
+  ThemeColors,
+  DrawerPosition,
+  LayoutType,
+  CookieConsentCategory,
+  CookieDefinition,
+  CookieConsentConfig,
+} from './features/config/types.js';
+export { useConfig } from './features/config/useConfig.js';
+export { default as urls } from './constants/urls.js';
+export {
+  getCookieConsentAccepted,
+  getCookieConsentNeedsRenewal,
+  getCookieConsentNewHosts,
+} from './features/cookieConsent/cookieConsent.js';
+export { useCookieConsent } from './features/cookieConsent/useCookieConsent.js';

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/z-index.ts

@@ -0,0 +1,29 @@
+/**
+ * Central z-index scale for overlay layers.
+ * Order (bottom to top): modal/drawer → toast → alert-dialog.
+ * Use these constants everywhere so stacking stays consistent.
+ */
+export const Z_INDEX = {
+  /** Sidebar trigger (above main content, below modals) */
+  SIDEBAR_TRIGGER: 9999,
+  /** Modal overlay and content (settings panel, etc.) */
+  MODAL_OVERLAY: 10000,
+  MODAL_CONTENT: 10001,
+  /** Drawer overlay and content (slide-out panels; same level as modal) */
+  DRAWER_OVERLAY: 10000,
+  DRAWER_CONTENT: 10001,
+  /** Toasts (above modals so they stay clickable when modal is open) */
+  TOAST: 10100,
+  /** Alert dialog overlay and content (confirmations; above toasts) */
+  ALERT_DIALOG_OVERLAY: 10200,
+  ALERT_DIALOG_CONTENT: 10201,
+  /** Cookie consent (above everything to ensure visibility) */
+  COOKIE_CONSENT_OVERLAY: 10300,
+  COOKIE_CONSENT_CONTENT: 10301,
+  /** Windows layout: taskbar (below windows), windows use dynamic z-index above this */
+  WINDOWS_TASKBAR: 9000,
+  /** Base z-index for windows; each window gets base + order */
+  WINDOWS_WINDOW_BASE: 9001,
+} as const;
+
+export type ZIndexLayer = keyof typeof Z_INDEX;

package/src/main.tsx

@@ -0,0 +1,26 @@
+/**
+ * Application entry point - renders the App component to the DOM.
+ * This file is used by the CLI (via index.html) to bootstrap the full application.
+ * It is NOT part of the library build.
+ */
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './app';
+
+// Store root instance to handle HMR properly
+// Use window to persist across HMR reloads
+const container = document.getElementById('root')!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+const windowRecord = window as unknown as Record<string, unknown>;
+const root =
+  (windowRecord.__shellui_root__ as ReturnType<typeof ReactDOM.createRoot>) ||
+  ReactDOM.createRoot(container);
+
+if (!windowRecord.__shellui_root__) {
+  windowRecord.__shellui_root__ = root;
+}
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/router/router.tsx

@@ -0,0 +1,8 @@
+import { createBrowserRouter } from 'react-router';
+import type { ShellUIConfig } from '../features/config/types';
+import { createRoutes } from './routes';
+
+export const createAppRouter = (config: ShellUIConfig) => {
+  const routes = createRoutes(config);
+  return createBrowserRouter(routes);
+};