@miozu/jera 0.3.0 → 0.4.2

package/src/components/primitives/StatusBadge.svelte

@@ -63,60 +63,60 @@
 
   /* Default */
   .status-badge-default {
-    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
-    color: var(--color-text-muted);
-    border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base04) 10%, transparent);
+    color: var(--color-base04);
+    border-color: color-mix(in srgb, var(--color-base04) 30%, transparent);
   }
 
   /* Status variants */
   .status-badge-pending {
-    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
-    color: var(--color-warning);
-    border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base0A) 10%, transparent);
+    color: var(--color-base0A);
+    border-color: color-mix(in srgb, var(--color-base0A) 30%, transparent);
   }
 
   .status-badge-approved,
   .status-badge-success,
   .status-badge-connected {
-    background: color-mix(in srgb, var(--color-success) 10%, transparent);
-    color: var(--color-success);
-    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base0B) 10%, transparent);
+    color: var(--color-base0B);
+    border-color: color-mix(in srgb, var(--color-base0B) 30%, transparent);
   }
 
   .status-badge-rejected,
   .status-badge-error,
   .status-badge-disconnected {
-    background: color-mix(in srgb, var(--color-error) 10%, transparent);
-    color: var(--color-error);
-    border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base08) 10%, transparent);
+    color: var(--color-base08);
+    border-color: color-mix(in srgb, var(--color-base08) 30%, transparent);
   }
 
   /* Role variants */
   .status-badge-owner,
   .status-badge-primary,
   .status-badge-public {
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    color: var(--color-base0D);
+    border-color: color-mix(in srgb, var(--color-base0D) 30%, transparent);
   }
 
   .status-badge-admin {
-    background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
-    color: var(--color-secondary);
-    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base0C) 10%, transparent);
+    color: var(--color-base0C);
+    border-color: color-mix(in srgb, var(--color-base0C) 30%, transparent);
   }
 
   .status-badge-member,
   .status-badge-private {
-    background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
-    color: var(--color-text-muted);
-    border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base04) 10%, transparent);
+    color: var(--color-base04);
+    border-color: color-mix(in srgb, var(--color-base04) 30%, transparent);
   }
 
   /* Info variant */
   .status-badge-info {
-    background: color-mix(in srgb, var(--color-info) 10%, transparent);
-    color: var(--color-info);
-    border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    color: var(--color-base0D);
+    border-color: color-mix(in srgb, var(--color-base0D) 30%, transparent);
   }
 </style>

package/src/index.js

@@ -25,12 +25,13 @@
 // COMPONENTS - Primitives
 // ============================================
 
-export { default as Button, buttonStyles } from './components/primitives/Button.svelte';
-export { default as Badge, badgeStyles } from './components/primitives/Badge.svelte';
+export { default as Button } from './components/primitives/Button.svelte';
+export { default as Badge } from './components/primitives/Badge.svelte';
 export { default as StatusBadge } from './components/primitives/StatusBadge.svelte';
 export { default as Divider } from './components/primitives/Divider.svelte';
 export { default as Avatar } from './components/primitives/Avatar.svelte';
 export { default as Card } from './components/primitives/Card.svelte';
+export { default as Stat } from './components/primitives/Stat.svelte';
 export { default as Link } from './components/primitives/Link.svelte';
 export { default as LazyImage } from './components/primitives/LazyImage.svelte';
 
@@ -61,15 +62,14 @@ export {
   default as Toast,
   ToastController,
   createToastContext,
-  getToastContext,
-  toastStyles,
-  positionStyles
+  getToastContext
 } from './components/feedback/Toast.svelte';
 
 export { default as Skeleton } from './components/feedback/Skeleton.svelte';
 export { default as ProgressBar } from './components/feedback/ProgressBar.svelte';
 export { default as Spinner } from './components/feedback/Spinner.svelte';
 export { default as EmptyState } from './components/feedback/EmptyState.svelte';
+export { default as Alert } from './components/feedback/Alert.svelte';
 
 // ============================================
 // COMPONENTS - Overlays
@@ -90,6 +90,41 @@ export { default as Tabs } from './components/navigation/Tabs.svelte';
 export { default as Accordion } from './components/navigation/Accordion.svelte';
 export { default as AccordionItem } from './components/navigation/AccordionItem.svelte';
 
+// Sidebar Components (Legacy - Enhanced)
+export { default as Sidebar } from './components/navigation/Sidebar.svelte';
+export { default as SidebarSection } from './components/navigation/SidebarSection.svelte';
+export { default as SidebarItem } from './components/navigation/SidebarItem.svelte';
+export { default as SidebarGroup } from './components/navigation/SidebarGroup.svelte';
+export { default as SidebarPopover } from './components/navigation/SidebarPopover.svelte';
+export { default as SidebarAccountItem } from './components/navigation/SidebarAccountItem.svelte';
+export { default as SidebarToggle } from './components/navigation/SidebarToggle.svelte';
+export { default as SidebarSearch } from './components/navigation/SidebarSearch.svelte';
+export { default as SidebarGroupSwitcher } from './components/navigation/SidebarGroupSwitcher.svelte';
+export { default as SidebarAccountGroup } from './components/navigation/SidebarAccountGroup.svelte';
+
+// Enterprise Navigation System
+export { default as NavigationContainer } from './components/navigation/NavigationContainer.svelte';
+export { default as SidebarNavigationItem } from './components/navigation/SidebarNavigationItem.svelte';
+
+// Navigation Blocks
+export { default as NavigationSearch } from './components/navigation/blocks/NavigationSearch.svelte';
+export { default as NavigationSection } from './components/navigation/blocks/NavigationSection.svelte';
+export { default as NavigationAccountGroup } from './components/navigation/blocks/NavigationAccountGroup.svelte';
+export { default as NavigationGroupSwitcher } from './components/navigation/blocks/NavigationGroupSwitcher.svelte';
+export { default as NavigationCustomBlock } from './components/navigation/blocks/NavigationCustomBlock.svelte';
+
+// Enterprise Components
+export { default as WorkspaceMenu } from './components/navigation/WorkspaceMenu.svelte';
+
+// ============================================
+// COMPONENTS - Documentation
+// ============================================
+
+export { default as CodeBlock } from './components/docs/CodeBlock.svelte';
+export { default as PropsTable } from './components/docs/PropsTable.svelte';
+export { default as SplitPane } from './components/docs/SplitPane.svelte';
+export { default as DocSection } from './components/docs/DocSection.svelte';
+
 // ============================================
 // UTILITIES - Class Composition
 // ============================================
@@ -104,13 +139,33 @@ export {
   createReactive,
   createDerived,
   ThemeState,
-  createThemeContext,
-  getThemeContext,
+  getTheme,
+  resetTheme,
   createComponentState,
   createIdGenerator,
   generateId
 } from './utils/reactive.svelte.js';
 
+// Sidebar State Management
+export {
+  createSidebarState,
+  SIDEBAR_CONTEXT_KEY
+} from './utils/sidebar.svelte.js';
+
+// Enterprise Navigation State Management
+export {
+  NavigationState,
+  createNavigationState,
+  NAVIGATION_CONTEXT_KEY
+} from './utils/navigation.svelte.js';
+
+// Code Highlighting
+export {
+  getHighlighter,
+  highlightCode,
+  DEFAULT_LANGUAGES
+} from './utils/highlighter.js';
+
 // ============================================
 // ACTIONS
 // ============================================

package/src/tokens/colors.css

@@ -17,107 +17,61 @@
 
 :root {
   /* ========================================
-   * BASE COLORS (Grayscale Spectrum)
-   * From darkest (base0) to lightest (base7)
+   * BASE16 COLORS
+   * Proper Base16 hex naming: base00-base0F
    * ======================================== */
 
-  --base0: #232733;  /* Darkest background */
-  --base1: #2C3040;  /* Default dark background */
-  --base2: #3E4359;  /* Selection, highlights */
-  --base3: #565E78;  /* Comments, subtle text */
-  --base4: #737E99;  /* Muted foreground */
-  --base5: #D0D2DB;  /* Default foreground */
-  --base6: #F3F4F7;  /* Light foreground */
-  --base7: #FAFBFD;  /* Lightest/white */
+  /* Grayscale (base00-base07) */
+  --base00: #232733;  /* Darkest background */
+  --base01: #2C3040;  /* Default dark background */
+  --base02: #3E4359;  /* Selection, highlights */
+  --base03: #565E78;  /* Comments, subtle text */
+  --base04: #737E99;  /* Muted foreground */
+  --base05: #D0D2DB;  /* Default foreground */
+  --base06: #F3F4F7;  /* Light foreground */
+  --base07: #FAFBFD;  /* Lightest/white */
+
+  /* Accents (base08-base0F) */
+  --base08: #EB3137;  /* Red - errors, destructive */
+  --base09: #FF9837;  /* Orange - numbers, attention */
+  --base0A: #E8D176;  /* Yellow - warnings, highlights */
+  --base0B: #6DD672;  /* Green - success, positive */
+  --base0C: #40FFE2;  /* Cyan - methods, cool accent */
+  --base0D: #83D2FC;  /* Blue - info, links */
+  --base0E: #C974E6;  /* Magenta - primary brand */
+  --base0F: #FF9982;  /* Peach - keywords, warm accent */
 
   /* ========================================
-   * ACCENT COLORS (Base16 Extended Palette)
-   * Official miozu palette from @miozu/js-theme
+   * COLOR ALIASES
+   * Prefixed version for CSS custom property usage
    * ======================================== */
 
-  --base8:  #EB3137;  /* Red - errors, destructive */
-  --base9:  #FF9837;  /* Orange - numbers, attention */
-  --base10: #6DD672;  /* Green - success, positive */
-  --base11: #E8D176;  /* Yellow - warnings, highlights */
-  --base12: #83D2FC;  /* Blue - info, links */
-  --base13: #C974E6;  /* Magenta - primary brand, functions */
-  --base14: #FF9982;  /* Peach - keywords, warm accent */
-  --base15: #40FFE2;  /* Cyan - methods, cool accent */
-
-  /* Named color aliases */
-  --red:     var(--base8);
-  --orange:  var(--base9);
-  --green:   var(--base10);
-  --yellow:  var(--base11);
-  --blue:    var(--base12);
-  --magenta: var(--base13);
-  --peach:   var(--base14);
-  --cyan:    var(--base15);
-
-  /* ========================================
-   * SEMANTIC MAPPINGS (Dark Theme Default)
-   * Use these in components for consistency
-   * ======================================== */
-
-  /* Backgrounds */
-  --color-bg: var(--base0);
-  --color-surface: var(--base1);
-  --color-surface-alt: var(--base2);
-  --color-hover: var(--base2);
-  --color-surface-hover: var(--base2);
-
-  /* Foregrounds */
-  --color-text: var(--base5);
-  --color-text-strong: var(--base7);
-  --color-text-muted: var(--base4);
-  --color-text-subtle: var(--base3);
-
-  /* Borders */
-  --color-border: var(--base3);
-  --color-border-muted: var(--base2);
-
-  /* Brand */
-  --color-primary: var(--magenta);    /* base13 - #C974E6 */
-  --color-secondary: var(--blue);     /* base12 - #83D2FC */
-  --color-accent: var(--cyan);        /* base15 - #40FFE2 */
-
-  /* States */
-  --color-success: var(--green);      /* base10 - #6DD672 */
-  --color-warning: var(--yellow);     /* base11 - #E8D176 */
-  --color-error: var(--red);          /* base8  - #EB3137 */
-  --color-info: var(--blue);          /* base12 - #83D2FC */
-
-  /* ========================================
-   * BASE COLOR ALIASES
-   * For direct base color access in components
-   * ======================================== */
-
-  /* Grayscale (base0-7) */
-  --color-base0: var(--base0);
-  --color-base1: var(--base1);
-  --color-base2: var(--base2);
-  --color-base3: var(--base3);
-  --color-base4: var(--base4);
-  --color-base5: var(--base5);
-  --color-base6: var(--base6);
-  --color-base7: var(--base7);
-
-  /* Accents (base8-15) */
-  --color-base8: var(--base8);
-  --color-base9: var(--base9);
-  --color-base10: var(--base10);
-  --color-base11: var(--base11);
-  --color-base12: var(--base12);
-  --color-base13: var(--base13);
-  --color-base14: var(--base14);
-  --color-base15: var(--base15);
+  --color-base00: var(--base00);
+  --color-base01: var(--base01);
+  --color-base02: var(--base02);
+  --color-base03: var(--base03);
+  --color-base04: var(--base04);
+  --color-base05: var(--base05);
+  --color-base06: var(--base06);
+  --color-base07: var(--base07);
+  --color-base08: var(--base08);
+  --color-base09: var(--base09);
+  --color-base0A: var(--base0A);
+  --color-base0B: var(--base0B);
+  --color-base0C: var(--base0C);
+  --color-base0D: var(--base0D);
+  --color-base0E: var(--base0E);
+  --color-base0F: var(--base0F);
+
+  /* Border utility */
+  --color-border: var(--base03);
 }
 
 /* ========================================
  * LIGHT THEME
- * Inverted grayscale, same accents
+ * Inverted grayscale for light backgrounds
  *
- * Supports multiple selectors for flexibility:
+ * Supports multiple selectors:
  * - data-theme="light" (generic)
  * - data-theme="miozu-light" (Selify/Miozu apps)
  * - .light (class-based)
@@ -126,27 +80,32 @@
 [data-theme="light"],
 [data-theme="miozu-light"],
 .light {
-  /* Inverted base colors */
-  --color-bg: var(--base7);
-  --color-surface: var(--base6);
-  --color-surface-alt: var(--base5);
-  --color-hover: var(--base5);
-  --color-surface-hover: var(--base5);
-
-  /* Inverted foregrounds */
-  --color-text: var(--base2);
-  --color-text-strong: var(--base0);
-  --color-text-muted: var(--base3);
-  --color-text-subtle: var(--base4);
-
-  /* Inverted borders */
-  --color-border: var(--base4);
-  --color-border-muted: var(--base5);
+  /* Inverted grayscale */
+  --base00: #FAFBFD;
+  --base01: #F3F4F7;
+  --base02: #D0D2DB;
+  --base03: #737E99;
+  --base04: #565E78;
+  --base05: #3E4359;
+  --base06: #2C3040;
+  --base07: #232733;
+
+  /* Update aliases */
+  --color-base00: var(--base00);
+  --color-base01: var(--base01);
+  --color-base02: var(--base02);
+  --color-base03: var(--base03);
+  --color-base04: var(--base04);
+  --color-base05: var(--base05);
+  --color-base06: var(--base06);
+  --color-base07: var(--base07);
+
+  --color-border: var(--base03);
 }
 
 /* ========================================
  * DARK THEME (Explicit)
- * Same as :root default, for explicit dark mode
+ * Same as :root default
  *
  * Supports multiple selectors:
  * - data-theme="dark" (generic)
@@ -157,19 +116,25 @@
 [data-theme="dark"],
 [data-theme="miozu-dark"],
 .dark {
-  --color-bg: var(--base0);
-  --color-surface: var(--base1);
-  --color-surface-alt: var(--base2);
-  --color-hover: var(--base2);
-  --color-surface-hover: var(--base2);
-
-  --color-text: var(--base5);
-  --color-text-strong: var(--base7);
-  --color-text-muted: var(--base4);
-  --color-text-subtle: var(--base3);
-
-  --color-border: var(--base3);
-  --color-border-muted: var(--base2);
+  --base00: #232733;
+  --base01: #2C3040;
+  --base02: #3E4359;
+  --base03: #565E78;
+  --base04: #737E99;
+  --base05: #D0D2DB;
+  --base06: #F3F4F7;
+  --base07: #FAFBFD;
+
+  --color-base00: var(--base00);
+  --color-base01: var(--base01);
+  --color-base02: var(--base02);
+  --color-base03: var(--base03);
+  --color-base04: var(--base04);
+  --color-base05: var(--base05);
+  --color-base06: var(--base06);
+  --color-base07: var(--base07);
+
+  --color-border: var(--base03);
 }
 
 /* ========================================
@@ -178,12 +143,15 @@
  * ======================================== */
 
 [data-theme="high-contrast"] {
-  --color-bg: #000000;
-  --color-surface: #0a0a0a;
-  --color-surface-alt: #1a1a1a;
-  --color-text: var(--base7);
-  --color-text-strong: #FFFFFF;
-  --color-text-muted: var(--base5);
-  --color-border: var(--base5);
-  --color-border-muted: var(--base4);
+  --base00: #000000;
+  --base01: #0a0a0a;
+  --base02: #1a1a1a;
+  --base07: #FFFFFF;
+
+  --color-base00: var(--base00);
+  --color-base01: var(--base01);
+  --color-base02: var(--base02);
+  --color-base07: var(--base07);
+
+  --color-border: var(--base05);
 }

package/src/utils/highlighter.js

@@ -0,0 +1,124 @@
+/**
+ * Syntax highlighting utility using Shiki v3 with CSS variables theme.
+ * Provides cached highlighter instance for performance.
+ * Handles the case when shiki is not installed as an optional dependency.
+ *
+ * @module @miozu/jera/utils/highlighter
+ */
+
+// Cache the highlighter to avoid recreating it for each request
+let highlighterPromise = null;
+let shikiAvailable = null;
+
+/**
+ * Default languages supported by the highlighter
+ */
+export const DEFAULT_LANGUAGES = [
+  'javascript',
+  'typescript',
+  'svelte',
+  'jsx',
+  'tsx',
+  'html',
+  'css',
+  'json',
+  'bash',
+  'shell',
+  'markdown',
+  'python',
+  'sql',
+  'yaml',
+  'toml'
+];
+
+/**
+ * Check if shiki is available
+ * @returns {Promise<boolean>}
+ */
+async function isShikiAvailable() {
+  if (shikiAvailable !== null) return shikiAvailable;
+
+  try {
+    await import('shiki');
+    shikiAvailable = true;
+  } catch {
+    shikiAvailable = false;
+  }
+  return shikiAvailable;
+}
+
+/**
+ * Get or create the Shiki highlighter with CSS variables theme.
+ * The highlighter is cached and reused for performance.
+ *
+ * @returns {Promise<import('shiki').Highlighter|null>}
+ */
+export async function getHighlighter() {
+  if (!await isShikiAvailable()) {
+    return null;
+  }
+
+  if (!highlighterPromise) {
+    highlighterPromise = (async () => {
+      const shiki = await import('shiki');
+
+      // Create a CSS variables theme that uses CSS custom properties
+      const cssVarsTheme = shiki.createCssVariablesTheme({
+        name: 'css-variables',
+        variablePrefix: '--shiki-',
+        variableDefaults: {},
+        fontStyle: true
+      });
+
+      return shiki.createHighlighter({
+        themes: [cssVarsTheme],
+        langs: DEFAULT_LANGUAGES
+      });
+    })();
+  }
+
+  return highlighterPromise;
+}
+
+/**
+ * Highlight code using Shiki with CSS variables theme.
+ *
+ * @param {string} code - The code to highlight
+ * @param {string} [lang='text'] - The language for syntax highlighting
+ * @returns {Promise<string>} HTML string with highlighted code
+ */
+export async function highlightCode(code, lang = 'text') {
+  try {
+    const highlighter = await getHighlighter();
+
+    if (!highlighter) {
+      // Shiki not available, return basic escaped code
+      return `<pre class="shiki"><code>${escapeHtml(code)}</code></pre>`;
+    }
+
+    const html = highlighter.codeToHtml(code.trim(), {
+      lang: lang || 'text',
+      theme: 'css-variables'
+    });
+
+    return html;
+  } catch (err) {
+    console.error('Highlighting error:', err);
+    // Fallback to basic escaping
+    return `<pre class="shiki"><code>${escapeHtml(code)}</code></pre>`;
+  }
+}
+
+/**
+ * Escape HTML special characters
+ * @param {string} str
+ * @returns {string}
+ */
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}

package/src/utils/index.js

@@ -9,9 +9,14 @@ export {
   createReactive,
   createDerived,
   ThemeState,
-  createThemeContext,
-  getThemeContext,
+  getTheme,
+  resetTheme,
   createComponentState,
   createIdGenerator,
   generateId
 } from './reactive.svelte.js';
+
+export {
+  createSidebarState,
+  SIDEBAR_CONTEXT_KEY
+} from './sidebar.svelte.js';