npm - @donotdev/cli - Versions diffs - 0.0.3 - Mend

@donotdev/cli 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (281) hide show

package/dist/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAE5B;;;;;GAKG;AAEH,qFAAqF;AACrF,OAAO,EACL,SAAS,EACT,aAAa,EACb,MAAM,EACN,IAAI,EACJ,GAAG,EACH,KAAK,EACL,OAAO,EACP,GAAG,EACH,QAAQ,EACR,WAAW,EACX,MAAM,GACP,MAAM,mBAAmB,CAAC"}

package/package.json ADDED Viewed

@@ -0,0 +1,71 @@
+{
+  "name": "@donotdev/cli",
+  "version": "0.0.3",
+  "description": "Command-line interface for DoNotDev Framework",
+  "type": "module",
+  "private": false,
+  "bin": {
+    "dndev": "./dist/bin/dndev.js",
+    "donotdev": "./dist/bin/donotdev.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json",
+    "./dependencies-matrix.json": "./dependencies-matrix.json"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "dependencies-matrix.json",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "dndev bundle --package @donotdev/cli",
+    "dev": "tsc --watch",
+    "clean": "rimraf dist tsconfig.tsbuildinfo",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.11.0",
+    "commander": "^14.0.2",
+    "fast-glob": "^3.3.3"
+  },
+  "peerDependencies": {
+    "@donotdev/core": "0.0.3"
+  },
+  "peerDependenciesMeta": {
+    "@donotdev/core": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/donotdev/cli.git"
+  },
+  "keywords": [
+    "dndev",
+    "cli",
+    "framework",
+    "react",
+    "typescript",
+    "vite",
+    "nextjs",
+    "scaffolding"
+  ],
+  "author": "AMBROISE PARK Consulting",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}

package/templates/app-demo/index.html.example ADDED Viewed

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DoNotDev Components Demo</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: var(--font-family, system-ui, sans-serif);
+      background: #000000;
+      color: #ffffff;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/app-demo/public/favicon.ico.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-400-cyrillic-ext.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-400-cyrillic.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-400-greek-ext.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-400-greek.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-400-latin-ext.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-400-latin.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-400-vietnamese.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-700-cyrillic-ext.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-700-cyrillic.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-700-greek-ext.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-700-greek.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-700-latin-ext.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-700-latin.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/Roboto-700-vietnamese.woff2.example ADDED Viewed

Binary file

package/templates/app-demo/public/fonts/fonts.css.example ADDED Viewed

@@ -0,0 +1,144 @@
+/* apps/demo/public/fonts/fonts.css */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: optional;
+  src: url('/fonts/Roboto-400-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
+}
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: optional;
+  src: url('/fonts/Roboto-700-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
+}
+/* ✅ CRITICAL: Extended character sets load on-demand when needed */
+/* These load automatically when browser encounters characters in these ranges */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/Roboto-400-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/Roboto-700-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+/* Cyrillic */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/Roboto-400-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/Roboto-700-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* Cyrillic Extended */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/Roboto-400-cyrillic-ext.woff2') format('woff2');
+  unicode-range:
+    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/Roboto-700-cyrillic-ext.woff2') format('woff2');
+  unicode-range:
+    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* Greek */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/Roboto-400-greek.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/Roboto-700-greek.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* Greek Extended */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/Roboto-400-greek-ext.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/Roboto-700-greek-ext.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* Vietnamese */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/Roboto-400-vietnamese.woff2') format('woff2');
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/Roboto-700-vietnamese.woff2') format('woff2');
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}

package/templates/app-demo/public/logo.png.example ADDED Viewed

Binary file

package/templates/app-demo/public/logo.svg.example ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" xmlns:v="https://vecta.io/nano"><path d="M11.995 68.133c-.747.14-2.114 1.276-2.986 2.409l-1.557 2.199-.062 104.273.684 251.717c.935 2.835 3.423 4.749 6.347 4.89 2.366.142 3.61-.566 10.767-5.599l42.311-30.054L112.3 366.14l16.366-11.768c3.234-2.268 6.098-4.749 6.346-5.599 1.369-3.828 9.271-32.679 9.023-32.891-.124-.213-1.743.78-3.547 2.198-1.803 1.347-8.773 6.309-15.432 10.916L87.1 355.862l-24.891 17.65-23.831 16.729c-5.413 3.898-10.143 7.017-10.454 7.017-.685 0-.809-291.837-.063-292.334.249-.141 1.619.497 3.049 1.559l51.521 37.711 18.668 13.61 20.222 14.674 13.69 9.996 9.333 6.734 12.756 9.215c10.455 7.798 15.992 11.767 16.553 11.908.374.073 1.99-4.889 3.609-11.058l3.048-11.202-5.537-4.038-10.641-7.799c-2.863-1.984-10.391-7.584-16.8-12.405l-23.21-17.154-20.721-15.24L89.4 121.157c-2.613-1.986-7.653-5.671-11.2-8.223L23.506 73.096c-6.471-4.679-8.774-5.671-11.512-4.962l.001-.001zm235.829 4.466c-1.057.708-2.302 2.055-2.737 2.977-.622 1.276-.809 14.673-.746 62.733l.062 61.104 4.915 8.01 10.206 16.871 5.225 8.861.187-62.308 1.057-61.812c.56.212 6.098 4.111 12.321 8.648l43.806 31.97c1.307.991 1.431.708 5.973-9.641l4.667-10.705-1.618-1.346-14.747-10.845-20.844-15.313-36.65-26.864c-5.788-4.182-7.841-4.608-11.077-2.34zm-34.784 196.85l-7.279 15.807-11.511 25.166c.123.141 5.351-3.474 11.697-7.939l18.356-13.042 8.027-5.813c1.057-.922.685-1.701-6.347-13.469l-7.466-12.546-5.477 11.838v-.002z" fill="var(--primary,#dc143c)"/><path d="M376.752 57.145l-4.977 11.2c-1.432 2.907-4.792 10.066-7.468 15.95l-9.955 21.619-25.388 54.583-11.2 24.101-20.658 43.949-11.7 24.81-7.84 16.304c-.809 1.347-.621 1.631-15.679-23.747l-26.072-43.949-22.213-37.71c-8.587-14.815-10.267-16.73-12.322-14.319-.435.566-2.676 8.009-4.978 16.586l-22.711 82.228-13.378 47.494-8.153 29.064-18.232 64.86-12.133 43.382-4.355 16.162c.186 0 3.671-7.443 14.871-31.898l10.578-22.684 8.088-17.013 8.774-18.43 9.771-20.556 7.901-16.659 9.333-19.848 9.957-21.267 10.765-23.038c6.844-14.957 9.397-20.061 10.08-20.273.374-.142 3.485 4.606 6.968 10.562l24.828 41.255 31.981 52.809c5.289 8.932 6.846 11.06 8.153 11.2.87.142 1.929-.212 2.302-.779.685-.851 19.6-65.499 44.054-150.421l25.823-88.889 17.798-62.168c-.125-.141-1.308 2.34-2.615 5.53h.002z" fill="var(--accent,#ffd700)"/><path d="M359.081 153.904l-3.111 11.555c-1.369 4.89-2.302 9.074-2.053 9.287s5.041 3.757 10.703 7.869l33.289 24.314 37.645 27.505 19.601 14.318 6.409 4.536c2.489 1.49 5.538-.991-32.542 26.369l-38.269 27.432-31.236 22.402-33.913 24.456-28.187 20.273-12.134 8.648c-10.019 7.16-19.413 13.681-19.848 13.681-.188 0-.374-14.248-.374-31.757v-31.686l-4.419-7.088-10.019-16.518c-3.111-5.102-5.849-9.356-6.098-9.356s-.375 11.909-.249 26.37l.249 64.223v37.711l2.054 2.623c1.866 2.268 2.489 2.553 4.914 2.553 3.237 0 4.169-.568 18.855-11.202l76.535-55.291 21.78-15.807 120.403-86.411c3.67-2.552 5.102-4.748 5.475-8.434.188-2.409 0-3.971-.746-5.599-1.244-2.623-2.677-3.686-48.908-37.711l-51.023-37.642-14.624-10.774-12.88-9.427c-2.986-2.199-5.724-4.041-6.035-4.041-.374 0-.934 1.206-1.245 2.622l.001-.003z" fill="var(--primary,#dc143c)"/></svg>

package/templates/app-demo/public/manifest.json.example ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "name": "DoNotDev App",
+  "short_name": "DoNotDev",
+  "description": "Built with DoNotDev Framework ©",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": []
+}

package/templates/app-demo/src/App.tsx.example ADDED Viewed

@@ -0,0 +1,17 @@
+// apps/demo/src/App.tsx
+import { BrowserRouter } from 'react-router-dom';
+import { TooltipProvider, Toaster } from '@donotdev/components';
+import { Routes } from './Routes';
+export function App() {
+  return (
+    <BrowserRouter>
+      <TooltipProvider>
+        <Routes />
+        <Toaster />
+      </TooltipProvider>
+    </BrowserRouter>
+  );
+}

package/templates/app-demo/src/Routes.tsx.example ADDED Viewed

@@ -0,0 +1,20 @@
+// apps/demo/src/Routes.tsx
+import { Routes as RouterRoutes, Route } from 'react-router-dom';
+import { LayoutRoute } from './pages/components/LayoutRoute';
+import HomePage from './pages/HomePage';
+import FullPage from './pages/FullPage';
+import DetailPage from './pages/DetailPage';
+export function Routes() {
+  return (
+    <RouterRoutes>
+      <Route element={<LayoutRoute />}>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/component/:id" element={<DetailPage />} />
+        <Route path="/full" element={<FullPage />} />
+      </Route>
+    </RouterRoutes>
+  );
+}

package/templates/app-demo/src/components/ThemeToggle.tsx.example ADDED Viewed

@@ -0,0 +1,48 @@
+// apps/demo/src/components/ThemeToggle.tsx
+import { useEffect, useState } from 'react';
+import { Sun, Moon } from 'lucide-react';
+import { Button } from '@donotdev/components';
+export function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    const root = document.documentElement;
+    const body = document.body;
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
+    root.classList.remove('light', 'dark');
+    body.classList.remove('light', 'dark');
+    root.classList.add(initialTheme);
+    body.classList.add(initialTheme);
+    setIsDark(initialTheme === 'dark');
+  }, []);
+  const toggleTheme = () => {
+    const root = document.documentElement;
+    const body = document.body;
+    const newTheme = isDark ? 'light' : 'dark';
+    root.classList.remove('light', 'dark');
+    body.classList.remove('light', 'dark');
+    root.classList.add(newTheme);
+    body.classList.add(newTheme);
+    localStorage.setItem('theme', newTheme);
+    setIsDark(!isDark);
+  };
+  return (
+    <Button
+      variant="ghost"
+      display="compact"
+      icon={isDark ? Sun : Moon}
+      onClick={toggleTheme}
+      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+    />
+  );
+}

package/templates/app-demo/src/globals.css.example ADDED Viewed

@@ -0,0 +1,4 @@
+/* apps/demo/src/globals.css */
+@import '@donotdev/components/styles';
+@import './themes.css';

package/templates/app-demo/src/main.tsx.example ADDED Viewed

@@ -0,0 +1,27 @@
+// apps/demo/src/main.tsx
+import './globals.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error(
+    'Root element not found. Did you remove the root div from index.html?'
+  );
+}
+// Remove shell loader (fade out then remove)
+const shellLoader = document.getElementById('shell-loader');
+if (shellLoader) {
+  shellLoader.classList.add('shell-loader--fading');
+  window.setTimeout(() => shellLoader.remove(), 300);
+}
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/app-demo/src/pages/DetailPage.tsx.example ADDED Viewed

@@ -0,0 +1,103 @@
+// apps/demo/src/pages/DetailPage.tsx
+import { useMemo } from 'react';
+import { useParams, Navigate } from 'react-router-dom';
+import {
+  Badge,
+  Grid,
+  Stack,
+  Text,
+} from '@donotdev/components';
+import {
+  COMPONENT_CONFIGS,
+  getCSSFamilies,
+  type ComponentConfig,
+} from './components/componentConfig';
+import { ComponentRenderer } from './components/ComponentRenderer';
+export default function DetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const config = useMemo(() => {
+    return COMPONENT_CONFIGS.find((c) => c.id === id);
+  }, [id]);
+  const cssFamilies = getCSSFamilies();
+  if (!config) {
+    return <Navigate to="/" replace />;
+  }
+  const generateVariants = (
+    config: ComponentConfig
+  ): Array<Record<string, any>> => {
+    const variants: Array<Record<string, any>> = [{}];
+    const dimensions = ['variant', 'size', 'tone', 'type', 'side', 'mode'] as const;
+    dimensions.forEach((dim) => {
+      const values = config.variants[dim];
+      if (values?.length) {
+        const newVariants: Array<Record<string, any>> = [];
+        variants.forEach((base) => {
+          values.forEach((value) => {
+            newVariants.push({ ...base, [dim]: value });
+          });
+        });
+        variants.length = 0;
+        variants.push(...newVariants);
+      }
+    });
+    return variants.length > 0 ? variants : [{}];
+  };
+  const allVariants = generateVariants(config);
+  return (
+    <Stack gap="large" align="center">
+      <Stack gap="tight" align="center">
+        <Text level="h2">
+          {config.name}
+        </Text>
+        <Badge variant="outline">
+          {cssFamilies.find((f) => f.id === config.cssFamily)?.label || config.cssFamily}
+        </Badge>
+      </Stack>
+      <Grid
+        cols="auto-fit"
+        minColWidth="320px"
+        gap="large"
+      >
+        {allVariants.map((variantProps, idx) => {
+          const variantLabels = Object.entries(variantProps)
+            .filter(([_, v]) => v)
+            .map(([k, v]) => `${k}: ${v}`);
+          return (
+            <Stack key={idx} gap="medium" align="center">
+              {variantLabels.length > 0 && (
+                <Stack direction="row" gap="tight" wrap="wrap" justify="center">
+                  {variantLabels.map((label) => (
+                    <Badge key={label} variant="secondary">
+                      {label}
+                    </Badge>
+                  ))}
+                </Stack>
+              )}
+              <Stack align="center" justify="center">
+                <ComponentRenderer
+                  config={config}
+                  variantProps={variantProps}
+                />
+              </Stack>
+            </Stack>
+          );
+        })}
+      </Grid>
+    </Stack>
+  );
+}

package/templates/app-demo/src/pages/FullPage.tsx.example ADDED Viewed

@@ -0,0 +1,142 @@
+// apps/demo/src/pages/FullPage.tsx
+import { Rocket, ExternalLink } from 'lucide-react';
+import {
+    Button,
+    CallToAction,
+    Card,
+    Code,
+    Grid,
+    GridArea,
+    HeroSection,
+    Section,
+    Stack,
+    Text,
+} from '@donotdev/components';
+export default function FullPage() {
+    return (
+        <>
+            <HeroSection
+                title="Fullwidht hero section with gradient text"
+                subtitle="This page displays the Sections, Grid, GridArea, Stack and CallToAction layout components that are meant to wrap the other compoennts."
+                badge="This is HeroSection Component"
+            />
+            <Section
+                title="Grid + GridArea Components"
+                subtitle="CSS Grid layout with named areas. GridArea components map to grid template areas. Full-width container."
+            >
+                <Card variant="muted" title="Grid Layout Example">
+                    <Code language="tsx" showLineNumbers={false}>
+{`<Grid
+  areas={\`"header header header"
+  "main main sidebar"
+  "footer footer footer"\`}
+  templateColumns="1fr 3fr 1fr"
+  gap="none"
+>
+  {/* Children */}
+</Grid>`}
+                    </Code>
+                </Card>
+                <Grid
+                    areas={`"header header header"
+"main main sidebar"
+"footer footer footer"`}
+                    templateColumns="1fr 3fr 1fr"
+                    gap="none"
+                >
+                    <GridArea as="header" name="header">
+                        <Section tone="muted" title="Header Area">
+                            <Text variant="muted">Header content (as="header")</Text>
+                        </Section>
+                    </GridArea>
+                    <GridArea as="section" name="main">
+                        <Section title="Main Content Area">
+                            <Text variant="muted">Main content (as="section")</Text>
+                        </Section>
+                    </GridArea>
+                    <GridArea as="aside" name="sidebar">
+                        <Section tone="muted" title="Sidebar Area">
+                            <Text variant="muted">Sidebar content (as="aside")</Text>
+                        </Section>
+                    </GridArea>
+                    <GridArea as="footer" name="footer">
+                        <Section tone="muted" title="Footer Area">
+                            <Text variant="muted">Footer content (as="footer")</Text>
+                        </Section>
+                    </GridArea>
+                </Grid>
+            </Section>
+            <Section
+                title="Stack Component"
+                subtitle="Flexbox layout component. Full-width container."
+            >
+                <Card variant="muted" title="Stack Layout Example">
+                    <Text variant="muted">
+                        Stack creates flex containers. Use direction="row" for horizontal,
+                        default is vertical. Gap controls spacing between items.
+                    </Text>
+                </Card>
+                <Stack gap="medium">
+                    <Card variant="muted" title="Stack Item 1">
+                        <Text variant="muted">Vertical stack with gap="medium"</Text>
+                    </Card>
+                    <Card variant="muted" title="Stack Item 2">
+                        <Text variant="muted">Items stack vertically by default</Text>
+                    </Card>
+                    <Stack direction="row" gap="medium">
+                        <Card variant="muted" title="Row Item 1">
+                            <Text variant="muted">Horizontal stack</Text>
+                        </Card>
+                        <Card variant="muted" title="Row Item 2">
+                            <Text variant="muted">direction="row"</Text>
+                        </Card>
+                    </Stack>
+                </Stack>
+            </Section>
+            <CallToAction
+                title="CallToAction Component"
+                subtitle="Full-width CTA section with gradient background. Constrained by --content-width, centered. Use for conversion sections."
+                primaryAction={
+                    <Button
+                        variant="primary"
+                        fullWidth
+                        icon={ExternalLink}
+                        iconEnd
+                        tooltip="https://donotdev.com/purchase"
+                        onClick={() =>
+                            window.open(
+                                'https://donotdev.com/purchase',
+                                '_blank',
+                                'noopener,noreferrer'
+                            )
+                        }
+                    >
+                        Get Full Framework
+                    </Button>
+                }
+                secondaryAction={
+                    <Button
+                        variant="outline"
+                        icon={ExternalLink}
+                        iconEnd
+                        fullWidth
+                        onClick={() =>
+                            window.open('https://donotdev.com', '_blank', 'noopener,noreferrer')
+                        }
+                        tooltip="https://donotdev.com"
+                    >
+                        Check it more online
+                    </Button>
+                }
+                />
+        </>
+    );
+}