@almadar/ui 1.0.0

package/dist/useUISlots-mnggE9X9.d.ts

@@ -0,0 +1,105 @@
+/**
+ * useUISlots Hook
+ *
+ * Core hook for managing UI slot rendering in the trait-driven architecture.
+ * Traits use render_ui effects to dynamically render content into slots.
+ *
+ * Slots:
+ * - main: Primary content area
+ * - sidebar: Left/right sidebar
+ * - modal: Modal overlay
+ * - drawer: Slide-in drawer
+ * - overlay: Full-screen overlay
+ * - center: Centered popup
+ * - toast: Toast notifications
+ * - hud-top: Game HUD top bar
+ * - hud-bottom: Game HUD bottom bar
+ * - floating: Draggable floating panel
+ *
+ * @packageDocumentation
+ */
+/**
+ * Valid UI slot names
+ */
+type UISlot = 'main' | 'sidebar' | 'modal' | 'drawer' | 'overlay' | 'center' | 'toast' | 'hud-top' | 'hud-bottom' | 'floating';
+/**
+ * Animation types for slot transitions
+ */
+type SlotAnimation = 'fade' | 'slide' | 'scale' | 'none';
+/**
+ * Content rendered in a slot
+ */
+interface SlotContent {
+    /** Unique ID for this content */
+    id: string;
+    /** Pattern/component type to render */
+    pattern: string;
+    /** Props to pass to the pattern component */
+    props: Record<string, unknown>;
+    /** Priority for conflict resolution (higher wins) */
+    priority: number;
+    /** Animation for showing/hiding */
+    animation?: SlotAnimation;
+    /** Auto-dismiss timestamp (for toasts) */
+    autoDismissAt?: number;
+    /** Callback when dismissed */
+    onDismiss?: () => void;
+    /** Source trait that rendered this content */
+    sourceTrait?: string;
+}
+/**
+ * Configuration for render_ui effect
+ */
+interface RenderUIConfig {
+    /** Target slot */
+    target: UISlot;
+    /** Pattern/component to render */
+    pattern: string;
+    /** Props for the pattern */
+    props?: Record<string, unknown>;
+    /** Priority (default: 0) */
+    priority?: number;
+    /** Animation type */
+    animation?: SlotAnimation;
+    /** Auto-dismiss after ms (for toasts) */
+    autoDismissMs?: number;
+    /** Callback on dismiss */
+    onDismiss?: () => void;
+    /** Source trait name */
+    sourceTrait?: string;
+}
+/**
+ * Callback for slot changes
+ */
+type SlotChangeCallback = (slot: UISlot, content: SlotContent | null) => void;
+/**
+ * UI Slot Manager interface
+ */
+interface UISlotManager {
+    /** Current content for each slot */
+    slots: Record<UISlot, SlotContent | null>;
+    /** Render content to a slot */
+    render: (config: RenderUIConfig) => string;
+    /** Clear a specific slot */
+    clear: (slot: UISlot) => void;
+    /** Clear content by ID */
+    clearById: (id: string) => void;
+    /** Clear all slots */
+    clearAll: () => void;
+    /** Subscribe to slot changes */
+    subscribe: (callback: SlotChangeCallback) => () => void;
+    /** Check if a slot has content */
+    hasContent: (slot: UISlot) => boolean;
+    /** Get content for a slot */
+    getContent: (slot: UISlot) => SlotContent | null;
+}
+declare const DEFAULT_SLOTS: Record<UISlot, SlotContent | null>;
+/**
+ * Create a UI Slot Manager instance.
+ *
+ * This is the internal hook that creates the manager.
+ * Use `useUISlots()` from context in components.
+ */
+declare function useUISlotManager(): UISlotManager;
+
+export { DEFAULT_SLOTS as D, type RenderUIConfig as R, type SlotContent as S, type UISlotManager as U, type UISlot as a, type SlotAnimation as b, type SlotChangeCallback as c, useUISlotManager as u };

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@almadar/ui",
+  "version": "1.0.0",
+  "description": "React UI components, hooks, and providers for Almadar",
+  "type": "module",
+  "main": "./dist/components/index.js",
+  "module": "./dist/components/index.js",
+  "types": "./dist/components/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "types": "./dist/hooks/index.d.ts"
+    },
+    "./providers": {
+      "import": "./dist/providers/index.js",
+      "types": "./dist/providers/index.d.ts"
+    },
+    "./context": {
+      "import": "./dist/context/index.js",
+      "types": "./dist/context/index.d.ts"
+    },
+    "./renderer": {
+      "import": "./dist/renderer/index.js",
+      "types": "./dist/renderer/index.d.ts"
+    },
+    "./stores": {
+      "import": "./dist/stores/index.js",
+      "types": "./dist/stores/index.d.ts"
+    },
+    "./lib": {
+      "import": "./dist/lib/index.js",
+      "types": "./dist/lib/index.d.ts"
+    },
+    "./themes/*.css": "./themes/*.css"
+  },
+  "files": [
+    "dist",
+    "themes"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0",
+    "lucide-react": "^0.344.0",
+    "katex": "^0.16.9",
+    "react-markdown": "^9.0.3",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "react-force-graph-2d": "^1.28.0",
+    "@almadar/core": "1.0.0",
+    "@almadar/patterns": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.13.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-themes": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "storybook": "^8.0.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.2.0",
+    "tsx": "^4.7.0",
+    "vitest": "^1.4.0",
+    "@testing-library/react": "^14.2.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@vitest/ui": "^1.4.0",
+    "jsdom": "^24.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/almadar-io/almadar.git",
+    "directory": "packages/almadar-ui"
+  },
+  "license": "MIT",
+  "keywords": [
+    "almadar",
+    "ui",
+    "react",
+    "components",
+    "hooks"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/themes/almadar.css

@@ -0,0 +1,196 @@
+/**
+ * Almadar Theme
+ *
+ * Inspired by the Almadar/KFlow branding. Features teal-to-cyan
+ * gradients, dark slate backgrounds, and glowing accent effects.
+ * Premium, futuristic aesthetic with glowing interactions.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="almadar-light"] {
+    /* Shadows - Soft teal glow */
+    --shadow-main:
+        0 4px 14px rgba(20, 184, 166, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 2px 4px rgba(20, 184, 166, 0.08);
+    --shadow-lg:
+        0 8px 30px rgba(20, 184, 166, 0.18), 0 4px 10px rgba(0, 0, 0, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(20, 184, 166, 0.2);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.15);
+
+    /* Border radius - Modern rounded */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width - Clean */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Teal on light background */
+    --color-primary: #14b8a6;
+    --color-primary-hover: #0d9488;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #f1f5f9;
+    --color-secondary-hover: #e2e8f0;
+    --color-secondary-foreground: #0f172a;
+
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #f1f5f9;
+    --color-muted-foreground: #64748b;
+
+    --color-background: #f8fafc;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f1f5f9;
+    --color-border: rgba(20, 184, 166, 0.3);
+    --color-input: rgba(20, 184, 166, 0.2);
+    --color-ring: #14b8a6;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #0ea5e9;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Modern, clean */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.02em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #0d9488;
+
+    /* Transitions - Smooth */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring - Teal */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="almadar-dark"] {
+    /* Shadows - Glowing teal accents */
+    --shadow-main:
+        0 4px 14px rgba(20, 184, 166, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-sm: 0 2px 4px rgba(20, 184, 166, 0.1);
+    --shadow-lg:
+        0 8px 30px rgba(20, 184, 166, 0.25), 0 4px 10px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover:
+        0 12px 40px rgba(20, 184, 166, 0.35), 0 4px 12px rgba(6, 182, 212, 0.2);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.2);
+
+    /* Border radius - Modern rounded */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width - Clean */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Teal/Cyan with dark slate */
+    --color-primary: #14b8a6;
+    --color-primary-hover: #2dd4bf;
+    --color-primary-foreground: #042f2e;
+
+    --color-secondary: #1e293b;
+    --color-secondary-hover: #334155;
+    --color-secondary-foreground: #f1f5f9;
+
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #083344;
+
+    --color-muted: #1e293b;
+    --color-muted-foreground: #94a3b8;
+
+    --color-background: #0f172a;
+    --color-foreground: #f1f5f9;
+    --color-card: #1e293b;
+    --color-card-foreground: #f1f5f9;
+    --color-surface: #1e293b;
+    --color-border: rgba(20, 184, 166, 0.25);
+    --color-input: rgba(20, 184, 166, 0.3);
+    --color-ring: #14b8a6;
+
+    /* Semantic colors - Brighter for dark mode */
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #38bdf8;
+    --color-info-foreground: #000000;
+
+    /* Typography - Modern, clean */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.02em;
+    --line-height: 1.6;
+
+    /* Icon styling - Medium with teal color */
+    --icon-stroke-width: 1.75;
+    --icon-color: #14b8a6;
+
+    /* Transitions - Smooth with glow */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Glowing lift */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring - Teal glow */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+}

package/themes/index.css

@@ -0,0 +1,11 @@
+/**
+ * Theme index - exports all built-in theme CSS files
+ *
+ * Each theme provides both light and dark modes via:
+ *   [data-theme="themename-light"] { ... }
+ *   [data-theme="themename-dark"] { ... }
+ */
+
+@import "./wireframe.css";
+@import "./minimalist.css";
+@import "./almadar.css";

package/themes/minimalist.css

@@ -0,0 +1,193 @@
+/**
+ * Minimalist Theme
+ *
+ * Clean, subtle, refined. Uses soft shadows, thin borders,
+ * and gentle curves for a premium, modern feel.
+ * Elegant hover effects and smooth transitions.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="minimalist-light"] {
+    /* Shadows - Soft, layered */
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --shadow-lg:
+        0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    /* Border radius - Gentle curves */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width - Thin, delicate */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Subtle contrast with soft grays */
+    --color-primary: #18181b;
+    --color-primary-hover: #27272a;
+    --color-primary-foreground: #fafafa;
+
+    --color-secondary: #fafafa;
+    --color-secondary-hover: #f4f4f5;
+    --color-secondary-foreground: #18181b;
+
+    --color-accent: #18181b;
+    --color-accent-foreground: #fafafa;
+
+    --color-muted: #f4f4f5;
+    --color-muted-foreground: #71717a;
+
+    --color-background: #ffffff;
+    --color-foreground: #18181b;
+    --color-card: #ffffff;
+    --color-card-foreground: #18181b;
+    --color-surface: #f4f4f5;
+    --color-border: #e4e4e7;
+    --color-input: #d4d4d8;
+    --color-ring: #18181b;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #16a34a;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Light, elegant */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.01em;
+    --line-height: 1.6;
+
+    /* Icon styling - Thin, refined */
+    --icon-stroke-width: 1.5;
+    --icon-color: currentColor;
+
+    /* Transitions - Smooth, elegant */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms - Subtle lift */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #18181b;
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="minimalist-dark"] {
+    /* Shadows - Darker, more pronounced */
+    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-lg:
+        0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+    /* Border radius - Gentle curves */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width - Thin, delicate */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Dark mode inverted */
+    --color-primary: #fafafa;
+    --color-primary-hover: #e4e4e7;
+    --color-primary-foreground: #18181b;
+
+    --color-secondary: #27272a;
+    --color-secondary-hover: #3f3f46;
+    --color-secondary-foreground: #fafafa;
+
+    --color-accent: #fafafa;
+    --color-accent-foreground: #18181b;
+
+    --color-muted: #27272a;
+    --color-muted-foreground: #a1a1aa;
+
+    --color-background: #09090b;
+    --color-foreground: #fafafa;
+    --color-card: #18181b;
+    --color-card-foreground: #fafafa;
+    --color-surface: #27272a;
+    --color-border: #27272a;
+    --color-input: #3f3f46;
+    --color-ring: #fafafa;
+
+    /* Semantic colors - Brighter for dark mode */
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #60a5fa;
+    --color-info-foreground: #000000;
+
+    /* Typography */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --letter-spacing: -0.01em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.5;
+    --icon-color: currentColor;
+
+    /* Transitions */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #fafafa;
+}