@utopia-studio-design/design-system-cli 0.4.0 → 0.5.0

package/data/manifests/templates.json

@@ -91,6 +91,352 @@
           ]
         }
       }
+    },
+    {
+      "id": "template-interaction-lab",
+      "title": "Interaction Lab",
+      "category": "development-tool",
+      "status": "available",
+      "purpose": "A runnable contract lab for developing and verifying Ceramic complex components before product-specific composition.",
+      "starterFor": [
+        "Charts development",
+        "Database surface development",
+        "Calendar and Scheduler development"
+      ],
+      "sections": [
+        "Preview controls",
+        "Selection and reorder",
+        "Resize",
+        "Virtualized collection",
+        "Live status"
+      ],
+      "requiredComponents": [
+        "Button",
+        "Interaction foundation"
+      ],
+      "sourcePath": "templates/interaction-lab/main.tsx",
+      "entryPath": "templates/interaction-lab/index.html",
+      "manifestPath": "templates/interaction-lab/template.manifest.json",
+      "bundlePath": "templates/interaction-lab",
+      "pageCount": 1,
+      "pages": ["Interaction Lab"],
+      "useWhen": [
+        "A complex component needs a shared deterministic interaction fixture",
+        "Keyboard, touch, RTL, reduced motion, or large-collection behavior needs review"
+      ],
+      "avoidWhen": [
+        "The product needs a finished domain workflow",
+        "Business data or mutation policy belongs in the application"
+      ],
+      "rtlReady": true,
+      "preview": {
+        "kind": "interaction-lab",
+        "density": "compact"
+      },
+      "translations": {
+        "ar": {
+          "title": "مختبر التفاعل",
+          "purpose": "مختبر قابل للتشغيل لتطوير مكونات Ceramic المعقدة والتحقق من عقود التفاعل المشتركة قبل تركيبها في المنتج.",
+          "starterFor": [
+            "تطوير الرسوم البيانية",
+            "تطوير واجهات قواعد البيانات",
+            "تطوير التقويم والجدولة"
+          ],
+          "sections": [
+            "عناصر التحكم في المعاينة",
+            "التحديد وإعادة الترتيب",
+            "تغيير الحجم",
+            "المجموعة الافتراضية",
+            "الحالة المباشرة"
+          ]
+        }
+      }
+    },
+    {
+      "id": "template-composition-registry-lab",
+      "title": "Composition Registry Lab",
+      "category": "development-tool",
+      "status": "available",
+      "purpose": "A runnable review surface for Ceramic block definitions, design guardrails, versioned Layout JSON, and agent/editor ownership boundaries.",
+      "starterFor": [
+        "Agent-controlled dashboards",
+        "Studio modular layouts",
+        "Optional Puck visual-editor integration"
+      ],
+      "sections": [
+        "Ownership boundary",
+        "Ceramic design guardrails",
+        "Block definition palette",
+        "Layout JSON preview",
+        "Developer evidence"
+      ],
+      "requiredComponents": [
+        "Badge",
+        "Button",
+        "Composition Registry"
+      ],
+      "sourcePath": "templates/composition-registry-lab/main.tsx",
+      "entryPath": "templates/composition-registry-lab/index.html",
+      "manifestPath": "templates/composition-registry-lab/template.manifest.json",
+      "bundlePath": "templates/composition-registry-lab",
+      "pageCount": 1,
+      "pages": ["Composition Registry Lab"],
+      "useWhen": [
+        "A product needs agent-readable modular dashboard composition",
+        "A human visual editor must share the same Ceramic block and layout contract"
+      ],
+      "avoidWhen": [
+        "Arbitrary CSS or unregistered UI is required",
+        "The editor is expected to create Ceramic primitives or theme rules"
+      ],
+      "rtlReady": true,
+      "preview": {
+        "kind": "composition-registry-lab",
+        "density": "balanced"
+      },
+      "translations": {
+        "ar": {
+          "title": "مختبر سجل التركيب",
+          "purpose": "واجهة مراجعة قابلة للتشغيل لتعريفات كتل Ceramic وضوابط التصميم وعقد تخطيط JSON وحدود ملكية المحرر.",
+          "starterFor": [
+            "لوحات تحكم يديرها الوكيل",
+            "تخطيطات Studio المعيارية",
+            "تكامل محرر Puck المرئي الاختياري"
+          ],
+          "sections": [
+            "حدود الملكية",
+            "ضوابط تصميم Ceramic",
+            "لوحة تعريفات الكتل",
+            "معاينة تخطيط JSON",
+            "أدلة المطور"
+          ]
+        }
+      }
+    },
+    {
+      "id": "template-analytics-dashboard",
+      "title": "Analytics Dashboard",
+      "category": "analytics",
+      "status": "available",
+      "purpose": "A runnable analytics dashboard covering Ceramic chart families, semantic series, complete data states, keyboard exploration, exact-value tables, RTL, and responsive behavior.",
+      "starterFor": [
+        "Executive and operational dashboards",
+        "Period comparison and benchmark analysis",
+        "Accessible data visualization"
+      ],
+      "sections": [
+        "Preview controls",
+        "KPI grid",
+        "Primary trend chart",
+        "Benchmark comparison",
+        "Chart with data table"
+      ],
+      "requiredComponents": [
+        "Chart Root",
+        "Badge",
+        "Button"
+      ],
+      "sourcePath": "templates/analytics-dashboard/main.tsx",
+      "entryPath": "templates/analytics-dashboard/index.html",
+      "manifestPath": "templates/analytics-dashboard/template.manifest.json",
+      "bundlePath": "templates/analytics-dashboard",
+      "pageCount": 1,
+      "pages": ["Analytics Dashboard"],
+      "useWhen": [
+        "A product needs governed analytics with exact-value alternatives",
+        "Chart families and states must be evaluated in one responsive route"
+      ],
+      "avoidWhen": [
+        "A single decorative sparkline is sufficient",
+        "Raw renderer styling or unlabeled data is required"
+      ],
+      "rtlReady": true,
+      "preview": {
+        "kind": "analytics-dashboard",
+        "density": "data-rich"
+      },
+      "translations": {
+        "ar": {
+          "title": "لوحة تحليلات",
+          "purpose": "لوحة تحليلات قابلة للتشغيل تغطي عائلات مخططات Ceramic والسلاسل الدلالية وحالات البيانات الكاملة والاستكشاف بلوحة المفاتيح وجداول القيم الدقيقة واتجاه RTL والسلوك المتجاوب.",
+          "starterFor": [
+            "لوحات المعلومات التنفيذية والتشغيلية",
+            "مقارنة الفترات وتحليل المعايير",
+            "تصور البيانات المتاح"
+          ],
+          "sections": [
+            "عناصر تحكم المعاينة",
+            "شبكة مؤشرات الأداء",
+            "مخطط الاتجاه الأساسي",
+            "مقارنة المعيار",
+            "المخطط مع جدول البيانات"
+          ]
+        }
+      }
+    },
+    {
+      "id": "template-database-workspace",
+      "title": "Database Workspace",
+      "category": "database",
+      "status": "available",
+      "purpose": "A runnable schema-driven database workspace covering multiple property types, saved views, virtualization, inline editing, permissions, optimistic recovery, RTL, and mobile record details.",
+      "starterFor": [
+        "Product and project databases",
+        "Notion-style record workspaces",
+        "Large editable operational datasets"
+      ],
+      "sections": [
+        "Direction and data-state controls",
+        "Saved views",
+        "Database toolbar",
+        "Virtualized record grid",
+        "Mobile record details"
+      ],
+      "requiredComponents": ["Database Root", "Button", "Badge"],
+      "sourcePath": "templates/database-workspace/main.tsx",
+      "entryPath": "templates/database-workspace/index.html",
+      "manifestPath": "templates/database-workspace/template.manifest.json",
+      "bundlePath": "templates/database-workspace",
+      "pageCount": 1,
+      "pages": ["Database Workspace"],
+      "useWhen": [
+        "A product needs schema-driven editable records and multiple saved views",
+        "A dense desktop grid must become usable mobile record details"
+      ],
+      "avoidWhen": [
+        "A read-only table is sufficient",
+        "The design system would need to own product persistence or authorization"
+      ],
+      "rtlReady": true,
+      "preview": { "kind": "database-workspace", "density": "data-rich" },
+      "translations": {
+        "ar": {
+          "title": "مساحة عمل قاعدة البيانات",
+          "purpose": "مساحة عمل قابلة للتشغيل وسياقية المخطط تغطي أنواع خصائص متعددة والعروض المحفوظة والمحاكاة الافتراضية والتحرير المباشر والصلاحيات والاسترداد المتفائل واتجاه RTL وتفاصيل السجل على الهاتف.",
+          "starterFor": ["قواعد بيانات المنتجات والمشاريع", "مساحات عمل السجلات", "مجموعات البيانات التشغيلية الكبيرة"],
+          "sections": ["عناصر تحكم الاتجاه والحالة", "العروض المحفوظة", "شريط أدوات قاعدة البيانات", "شبكة السجلات الافتراضية", "تفاصيل السجل على الهاتف"]
+        }
+      }
+    },
+    {
+      "id": "template-calendar-application",
+      "title": "Calendar Application",
+      "category": "calendar",
+      "status": "available",
+      "purpose": "A runnable application scheduler covering Month, Week, Day, and Agenda views, recurrence, overlap, conflicts, timezone display, event editing, permissions, RTL, and responsive behavior.",
+      "starterFor": ["Team calendars", "Resource scheduling", "Cross-timezone planning"],
+      "sections": ["Date and state controls", "Resource sidebar", "Scheduler canvas", "Accessible agenda", "Event editor"],
+      "requiredComponents": ["Scheduler Root", "Button"],
+      "packageDependencies": {
+        "@phosphor-icons/react": "^2.1.10"
+      },
+      "sourcePath": "templates/calendar-application/main.tsx",
+      "entryPath": "templates/calendar-application/index.html",
+      "manifestPath": "templates/calendar-application/template.manifest.json",
+      "bundlePath": "templates/calendar-application",
+      "pageCount": 1,
+      "pages": ["Calendar Application"],
+      "useWhen": [
+        "A product needs event and resource scheduling rather than date selection",
+        "Drag-like actions require accessible keyboard and touch alternatives"
+      ],
+      "avoidWhen": [
+        "A date picker is sufficient",
+        "The design system would need to own persistence, authorization, or locale copy"
+      ],
+      "rtlReady": true,
+      "preview": { "kind": "calendar-application", "density": "data-rich" },
+      "translations": {
+        "ar": {
+          "title": "تطبيق التقويم",
+          "purpose": "جدولة تطبيقية قابلة للتشغيل مع عروض الشهر والأسبوع واليوم وجدول الأعمال والتكرار والتعارضات والمناطق الزمنية وتحرير الأحداث واتجاه RTL.",
+          "starterFor": ["تقويمات الفرق", "جدولة الموارد", "التخطيط عبر المناطق الزمنية"],
+          "sections": ["عناصر تحكم التاريخ والحالة", "الشريط الجانبي للموارد", "لوحة الجدولة", "جدول الأعمال المتاح", "محرر الحدث"]
+        }
+      }
+    },
+    {
+      "id": "template-dashboard-composer",
+      "title": "Dashboard Composer",
+      "category": "application-dashboard",
+      "status": "available",
+      "purpose": "A live Ceramic Layout JSON runtime and optional Puck editing layer for real To-do, Calendar, Issue Table, Chart Panel, Activity Feed, Agent Status, and Metrics blocks.",
+      "starterFor": [
+        "Agent-controlled personal dashboards",
+        "Studio modular application layouts",
+        "Human drag-and-drop through a registry-governed Puck adapter"
+      ],
+      "sections": [
+        "Agent and human layout controls",
+        "Registered block palette",
+        "Live To-do block",
+        "Live Calendar block",
+        "Governed Issue Table block",
+        "Lazy semantic Chart Panel block",
+        "Localized Activity Feed block",
+        "Governed Agent Status and approval block",
+        "Locked Metrics block",
+        "Puck visual editor",
+        "Agent Status resilience State Lab",
+        "Layout JSON evidence"
+      ],
+      "requiredComponents": [
+        "Composition Registry",
+        "Ceramic Puck Adapter",
+        "Scheduler Root",
+        "Database Root",
+        "Chart Root",
+        "Button",
+        "Badge",
+        "Checkbox"
+      ],
+      "packageDependencies": {
+        "@phosphor-icons/react": "^2.1.10",
+        "@puckeditor/core": "^0.22.4"
+      },
+      "sourcePath": "templates/dashboard-composer/main.tsx",
+      "entryPath": "templates/dashboard-composer/index.html",
+      "manifestPath": "templates/dashboard-composer/template.manifest.json",
+      "bundlePath": "templates/dashboard-composer",
+      "pageCount": 3,
+      "pages": ["Dashboard Composer", "Puck Visual Editor", "Agent Status State Lab"],
+      "useWhen": [
+        "An agent must arrange reviewed blocks through the same JSON used by the runtime",
+        "A team needs human drag-and-drop without allowing arbitrary design-system bypasses"
+      ],
+      "avoidWhen": [
+        "Arbitrary CSS or unregistered UI must be stored in the layout",
+        "The design system would need to own task, calendar, activity, agent execution, or approval persistence"
+      ],
+      "rtlReady": true,
+      "preview": {
+        "kind": "dashboard-composer",
+        "density": "data-rich",
+        "agentStatusStateLab": true
+      },
+      "translations": {
+        "ar": {
+          "title": "مؤلف لوحة المعلومات",
+          "purpose": "وقت تشغيل مباشر لتخطيط Ceramic JSON وطبقة تحرير Puck اختيارية لكتل المهام والتقويم وجدول المشكلات والمخططات والنشاط وحالة الوكلاء والمقاييس الحقيقية.",
+          "starterFor": [
+            "لوحات معلومات شخصية يديرها الوكيل",
+            "تخطيطات تطبيقات Studio المعيارية",
+            "السحب والإفلات البشري عبر محول Puck الخاضع للسجل"
+          ],
+          "sections": [
+            "عناصر تحكم الوكيل والإنسان",
+            "لوحة الكتل المسجلة",
+            "كتلة المهام المباشرة",
+            "كتلة التقويم المباشرة",
+            "كتلة جدول المشكلات المنضبطة",
+            "كتلة المخطط الدلالي",
+            "كتلة النشاط المترجمة",
+            "كتلة المقاييس المقفلة",
+            "محرر Puck المرئي",
+            "دليل Layout JSON"
+          ]
+        }
+      }
     }
   ]
 }

package/data/manifests/theme-renacore.json

@@ -0,0 +1,142 @@
+{
+  "$schema": "https://utopia-studio.co/design-system/theme.schema.json",
+  "id": "renacore",
+  "name": "Renacore",
+  "type": "theme-policy",
+  "locked": false,
+  "motionProfile": "precise",
+  "summary": "Renacore maps Ceramic to a calm, precise, utilitarian operational workspace built for scanning and action. The canonical product canvas is light; dark inverse surfaces are reserved for focused marketing, monitoring, and media moments.",
+  "sourceFiles": [
+    "packages/design-system/src/themes/renacore.css",
+    "packages/design-system/src/manifests/theme-renacore.json",
+    "apps/web-dashboard/src/app/globals.css",
+    "apps/web-dashboard/tailwind.config.ts"
+  ],
+  "brandPrimitives": {
+    "colors": {
+      "white": "#FFFFFF",
+      "black": "#000000",
+      "nearBlack": "#020D13",
+      "teal": "#12414B",
+      "tealHover": "#0E333B",
+      "signalCyan": "#97D1DD",
+      "ice": "#D6EAED",
+      "muted": "#F2F2F2",
+      "mutedForeground": "#666666",
+      "enterpriseCanvas": "#F7F4EC",
+      "enterpriseBorder": "#DED6C8",
+      "enterpriseInk": "#18211F",
+      "enterpriseMuted": "#51655F"
+    },
+    "typography": {
+      "latin": "Host Grotesk",
+      "arabic": "IBM Plex Sans Arabic",
+      "weights": [300, 400, 500, 600, 700, 800],
+      "productHeadingRule": "Use light headings on primary product surfaces. Reserve semibold for settings and dialog headings.",
+      "headlineCasing": "sentence",
+      "headlineTracking": "tight",
+      "eyebrowTracking": "0.2em",
+      "arabicDisplayRule": "Use IBM Plex Sans Arabic with native rhythm. Never apply Latin tracking or uppercase behavior."
+    },
+    "geometry": {
+      "baseRadius": "8px",
+      "controlRadius": "6px",
+      "smallRadius": "4px",
+      "surfaceRadius": "12px",
+      "elevation": "Low-contrast borders and restrained shadows. Chat composer is the highest-elevation product surface."
+    }
+  },
+  "semanticMappings": {
+    "--background": "White",
+    "--foreground": "Black",
+    "--card": "Muted Grey",
+    "--card-foreground": "Black",
+    "--primary": "Renacore Teal",
+    "--primary-foreground": "White",
+    "--secondary": "Muted Grey",
+    "--secondary-foreground": "Renacore Teal",
+    "--muted": "Muted Grey",
+    "--muted-foreground": "40% Grey",
+    "--border": "Muted Grey",
+    "--ring": "Renacore Teal",
+    "--radius-control": "6px",
+    "--radius-surface": "12px",
+    "--font-sans": "Host Grotesk",
+    "--font-arabic": "IBM Plex Sans Arabic",
+    "--motion-duration-page": "300ms",
+    "--motion-duration-reveal": "500ms"
+  },
+  "visualPolicy": {
+    "tone": ["calm", "precise", "utilitarian", "executive", "operational"],
+    "allow": [
+      "white operational canvases with low-contrast grey structure",
+      "Renacore Teal for active, connected, linked, and focused states",
+      "light-weight Host Grotesk headings",
+      "tight heading tracking and widely tracked uppercase labels",
+      "rounded but compact controls",
+      "warm enterprise surfaces for administrative and control-plane pages",
+      "real industrial photography on marketing or contextual media surfaces",
+      "dark inverse fields for focused brand and marketing moments"
+    ],
+    "avoid": [
+      "using dark marketing surfaces as the default product canvas",
+      "brand teal on every decorative element",
+      "heavy display typography across product surfaces",
+      "mixed icon families",
+      "generic loading spinners in branded AI or page-level loading states",
+      "dense effects, neon grids, and generic AI overlays",
+      "AI-generated infrastructure when credible real media is available"
+    ]
+  },
+  "iconPolicy": {
+    "system": "lucide",
+    "description": "Wrap lucide-react icons with strokeWidth 1.5 and flex-shrink: 0. The Renacore monogram is a brand and loading asset, not a general interface icon.",
+    "allow": [
+      "Lucide icons at 16px and 20px defaults",
+      "1.5px strokes",
+      "accessible labels on icon-only buttons",
+      "the Renacore monogram as the sole branded loader"
+    ],
+    "avoid": ["Phosphor icons", "emoji", "mixed icon families", "filled utility icons"]
+  },
+  "componentPolicy": {
+    "button": "Near Black default button with Pale Cyan text and sparse Cyan glow; hover to Renacore Teal.",
+    "input": "36px control with 6px radius, transparent field, low-contrast border, and 1px teal focus ring.",
+    "card": "12px radius, Muted Grey product surface, restrained border and shadow. Enterprise override uses warm border and white at 85%.",
+    "badge": "Compact status label. Reserve brand teal for active or connected states.",
+    "sidebar": "256px expanded, 60px collapsed; white canvas with compact active state in Muted Grey and Renacore Teal.",
+    "chatComposer": "16px radius, muted 30% field, 1.5px subtle border, and highest product elevation.",
+    "loader": "Animate the eight monogram paths with a 2s opacity pulse staggered by 150ms."
+  },
+  "marketingAssetPolicy": {
+    "priority": "Use licensed real industrial photography and footage before generated media.",
+    "camera": "Stable, observational, and physically credible. Favor scale, pressure, heat, steam, and layered infrastructure.",
+    "use": ["LNG trains", "compressors", "pipelines", "refineries", "operators", "control environments"],
+    "avoid": ["cyberpunk plants", "floating dashboards", "full-frame cyan washes", "physically implausible equipment"]
+  },
+  "arabicFriendly": {
+    "direction": "Support dir=\"rtl\" through logical CSS properties and mirrored directional motion.",
+    "typography": "Use IBM Plex Sans Arabic roles without Latin tracking or casing."
+  },
+  "translations": {
+    "ar": {
+      "summary": "يحوّل ثيم Renacore نظام Ceramic إلى مساحة تشغيلية هادئة ودقيقة وعملية، مصممة للمسح السريع واتخاذ الإجراء.",
+      "iconPolicy": {
+        "system": "Lucide",
+        "description": "استخدم أيقونات Lucide بسُمك 1.5 مع إبقاء شعار Renacore كأصل للهوية والتحميل فقط.",
+        "allow": ["أيقونات Lucide", "أيقونات أحادية اللون", "تسميات وصول للأزرار الأيقونية"]
+      }
+    }
+  },
+  "aiRules": [
+    "Treat DesignTokens as the authoritative source and map components through semantic roles.",
+    "Use the light operational canvas as the default Renacore product mode.",
+    "Use data-color-mode=\"dark\" only for deliberate inverse, monitoring, or marketing surfaces.",
+    "Use Host Grotesk throughout product UI and keep primary headings light.",
+    "Use Lucide icons with a 1.5 stroke and do not mix icon families.",
+    "Reserve Renacore Teal for active, connected, linked, and focused states.",
+    "Use the Renacore monogram as the sole branded page-level and AI loader.",
+    "Prefer real industrial media over generated infrastructure imagery.",
+    "Keep Arabic on IBM Plex Sans Arabic tokens without Latin casing or tracking."
+  ]
+}