@utopia-studio-design/design-system-cli 0.1.0 → 0.2.0

package/data/manifests/themes.json

@@ -0,0 +1,417 @@
+{
+  "defaultTheme": "utopia-default",
+  "intent": "Themes are token-contract and visual-policy implementations. Utopia Default is the first locked theme, not the entire design system.",
+  "coreBoundary": {
+    "owns": [
+      "semantic token contract",
+      "component APIs",
+      "accessibility",
+      "Arabic-friendly baseline",
+      "theme extension mechanism"
+    ],
+    "doesNotOwn": [
+      "brand palette",
+      "brand typography",
+      "brand icon policy",
+      "brand voice",
+      "brand-specific layout philosophy"
+    ]
+  },
+  "translations": {
+    "ar": {
+      "intent": "الثيمات تطبيقات لعقد التوكنات والسياسة البصرية. ثيم The Utopia Studio الافتراضي هو أول ثيم مقفل، وليس نظام التصميم كله.",
+      "coreBoundary": {
+        "doesNotOwn": [
+          "لوحة ألوان العلامة",
+          "طباعة العلامة",
+          "سياسة أيقونات العلامة",
+          "صوت العلامة",
+          "فلسفة التخطيط الخاصة بالعلامة"
+        ]
+      }
+    }
+  },
+  "requiredSemanticRoles": [
+    "--background",
+    "--foreground",
+    "--card",
+    "--card-foreground",
+    "--primary",
+    "--primary-foreground",
+    "--secondary",
+    "--secondary-foreground",
+    "--muted",
+    "--muted-foreground",
+    "--border",
+    "--input",
+    "--ring",
+    "--radius",
+    "--radius-control",
+    "--radius-surface",
+    "--radius-chat-bubble",
+    "--radius-chat-composer",
+    "--radius-chat-token",
+    "--shadow-control",
+    "--motion-duration-press",
+    "--motion-duration-page",
+    "--motion-duration-expand",
+    "--motion-duration-reveal",
+    "--motion-duration-icon",
+    "--motion-ease-standard",
+    "--motion-ease-emphasized",
+    "--motion-ease-icon",
+    "--motion-press-scale",
+    "--motion-distance-page",
+    "--motion-distance-reveal",
+    "--font-sans",
+    "--font-display",
+    "--font-ui-support",
+    "--font-marketing-display",
+    "--font-arabic",
+    "--font-arabic-body",
+    "--font-arabic-display",
+    "--font-weight-arabic-body",
+    "--font-weight-arabic-display",
+    "--font-size-display",
+    "--font-size-arabic-body",
+    "--font-size-arabic-body-lg",
+    "--font-size-arabic-display",
+    "--line-height-arabic",
+    "--line-height-arabic-body",
+    "--line-height-arabic-display",
+    "--tracking-arabic",
+    "--tracking-arabic-display",
+    "--sidebar-width",
+    "--control-height-sm",
+    "--sidebar-width-collapsed",
+    "--sidebar-min-block-size",
+    "--sidebar-rail-size",
+    "--button-height",
+    "--card-padding",
+    "--overlay",
+    "--modal-surface",
+    "--popover-surface"
+  ],
+  "themes": [
+    {
+      "id": "utopia-default",
+      "name": "The Utopia Studio Default",
+      "shortName": "Utopia Default",
+      "locked": true,
+      "role": "default brand theme",
+      "description": "The default Ceramic theme for The Utopia Studio. It maps semantic roles to Special Black, White, Brick Red, Light Grey, TWK Lausanne, IBM Plex Sans Arabic, square geometry, and border-led depth.",
+      "bestFor": ["The Utopia Studio products", "Ceramic documentation", "brand-led editorial and operational surfaces"],
+      "principles": ["architectural hierarchy", "square geometry", "restrained Brick Red emphasis", "border-led elevation", "bilingual Latin and Arabic typography"],
+      "brandAsset": {
+        "kind": "wordmark",
+        "src": "/brand/the-utopia-studio-wordmark.avif",
+        "alt": "The Utopia Studio",
+        "usage": "The wordmark may identify The Utopia Studio branded surfaces. It is not a required core component asset."
+      },
+      "translations": {
+        "ar": {
+          "name": "ثيم The Utopia Studio الافتراضي",
+          "role": "ثيم العلامة الافتراضي",
+          "description": "الثيم الافتراضي لـ Ceramic وThe Utopia Studio. يربط الأدوار الدلالية بألوان العلامة وخطي TWK Lausanne وIBM Plex Sans Arabic والهندسة المربعة والعمق المعتمد على الحدود.",
+          "bestFor": ["منتجات The Utopia Studio", "توثيق Ceramic", "الأسطح التحريرية والتشغيلية المرتبطة بالعلامة"],
+          "principles": ["تسلسل معماري", "هندسة مربعة", "إبراز مقيد بلون Brick Red", "ارتفاع يعتمد على الحدود", "طباعة ثنائية للاتينية والعربية"],
+          "brandAssetUsage": "يمكن للعلامة النصية تعريف الأسطح التابعة لـ The Utopia Studio، لكنها ليست أصلا مطلوبا لمكونات الجوهر."
+        }
+      },
+      "policyManifest": "packages/design-system/src/manifests/theme-utopia-default.json",
+      "css": "packages/design-system/src/themes/utopia-default.css",
+      "iconSystem": "utopia-dot-bar",
+      "values": {
+        "--background": "#3C3235",
+        "--foreground": "#FFFFFF",
+        "--card": "#FFFFFF",
+        "--card-foreground": "#3C3235",
+        "--primary": "#CC5536",
+        "--primary-foreground": "#FFFFFF",
+        "--secondary": "#EEEEEE",
+        "--secondary-foreground": "#3C3235",
+        "--muted": "#635B5E",
+        "--muted-foreground": "#BDB7B9",
+        "--border": "rgba(255,255,255,0.18)",
+        "--input": "rgba(255,255,255,0.24)",
+        "--ring": "#CC5536",
+        "--radius": "0px",
+        "--radius-control": "0px",
+        "--radius-surface": "0px",
+        "--radius-chat-bubble": "0px",
+        "--radius-chat-composer": "0px",
+        "--radius-chat-token": "0px",
+        "--shadow-control": "none",
+        "--motion-duration-press": "160ms",
+        "--motion-duration-page": "200ms",
+        "--motion-duration-expand": "320ms",
+        "--motion-duration-reveal": "520ms",
+        "--motion-duration-icon": "640ms",
+        "--motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
+        "--motion-ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "--motion-ease-icon": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "--motion-press-scale": "0.97",
+        "--motion-distance-page": "8px",
+        "--motion-distance-reveal": "8px",
+        "--font-sans": "TWK Lausanne",
+        "--font-display": "TWK Lausanne",
+        "--font-ui-support": "TWK Lausanne",
+        "--font-marketing-display": "TWK Lausanne",
+        "--font-arabic": "IBM Plex Sans Arabic",
+        "--font-arabic-body": "IBM Plex Sans Arabic",
+        "--font-arabic-display": "IBM Plex Sans Arabic",
+        "--font-weight-arabic-body": "400",
+        "--font-weight-arabic-display": "700",
+        "--font-size-display": "clamp(44px, 8vw, 96px)",
+        "--font-size-arabic-body": "16px",
+        "--font-size-arabic-body-lg": "19px",
+        "--font-size-arabic-display": "clamp(42px, 7.6vw, 91px)",
+        "--line-height-arabic": "1.75",
+        "--line-height-arabic-body": "1.75",
+        "--line-height-arabic-display": "1.16",
+        "--tracking-arabic": "0",
+        "--tracking-arabic-display": "0",
+        "--sidebar-width": "17rem",
+        "--control-height-sm": "32px",
+        "--sidebar-width-collapsed": "4rem",
+        "--sidebar-min-block-size": "30rem",
+        "--sidebar-rail-size": "8px",
+        "--overlay": "rgb(60 50 53 / 86%)",
+        "--modal-surface": "Special Black",
+        "--popover-surface": "Special Black"
+      }
+    },
+    {
+      "id": "dextrum",
+      "name": "Dextrum",
+      "locked": false,
+      "role": "brand theme",
+      "description": "Dark Blue, Ocean Blue, Charcoal Blue, Timid White. Manrope drives product UI and default headings; Clash Grotesk is marketing-only.",
+      "bestFor": ["Dextrum product UI", "technical sales surfaces", "data-heavy operational workflows"],
+      "principles": ["calm technical hierarchy", "blue-led product surfaces", "Manrope product typography", "Lucide icon system"],
+      "brandAsset": {
+        "kind": "logo",
+        "src": "/brand/dextrum-logo.svg",
+        "alt": "Dextrum",
+        "usage": "Use only on Dextrum-branded surfaces."
+      },
+      "translations": {
+        "ar": {
+          "name": "Dextrum",
+          "role": "ثيم علامة",
+          "description": "ثيم تقني بأزرق داكن وأزرق محيطي وأبيض هادئ. يستخدم Manrope لواجهة المنتج وClash Grotesk للتسويق فقط.",
+          "bestFor": ["واجهات منتج Dextrum", "أسطح المبيعات التقنية", "سير العمل التشغيلي كثيف البيانات"],
+          "principles": ["تسلسل تقني هادئ", "أسطح منتج يقودها الأزرق", "طباعة منتج بخط Manrope", "نظام أيقونات Lucide"],
+          "brandAssetUsage": "يستخدم الشعار فقط على الأسطح التابعة لعلامة Dextrum."
+        }
+      },
+      "policyManifest": "packages/design-system/src/manifests/theme-dextrum.json",
+      "css": "packages/design-system/src/themes/dextrum.css",
+      "iconSystem": "lucide",
+      "values": {
+        "--background": "#192B39",
+        "--foreground": "#EAEAEA",
+        "--card": "#2F3F4C",
+        "--card-foreground": "#EAEAEA",
+        "--primary": "#3E8ECC",
+        "--primary-foreground": "#EAEAEA",
+        "--secondary": "#2F3F4C",
+        "--secondary-foreground": "#EAEAEA",
+        "--muted": "#243746",
+        "--muted-foreground": "#9BA6AE",
+        "--border": "rgba(234,234,234,0.14)",
+        "--input": "rgba(234,234,234,0.20)",
+        "--ring": "#3E8ECC",
+        "--radius": "6px",
+        "--radius-control": "6px",
+        "--radius-surface": "8px",
+        "--radius-chat-bubble": "18px",
+        "--radius-chat-composer": "24px",
+        "--radius-chat-token": "14px",
+        "--shadow-control": "none",
+        "--motion-duration-press": "160ms",
+        "--motion-duration-page": "200ms",
+        "--motion-duration-expand": "320ms",
+        "--motion-duration-reveal": "520ms",
+        "--motion-duration-icon": "640ms",
+        "--motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
+        "--motion-ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "--motion-ease-icon": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "--motion-press-scale": "0.97",
+        "--motion-distance-page": "8px",
+        "--motion-distance-reveal": "8px",
+        "--font-sans": "Manrope",
+        "--font-display": "Manrope",
+        "--font-ui-support": "Satoshi",
+        "--font-marketing-display": "Clash Grotesk",
+        "--font-arabic": "IBM Plex Sans Arabic",
+        "--font-arabic-body": "IBM Plex Sans Arabic",
+        "--font-arabic-display": "IBM Plex Sans Arabic",
+        "--font-weight-arabic-body": "400",
+        "--font-weight-arabic-display": "700",
+        "--font-size-display": "clamp(2.75rem, 7vw, 5.5rem)",
+        "--font-size-arabic-body": "16px",
+        "--font-size-arabic-body-lg": "18px",
+        "--font-size-arabic-display": "clamp(2.625rem, 6.6vw, 5.25rem)",
+        "--line-height-arabic": "1.75",
+        "--line-height-arabic-body": "1.75",
+        "--line-height-arabic-display": "1.14",
+        "--tracking-arabic": "0",
+        "--tracking-arabic-display": "0",
+        "--sidebar-width": "17rem",
+        "--control-height-sm": "2rem",
+        "--sidebar-width-collapsed": "4rem",
+        "--sidebar-min-block-size": "30rem",
+        "--sidebar-rail-size": "8px",
+        "--button-height": "40px",
+        "--card-padding": "24px",
+        "--overlay": "color-mix(in srgb, #192B39 84%, transparent)",
+        "--modal-surface": "#2F3F4C",
+        "--popover-surface": "#2F3F4C"
+      }
+    },
+    {
+      "id": "barrier-intelligence",
+      "name": "Barrier Intelligence",
+      "locked": false,
+      "role": "brand theme",
+      "description": "Near-black surfaces with warm gold accents, ink hierarchy, and Hanken Grotesk for product UI. Marketing typography remains theme-scoped only.",
+      "bestFor": ["Barrier Intelligence product UI", "risk and intelligence workflows", "high-contrast analytical products"],
+      "principles": ["near-black hierarchy", "warm gold emphasis", "dense analytical surfaces", "Lucide icon system"],
+      "translations": {
+        "ar": {
+          "name": "Barrier Intelligence",
+          "role": "ثيم علامة",
+          "description": "ثيم بأسطح شبه سوداء ولمسات ذهبية دافئة وتسلسل حبر واضح وخط Hanken Grotesk لواجهة المنتج.",
+          "bestFor": ["واجهات Barrier Intelligence", "سير عمل المخاطر والاستخبارات", "المنتجات التحليلية عالية التباين"],
+          "principles": ["تسلسل شبه أسود", "إبراز ذهبي دافئ", "أسطح تحليلية كثيفة", "نظام أيقونات Lucide"],
+          "brandAssetUsage": "تبقى أصول العلامة خارج شريط هيكل Ceramic."
+        }
+      },
+      "policyManifest": "packages/design-system/src/manifests/theme-barrier-intelligence.json",
+      "css": "packages/design-system/src/themes/barrier-intelligence.css",
+      "iconSystem": "lucide",
+      "values": {
+        "--background": "#000000",
+        "--foreground": "#F5F5F2",
+        "--card": "#0E0E0E",
+        "--card-foreground": "#F5F5F2",
+        "--primary": "#A6824C",
+        "--primary-foreground": "#1A1208",
+        "--secondary": "#141414",
+        "--secondary-foreground": "#F5F5F2",
+        "--muted": "#0A0A0A",
+        "--muted-foreground": "#9A9893",
+        "--border": "color-mix(in srgb, #1C1C1C 82%, transparent)",
+        "--input": "color-mix(in srgb, #1C1C1C 70%, transparent)",
+        "--ring": "#A6824C",
+        "--radius": "12px",
+        "--radius-control": "6px",
+        "--radius-surface": "14px",
+        "--radius-chat-bubble": "18px",
+        "--radius-chat-composer": "24px",
+        "--radius-chat-token": "14px",
+        "--shadow-control": "none",
+        "--motion-duration-press": "160ms",
+        "--motion-duration-page": "200ms",
+        "--motion-duration-expand": "320ms",
+        "--motion-duration-reveal": "520ms",
+        "--motion-duration-icon": "640ms",
+        "--motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
+        "--motion-ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "--motion-ease-icon": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "--motion-press-scale": "0.97",
+        "--motion-distance-page": "8px",
+        "--motion-distance-reveal": "8px",
+        "--font-sans": "Hanken Grotesk",
+        "--font-display": "Hanken Grotesk",
+        "--font-ui-support": "Hanken Grotesk",
+        "--font-marketing-display": "Hanken Grotesk",
+        "--font-arabic": "IBM Plex Sans Arabic",
+        "--font-arabic-body": "IBM Plex Sans Arabic",
+        "--font-arabic-display": "IBM Plex Sans Arabic",
+        "--font-weight-arabic-body": "400",
+        "--font-weight-arabic-display": "700",
+        "--font-size-display": "clamp(2.875rem, 7.6vw, 5.75rem)",
+        "--font-size-arabic-body": "16px",
+        "--font-size-arabic-body-lg": "18px",
+        "--font-size-arabic-display": "clamp(2.75rem, 7.2vw, 5.5rem)",
+        "--line-height-arabic": "1.75",
+        "--line-height-arabic-body": "1.75",
+        "--line-height-arabic-display": "1.14",
+        "--tracking-arabic": "0",
+        "--tracking-arabic-display": "0",
+        "--sidebar-width": "17rem",
+        "--control-height-sm": "2rem",
+        "--sidebar-width-collapsed": "4rem",
+        "--sidebar-min-block-size": "30rem",
+        "--sidebar-rail-size": "8px",
+        "--button-height": "40px",
+        "--card-padding": "24px",
+        "--overlay": "color-mix(in srgb, #000000 86%, transparent)",
+        "--modal-surface": "#141414",
+        "--popover-surface": "#141414"
+      }
+    }
+  ],
+  "plannedThemeSlots": [
+    {
+      "id": "venture",
+      "name": "Venture Proof",
+      "status": "planned",
+      "purpose": "Portfolio and company proof surfaces.",
+      "audience": ["venture studios", "portfolios", "company profiles"],
+      "visualDirection": "Editorial proof hierarchy with strong media, concise evidence, and calm navigation.",
+      "semanticExtensions": ["--proof-accent", "--proof-media-surface", "--proof-metric-foreground"],
+      "requiredValidation": ["case-study density", "mixed media ratios", "Arabic company profiles", "LTR and RTL carousels"],
+      "translations": { "ar": { "name": "إثبات المشاريع", "purpose": "أسطح للمحافظ وإثبات الشركات.", "audience": ["استوديوهات المشاريع", "المحافظ", "ملفات الشركات"], "visualDirection": "تسلسل تحريري للأدلة مع وسائط قوية وأدلة مختصرة وتنقل هادئ.", "requiredValidation": ["كثافة دراسات الحالة", "نسب الوسائط المختلطة", "ملفات شركات عربية", "عارضات شرائح LTR وRTL"] } }
+    },
+    {
+      "id": "operator",
+      "name": "Operator Console",
+      "status": "planned",
+      "purpose": "Dense product and internal tool interfaces.",
+      "audience": ["operators", "internal tools", "admin products"],
+      "visualDirection": "High-density operational hierarchy with compact controls and clear exception states.",
+      "semanticExtensions": ["--operator-density", "--operator-row-height", "--operator-exception"],
+      "requiredValidation": ["dense tables", "keyboard navigation", "Arabic filters", "RTL side navigation"],
+      "translations": { "ar": { "name": "وحدة المشغّل", "purpose": "واجهات كثيفة للمنتجات والأدوات الداخلية.", "audience": ["المشغّلون", "الأدوات الداخلية", "منتجات الإدارة"], "visualDirection": "تسلسل تشغيلي عالي الكثافة مع عناصر تحكم مختصرة وحالات استثناء واضحة.", "requiredValidation": ["الجداول الكثيفة", "التنقل بلوحة المفاتيح", "مرشحات عربية", "تنقل جانبي RTL"] } }
+    },
+    {
+      "id": "editorial",
+      "name": "Editorial Resource",
+      "status": "planned",
+      "purpose": "Resource articles and technical guides.",
+      "audience": ["documentation teams", "research publishers", "technical resources"],
+      "visualDirection": "Reading-first typography with restrained navigation, annotations, code, and media.",
+      "semanticExtensions": ["--editorial-measure", "--editorial-note", "--editorial-code-surface"],
+      "requiredValidation": ["long-form reading", "code overflow", "Arabic article rhythm", "bilingual tables of contents"],
+      "translations": { "ar": { "name": "المورد التحريري", "purpose": "مقالات الموارد والأدلة التقنية.", "audience": ["فرق التوثيق", "ناشرو الأبحاث", "الموارد التقنية"], "visualDirection": "طباعة تضع القراءة أولا مع تنقل هادئ وملاحظات وكود ووسائط.", "requiredValidation": ["قراءة المحتوى الطويل", "تجاوز الكود", "إيقاع المقال العربي", "جداول محتويات ثنائية اللغة"] } }
+    },
+    {
+      "id": "application",
+      "name": "Application Flow",
+      "status": "planned",
+      "purpose": "Forms, eligibility, conversion, and onboarding flows.",
+      "audience": ["applications", "onboarding", "eligibility and conversion flows"],
+      "visualDirection": "Trustworthy step-by-step interaction with strong progress, validation, and recovery states.",
+      "semanticExtensions": ["--flow-progress", "--flow-validation", "--flow-review-surface"],
+      "requiredValidation": ["multi-step recovery", "localized validation", "Arabic forms", "RTL progress order"],
+      "translations": { "ar": { "name": "مسار التقديم", "purpose": "النماذج والأهلية والتحويل ومسارات الانضمام.", "audience": ["طلبات التقديم", "الانضمام", "مسارات الأهلية والتحويل"], "visualDirection": "تفاعل موثوق خطوة بخطوة مع حالات واضحة للتقدم والتحقق والاستعادة.", "requiredValidation": ["استعادة المسارات متعددة الخطوات", "تحقق موضّع", "نماذج عربية", "ترتيب تقدم RTL"] } }
+    }
+  ],
+  "arabicFriendly": {
+    "required": true,
+    "rules": [
+      "Support dir=\"ltr\" and dir=\"rtl\".",
+      "Use logical CSS properties.",
+      "Use start/end naming, not left/right APIs.",
+      "Validate mixed English/Arabic labels.",
+      "Use Arabic body and display typography tokens.",
+      "Set Arabic display size from the Latin display scale at approximately 95%, with Arabic line-height preserved for readability.",
+      "Do not map Latin uppercase display styling to Arabic.",
+      "Mirror directional arrows, chevrons, navigation, carousel, progress, and sidebar affordances intentionally.",
+      "Do not invent Arabic copy."
+    ]
+  }
+}

package/data/templates/saas-solution-homepage/README.md

@@ -0,0 +1,52 @@
+# SaaS Solution Website
+
+A production-oriented Ceramic template for a complete product-led SaaS website. It uses Linear only as an information-architecture reference: compact value proposition, early product proof, progressive feature depth, dedicated proof and adoption surfaces, and consistent navigation across the site. No Linear copy, brand primitives, or assets are included.
+
+## Run
+
+```bash
+npm run dev -- --host 127.0.0.1 --port 3017
+```
+
+Open `/templates/saas-solution-homepage/index.html?seed=1974341818#agents`.
+
+## Page family
+
+- `/index.html` — homepage narrative
+- `/product/` — product overview
+- `/agents/` — agent and automation detail
+- `/integrations/` — integration directory
+- `/integrations/slack/` — integration detail
+- `/customers/` — customer story index
+- `/customers/aster-labs/` — customer case study
+- `/pricing/` — pricing, comparison, and FAQ
+- `/changelog/` — product updates
+- `/contact-sales/` — sales form and success state
+
+Every page preserves the `seed` query parameter through internal navigation.
+
+## Package import
+
+```tsx
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  TopNav,
+  TopNavItem,
+} from '@utopia-studio-design/design-system'
+import '@utopia-studio-design/design-system/core.css'
+import '@utopia-studio-design/design-system/themes/utopia-default.css'
+```
+
+Generate a themed copy with `npx utopia-ds template template-saas-solution-homepage --theme dextrum --copy ./saas-website`. The CLI rewrites the static theme import, document metadata, runtime theme constant, and `.ceramic/config.json` together. The template consumes semantic roles only. It uses logical CSS properties, mirrors directional icons in RTL, supports mixed Arabic and English data, and reads the `seed` query parameter deterministically.
+
+## Adaptation boundaries
+
+- Replace seeded names, metrics, pricing, and claims before production.
+- Keep the section sequence when the product story depends on workflow depth; remove a section only when the buying criterion is genuinely absent.
+- Replace the demo interface with reviewed product UI while preserving accessible labels and keyboard behavior.
+- Extend semantic tokens in the active theme instead of adding brand literals to reusable components.

package/data/templates/saas-solution-homepage/agents/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Ceramic agents and automation product page template." /><title>Agents — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../main.tsx"></script></body></html>

package/data/templates/saas-solution-homepage/changelog/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Ceramic SaaS changelog template." /><title>Changelog — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../main.tsx"></script></body></html>

package/data/templates/saas-solution-homepage/contact-sales/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Ceramic SaaS contact sales template." /><title>Contact Sales — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../main.tsx"></script></body></html>

package/data/templates/saas-solution-homepage/customers/aster-labs/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Ceramic SaaS customer case study template." /><title>Customer Story — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../../main.tsx"></script></body></html>

package/data/templates/saas-solution-homepage/customers/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Ceramic SaaS customer stories index template." /><title>Customers — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../main.tsx"></script></body></html>

package/data/templates/saas-solution-homepage/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark light" />
+    <style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style>
+    <script>try{const mode=localStorage.getItem('ceramic-saas-mode');const locale=localStorage.getItem('ceramic-saas-locale');if(mode==='light')document.documentElement.dataset.colorMode='light';if(locale==='ar'){document.documentElement.lang='ar';document.documentElement.dir='rtl'}}catch{}</script>
+    <meta name="description" content="A production-ready SaaS solution homepage template built with the Utopia Ceramic Design System." />
+    <title>SaaS Solution Homepage — Utopia Ceramic Template</title>
+  </head>
+  <body>
+    <a class="skip-link" href="#main-content">Skip to content</a>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/data/templates/saas-solution-homepage/integrations/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Ceramic SaaS integrations directory template." /><title>Integrations — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../main.tsx"></script></body></html>

package/data/templates/saas-solution-homepage/integrations/slack/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Ceramic SaaS integration detail page template." /><title>Integration Detail — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../../main.tsx"></script></body></html>