@almadar/ui 2.0.4 → 2.1.0

package/dist/ThemeContext-D9xUORq5.d.ts

@@ -0,0 +1,105 @@
+import React__default from 'react';
+
+/**
+ * Unified ThemeContext - Single provider for theme and color mode
+ *
+ * Combines design theme selection (ocean, wireframe, etc.) with
+ * color mode (light/dark) into a single, simple system.
+ *
+ * Uses a single data attribute: data-theme="ocean-light" or data-theme="ocean-dark"
+ *
+ * @packageDocumentation
+ */
+
+/** Color mode preference */
+type ColorMode = "light" | "dark" | "system";
+/** Resolved color mode (what's actually applied) */
+type ResolvedMode = "light" | "dark";
+/** Theme definition */
+interface ThemeDefinition {
+    /** Theme identifier (e.g., "ocean", "wireframe") */
+    name: string;
+    /** Display name for UI (e.g., "Ocean Blue") */
+    displayName?: string;
+    /** Whether this theme has light mode styles */
+    hasLightMode?: boolean;
+    /** Whether this theme has dark mode styles */
+    hasDarkMode?: boolean;
+}
+/** Built-in themes available in the design system */
+declare const BUILT_IN_THEMES: ThemeDefinition[];
+/** Theme context value */
+interface ThemeContextValue {
+    /** Current theme name */
+    theme: string;
+    /** Current color mode setting (may be 'system') */
+    mode: ColorMode;
+    /** Resolved color mode (always 'light' or 'dark') */
+    resolvedMode: ResolvedMode;
+    /** Set the theme */
+    setTheme: (theme: string) => void;
+    /** Set the color mode */
+    setMode: (mode: ColorMode) => void;
+    /** Toggle between light and dark modes */
+    toggleMode: () => void;
+    /** Available themes */
+    availableThemes: ThemeDefinition[];
+    /** The full theme string applied to data-theme (e.g., "ocean-light") */
+    appliedTheme: string;
+}
+declare const ThemeContext: React__default.Context<ThemeContextValue | undefined>;
+interface ThemeProviderProps {
+    children: React__default.ReactNode;
+    /** Available themes (will be merged with built-in themes) */
+    themes?: readonly ThemeDefinition[] | ThemeDefinition[];
+    /** Default theme name */
+    defaultTheme?: string;
+    /** Default color mode */
+    defaultMode?: ColorMode;
+    /** Optional target element ref — when provided, theme attributes are applied to this element instead of document.documentElement */
+    targetRef?: React__default.RefObject<HTMLElement>;
+}
+/**
+ * Unified ThemeProvider component
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with built-in themes
+ * <ThemeProvider defaultTheme="wireframe" defaultMode="light">
+ *   <App />
+ * </ThemeProvider>
+ *
+ * // With custom themes from orbital schema
+ * import { THEMES } from './generated/theme-manifest';
+ * <ThemeProvider themes={THEMES} defaultTheme="ocean" defaultMode="system">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+/**
+ * Hook for accessing theme context
+ *
+ * @returns Theme context value
+ *
+ * @example
+ * ```tsx
+ * const { theme, resolvedMode, toggleMode, setTheme } = useTheme();
+ *
+ * // Toggle dark mode
+ * <button onClick={toggleMode}>
+ *   {resolvedMode === 'dark' ? 'Light' : 'Dark'}
+ * </button>
+ *
+ * // Change theme
+ * <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+ *   {availableThemes.map(t => (
+ *     <option key={t.name} value={t.name}>{t.displayName || t.name}</option>
+ *   ))}
+ * </select>
+ * ```
+ */
+declare function useTheme(): ThemeContextValue;
+type DesignTheme = ThemeDefinition;
+
+export { BUILT_IN_THEMES as B, type ColorMode as C, type DesignTheme as D, type ResolvedMode as R, type ThemeProviderProps as T, ThemeContext as a, type ThemeDefinition as b, ThemeProvider as c, useTheme as u };

package/dist/{chunk-QU4JHKVC.js → chunk-BTXQJGFB.js}

@@ -1,30 +1,7 @@
 import { useUISlotManager } from './chunk-7NEWMNNU.js';
-import { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
+import { createContext, useMemo, useState, useEffect, useCallback, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var UISlotContext = createContext(null);
-function UISlotProvider({ children }) {
-  const slotManager = useUISlotManager();
-  const contextValue = useMemo(() => slotManager, [slotManager]);
-  return /* @__PURE__ */ jsx(UISlotContext.Provider, { value: contextValue, children });
-}
-function useUISlots() {
-  const context = useContext(UISlotContext);
-  if (!context) {
-    throw new Error(
-      "useUISlots must be used within a UISlotProvider. Make sure your component tree is wrapped with <UISlotProvider>."
-    );
-  }
-  return context;
-}
-function useSlotContent(slot) {
-  const { getContent } = useUISlots();
-  return getContent(slot);
-}
-function useSlotHasContent(slot) {
-  const { hasContent } = useUISlots();
-  return hasContent(slot);
-}
 var BUILT_IN_THEMES = [
   {
     name: "wireframe",
@@ -275,5 +252,28 @@ function useTheme() {
   return context;
 }
 var ThemeContext_default = ThemeContext;
+var UISlotContext = createContext(null);
+function UISlotProvider({ children }) {
+  const slotManager = useUISlotManager();
+  const contextValue = useMemo(() => slotManager, [slotManager]);
+  return /* @__PURE__ */ jsx(UISlotContext.Provider, { value: contextValue, children });
+}
+function useUISlots() {
+  const context = useContext(UISlotContext);
+  if (!context) {
+    throw new Error(
+      "useUISlots must be used within a UISlotProvider. Make sure your component tree is wrapped with <UISlotProvider>."
+    );
+  }
+  return context;
+}
+function useSlotContent(slot) {
+  const { getContent } = useUISlots();
+  return getContent(slot);
+}
+function useSlotHasContent(slot) {
+  const { hasContent } = useUISlots();
+  return hasContent(slot);
+}
 
 export { BUILT_IN_THEMES, ThemeContext_default, ThemeProvider, UISlotContext, UISlotProvider, useSlotContent, useSlotHasContent, useTheme, useUISlots };

package/dist/{chunk-JZ55M7DV.js → chunk-FZJ73RDM.js}

@@ -1,7 +1,7 @@
-import { useTheme, useUISlots } from './chunk-QU4JHKVC.js';
-import { cn, debugGroup, debug, debugGroupEnd, getNestedValue, isDebugEnabled } from './chunk-KKCVDUK7.js';
+import { useTheme, useUISlots } from './chunk-BTXQJGFB.js';
 import { useTranslate, useQuerySingleton, useEntityList } from './chunk-PE2H3NAW.js';
 import { useEventBus } from './chunk-YXZM3WCF.js';
+import { cn, debugGroup, debug, debugGroupEnd, getNestedValue, isDebugEnabled } from './chunk-KKCVDUK7.js';
 import { __publicField } from './chunk-PKBMQBKP.js';
 import * as React41 from 'react';
 import React41__default, { useCallback, useRef, useState, useLayoutEffect, useEffect, createContext, useMemo, useContext, Suspense } from 'react';

package/dist/cn-BoBXsxuX.d.ts

@@ -0,0 +1,194 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Orbital State Machine Visualizer
+ *
+ * Renders SVG diagrams from Orbital schemas and Trait definitions.
+ * Can be used in documentation, IDE previews, and other tools.
+ */
+interface VisualizerConfig {
+    nodeRadius: number;
+    nodeSpacing: number;
+    initialIndicatorOffset: number;
+    arrowSize: number;
+    colors: {
+        background: string;
+        node: string;
+        nodeBorder: string;
+        nodeText: string;
+        initialNode: string;
+        finalNode: string;
+        arrow: string;
+        arrowText: string;
+        effectText: string;
+        guardText: string;
+        initial: string;
+    };
+    fonts: {
+        node: string;
+        event: string;
+        effect: string;
+    };
+}
+interface StateDefinition {
+    name: string;
+    isInitial?: boolean;
+    isFinal?: boolean;
+    description?: string;
+}
+interface TransitionDefinition {
+    from: string;
+    to: string;
+    event: string;
+    guard?: unknown;
+    effects?: unknown[];
+}
+interface StateMachineDefinition {
+    states: StateDefinition[];
+    transitions: TransitionDefinition[];
+}
+interface EntityDefinition {
+    name: string;
+    fields?: (string | {
+        name: string;
+    })[];
+}
+interface RenderOptions {
+    title?: string;
+    entity?: EntityDefinition;
+}
+/** Position data for a state node in DOM layout */
+interface DomStateNode {
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    radius: number;
+    isInitial: boolean;
+    isFinal: boolean;
+    description?: string;
+}
+/** Position data for a transition arrow */
+interface DomTransitionPath {
+    id: string;
+    from: string;
+    to: string;
+    /** SVG path data for the curved arrow */
+    pathData: string;
+    /** Midpoint for label positioning */
+    labelX: number;
+    labelY: number;
+}
+/** Position data for a transition label with guard/effect details */
+interface DomTransitionLabel {
+    id: string;
+    from: string;
+    to: string;
+    event: string;
+    x: number;
+    y: number;
+    /** Human-readable guard text (e.g., "if amount > 100") */
+    guardText?: string;
+    /** Human-readable effect texts */
+    effectTexts: string[];
+    /** Whether this transition has details to show in tooltip */
+    hasDetails: boolean;
+}
+/** Entity input box data */
+interface DomEntityBox {
+    name: string;
+    fields: string[];
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Output effects box data */
+interface DomOutputsBox {
+    outputs: string[];
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Complete DOM layout data for rendering */
+interface DomLayoutData {
+    width: number;
+    height: number;
+    title?: string;
+    states: DomStateNode[];
+    paths: DomTransitionPath[];
+    labels: DomTransitionLabel[];
+    entity?: DomEntityBox;
+    outputs?: DomOutputsBox;
+    config: VisualizerConfig;
+}
+declare const DEFAULT_CONFIG: VisualizerConfig;
+declare function formatGuard(guard: unknown): string;
+declare function getEffectSummary(effects: unknown[]): string;
+declare function extractOutputsFromTransitions(transitions: TransitionDefinition[]): string[];
+/**
+ * Render a state machine to an SVG string.
+ * Works in both browser and Node.js environments.
+ */
+declare function renderStateMachineToSvg(stateMachine: StateMachineDefinition, options?: RenderOptions, config?: VisualizerConfig): string;
+/**
+ * Extract state machine from various data formats (Trait, Orbital, or raw)
+ */
+declare function extractStateMachine(data: unknown): StateMachineDefinition | null;
+/**
+ * Render a state machine to DOM layout data.
+ * This is used by the DOM-based visualizer component for hybrid SVG/DOM rendering.
+ * Unlike renderStateMachineToSvg, this returns structured data instead of an SVG string.
+ */
+declare function renderStateMachineToDomData(stateMachine: StateMachineDefinition, options?: RenderOptions, config?: VisualizerConfig): DomLayoutData;
+
+/**
+ * Content Segment Parsing Utilities
+ *
+ * Parses rich content with code blocks and quiz tags into structured
+ * segments for rendering. Detects orbital schemas in JSON code blocks
+ * and marks them for JazariStateMachine rendering.
+ */
+/** Segment types for content rendering */
+type ContentSegment = {
+    type: 'markdown';
+    content: string;
+} | {
+    type: 'code';
+    language: string;
+    content: string;
+} | {
+    type: 'orbital';
+    language: string;
+    content: string;
+    schema: unknown;
+} | {
+    type: 'quiz';
+    question: string;
+    answer: string;
+};
+/**
+ * Parse markdown content to extract code blocks.
+ *
+ * Splits markdown into segments of plain markdown and fenced code blocks.
+ * JSON/orb code blocks containing orbital schemas are tagged as 'orbital'.
+ */
+declare function parseMarkdownWithCodeBlocks(content: string | undefined | null): ContentSegment[];
+/**
+ * Parse content to extract all segments including quiz tags and code blocks.
+ *
+ * Supported tags:
+ * - <question>q</question><answer>a</answer> — Quiz Q&A
+ *
+ * Also handles fenced code blocks (```language...```) with orbital detection.
+ */
+declare function parseContentSegments(content: string | undefined | null): ContentSegment[];
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx for conditional classes with tailwind-merge to handle conflicts
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { type ContentSegment as C, DEFAULT_CONFIG as D, type EntityDefinition as E, type RenderOptions as R, type StateDefinition as S, type TransitionDefinition as T, type VisualizerConfig as V, type DomEntityBox as a, type DomLayoutData as b, type DomOutputsBox as c, type DomStateNode as d, type DomTransitionLabel as e, type DomTransitionPath as f, type StateMachineDefinition as g, cn as h, extractOutputsFromTransitions as i, extractStateMachine as j, formatGuard as k, getEffectSummary as l, parseMarkdownWithCodeBlocks as m, renderStateMachineToSvg as n, parseContentSegments as p, renderStateMachineToDomData as r };