@sntlr/registry-shell 1.0.0 → 1.1.1

package/src/next-app/app/globals.css

@@ -1,329 +1,329 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@plugin "@tailwindcss/typography";
-
-/* Tailwind content scan for the user's registry files. Generated by the CLI
- * from the `paths` declared in sntlr.ui-shell.config.ts — regenerated every
- * `ui-shell dev` / `build` boot. Do not edit _user-sources.css by hand. */
-@import "./_user-sources.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --default-font-family: var(--font-sans);
-  --default-mono-font-family: var(--font-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.426 0.094 161.619);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.525 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.714);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.426 0.094 161.619);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.796 0.125 168.082);
-  --primary-foreground: oklch(0.145 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.796 0.125 168.082);
-  --sidebar-primary-foreground: oklch(0.145 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  html, body {
-    scrollbar-gutter: stable;
-  }
-  body {
-    @apply bg-background text-foreground font-sans;
-  }
-  /* Prevent Radix scroll-lock from causing layout shift */
-  body[data-scroll-locked] {
-    margin-right: 0 !important;
-    scrollbar-gutter: stable;
-  }
-}
-
-/* Minimal scrollbars */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
-}
-
-*::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background: var(--muted-foreground);
-}
-
-.prose pre {
-  @apply bg-muted text-foreground rounded-lg;
-}
-
-.prose code::before,
-.prose code::after {
-  content: none;
-}
-
-.prose :not(pre) > code {
-  @apply bg-muted px-1.5 py-0.5 rounded text-xs font-medium;
-}
-
-.prose a {
-  @apply underline underline-offset-2 decoration-border hover:decoration-foreground transition-colors;
-}
-
-.prose table {
-  @apply w-full text-sm;
-}
-
-.prose th {
-  @apply text-left font-medium px-3 py-2 border-b border-border;
-}
-
-.prose td {
-  @apply px-3 py-2 border-b border-border;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Chart line draw-in animation */
-@keyframes chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
-/* Pair with `pathLength="1"` on the path so the animation is length-agnostic. */
-.chart-line { stroke-dasharray: 1; animation: chart-draw 1.5s ease-out forwards; }
-
-/* Bento chart entry animations — line draws, area fades in, dots pop sequentially */
-@keyframes chart-area-fade { from { opacity: 0; } to { opacity: 1; } }
-@keyframes chart-dot-pop {
-  0%   { opacity: 0; transform: scale(0); }
-  60%  { opacity: 1; transform: scale(1.4); }
-  100% { opacity: 1; transform: scale(1); }
-}
-.chart-area-fade { animation: chart-area-fade 1.4s ease-out 0.4s both; }
-.chart-dot-pop { transform-box: fill-box; transform-origin: center; animation: chart-dot-pop 0.5s ease-out both; }
-
-/* Typing cursor blink */
-@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
-.typing-cursor { animation: cursor-blink 0.8s step-end infinite; }
-
-/* Marquee */
-@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
-@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
-.marquee-track { animation: marquee-left 30s linear infinite; }
-.marquee-track-reverse { animation: marquee-right 30s linear infinite; }
-.marquee-container:hover .marquee-track,
-.marquee-container:hover .marquee-track-reverse { animation-play-state: paused; }
-
-/* Bounce chevron */
-@keyframes bounce-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
-.bounce-gentle { animation: bounce-gentle 2s ease-in-out infinite; }
-
-/* Hero bento card entrance — pre-animation hidden state.
- * The actual animation is driven by the Web Animations API in HeroSection
- * (with a module-level guard) so it's guaranteed to fire exactly once per
- * page load — even under React strict-mode double-mounts or hydration
- * recovery. Cells are kept invisible via this class until the JS effect
- * runs and replaces it with the WAAPI-driven keyframes. */
-.bento-cell-pending { opacity: 0; }
-
-/* Prototyping section — file flying along the conveyor */
-@keyframes proto-fly {
-  0%   { left: 0%;   opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
-  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-  100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
-}
-.proto-fly { animation: proto-fly 2.2s ease-in-out forwards; }
-
-/* Prototyping section — checkmark pop-in for the test list */
-@keyframes proto-check-pop {
-  0%   { opacity: 0; transform: scale(0.4); }
-  60%  { opacity: 1; transform: scale(1.25); }
-  100% { opacity: 1; transform: scale(1); }
-}
-.proto-check-pop { animation: proto-check-pop 0.45s ease-out both; }
-
-/* Prototyping section — neural network node pulse */
-@keyframes proto-node-pulse {
-  0%, 100% { opacity: 0.55; r: 3.5; }
-  50%      { opacity: 1;    r: 5; }
-}
-.proto-node-pulse { animation: proto-node-pulse 1.6s ease-in-out infinite; }
-
-/* Prototyping section — synapse trail (used by stroke-dasharray fired links) */
-@keyframes proto-synapse {
-  0%   { stroke-dashoffset: 1; opacity: 0; }
-  20%  { opacity: 0.9; }
-  100% { stroke-dashoffset: 0; opacity: 0; }
-}
-.proto-synapse { stroke-dasharray: 1; animation: proto-synapse 1.4s ease-out forwards; }
-
-/* Data-table row flash highlights — appear (primary), update (orange), delete (red→fade out) */
-@keyframes row-flash-appear {
-  0%   { background-color: color-mix(in oklch, var(--color-primary) 28%, transparent); }
-  100% { background-color: transparent; }
-}
-@keyframes row-flash-update {
-  0%   { background-color: oklch(0.75 0.18 65 / 0.32); }
-  100% { background-color: transparent; }
-}
-@keyframes row-flash-delete {
-  0%   { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 1; }
-  70%  { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 1; }
-  100% { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 0; }
-}
-.row-flash-appear { animation: row-flash-appear 3s ease-out forwards; }
-.row-flash-update { animation: row-flash-update 3s ease-out forwards; }
-.row-flash-delete { animation: row-flash-delete 1.4s ease-out forwards; pointer-events: none; }
-
-/* Row presence avatar — fades+scales in (and stays visible until removed by JS) */
-@keyframes row-presence-pop {
-  0%   { opacity: 0; transform: translateY(-50%) scale(0.6); }
-  60%  { opacity: 1; transform: translateY(-50%) scale(1.1); }
-  100% { opacity: 1; transform: translateY(-50%) scale(1); }
-}
-.row-presence-pop { animation: row-presence-pop 0.35s ease-out forwards; }
-
-/* Gradient text */
-.text-gradient-primary {
-  color: transparent;
-  background-image: linear-gradient(135deg, var(--color-primary), oklch(0.6 0.15 180));
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-
-/* Skip navigation link */
-.skip-nav {
-  @apply sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:rounded-md focus:bg-background focus:text-foreground focus:border focus:border-border focus:shadow-lg;
-}
-
-/* High contrast mode */
-@media (forced-colors: active) {
-  * { border-color: CanvasText !important; }
-  button, [role="button"] { border: 1px solid ButtonText !important; }
-}
-
-/* Text scaling safety */
-html { font-size: clamp(14px, 1rem, 20px); }
-
-@media print {
-  header, aside, .no-print { display: none !important; }
-  main { width: 100% !important; margin: 0 !important; }
-  pre { white-space: pre-wrap !important; word-break: break-word !important; }
-  * { box-shadow: none !important; }
-}
-
-/* User's optional global CSS — `paths.globalCss` in their config.
- * Generated by the CLI. Imported LAST so user `:root`/`.dark` token
- * overrides cascade-win over the shell's defaults above. Always exists
- * (no-op when unconfigured) so this import never 404s. */
-@import "./_user-global.css";
+@import "tailwindcss";
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+
+/* Tailwind content scan for the user's registry files. Generated by the CLI
+ * from the `paths` declared in sntlr.ui-shell.config.ts — regenerated every
+ * `ui-shell dev` / `build` boot. Do not edit _user-sources.css by hand. */
+@import "./_user-sources.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --default-font-family: var(--font-sans);
+  --default-mono-font-family: var(--font-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.426 0.094 161.619);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.525 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.714);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.426 0.094 161.619);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.796 0.125 168.082);
+  --primary-foreground: oklch(0.145 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.796 0.125 168.082);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html, body {
+    scrollbar-gutter: stable;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+  /* Prevent Radix scroll-lock from causing layout shift */
+  body[data-scroll-locked] {
+    margin-right: 0 !important;
+    scrollbar-gutter: stable;
+  }
+}
+
+/* Minimal scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+}
+
+.prose pre {
+  @apply bg-muted text-foreground rounded-lg;
+}
+
+.prose code::before,
+.prose code::after {
+  content: none;
+}
+
+.prose :not(pre) > code {
+  @apply bg-muted px-1.5 py-0.5 rounded text-xs font-medium;
+}
+
+.prose a {
+  @apply underline underline-offset-2 decoration-border hover:decoration-foreground transition-colors;
+}
+
+.prose table {
+  @apply w-full text-sm;
+}
+
+.prose th {
+  @apply text-left font-medium px-3 py-2 border-b border-border;
+}
+
+.prose td {
+  @apply px-3 py-2 border-b border-border;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Chart line draw-in animation */
+@keyframes chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
+/* Pair with `pathLength="1"` on the path so the animation is length-agnostic. */
+.chart-line { stroke-dasharray: 1; animation: chart-draw 1.5s ease-out forwards; }
+
+/* Bento chart entry animations — line draws, area fades in, dots pop sequentially */
+@keyframes chart-area-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes chart-dot-pop {
+  0%   { opacity: 0; transform: scale(0); }
+  60%  { opacity: 1; transform: scale(1.4); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.chart-area-fade { animation: chart-area-fade 1.4s ease-out 0.4s both; }
+.chart-dot-pop { transform-box: fill-box; transform-origin: center; animation: chart-dot-pop 0.5s ease-out both; }
+
+/* Typing cursor blink */
+@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+.typing-cursor { animation: cursor-blink 0.8s step-end infinite; }
+
+/* Marquee */
+@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
+.marquee-track { animation: marquee-left 30s linear infinite; }
+.marquee-track-reverse { animation: marquee-right 30s linear infinite; }
+.marquee-container:hover .marquee-track,
+.marquee-container:hover .marquee-track-reverse { animation-play-state: paused; }
+
+/* Bounce chevron */
+@keyframes bounce-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
+.bounce-gentle { animation: bounce-gentle 2s ease-in-out infinite; }
+
+/* Hero bento card entrance — pre-animation hidden state.
+ * The actual animation is driven by the Web Animations API in HeroSection
+ * (with a module-level guard) so it's guaranteed to fire exactly once per
+ * page load — even under React strict-mode double-mounts or hydration
+ * recovery. Cells are kept invisible via this class until the JS effect
+ * runs and replaces it with the WAAPI-driven keyframes. */
+.bento-cell-pending { opacity: 0; }
+
+/* Prototyping section — file flying along the conveyor */
+@keyframes proto-fly {
+  0%   { left: 0%;   opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
+  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
+}
+.proto-fly { animation: proto-fly 2.2s ease-in-out forwards; }
+
+/* Prototyping section — checkmark pop-in for the test list */
+@keyframes proto-check-pop {
+  0%   { opacity: 0; transform: scale(0.4); }
+  60%  { opacity: 1; transform: scale(1.25); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.proto-check-pop { animation: proto-check-pop 0.45s ease-out both; }
+
+/* Prototyping section — neural network node pulse */
+@keyframes proto-node-pulse {
+  0%, 100% { opacity: 0.55; r: 3.5; }
+  50%      { opacity: 1;    r: 5; }
+}
+.proto-node-pulse { animation: proto-node-pulse 1.6s ease-in-out infinite; }
+
+/* Prototyping section — synapse trail (used by stroke-dasharray fired links) */
+@keyframes proto-synapse {
+  0%   { stroke-dashoffset: 1; opacity: 0; }
+  20%  { opacity: 0.9; }
+  100% { stroke-dashoffset: 0; opacity: 0; }
+}
+.proto-synapse { stroke-dasharray: 1; animation: proto-synapse 1.4s ease-out forwards; }
+
+/* Data-table row flash highlights — appear (primary), update (orange), delete (red→fade out) */
+@keyframes row-flash-appear {
+  0%   { background-color: color-mix(in oklch, var(--color-primary) 28%, transparent); }
+  100% { background-color: transparent; }
+}
+@keyframes row-flash-update {
+  0%   { background-color: oklch(0.75 0.18 65 / 0.32); }
+  100% { background-color: transparent; }
+}
+@keyframes row-flash-delete {
+  0%   { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 1; }
+  70%  { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 1; }
+  100% { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 0; }
+}
+.row-flash-appear { animation: row-flash-appear 3s ease-out forwards; }
+.row-flash-update { animation: row-flash-update 3s ease-out forwards; }
+.row-flash-delete { animation: row-flash-delete 1.4s ease-out forwards; pointer-events: none; }
+
+/* Row presence avatar — fades+scales in (and stays visible until removed by JS) */
+@keyframes row-presence-pop {
+  0%   { opacity: 0; transform: translateY(-50%) scale(0.6); }
+  60%  { opacity: 1; transform: translateY(-50%) scale(1.1); }
+  100% { opacity: 1; transform: translateY(-50%) scale(1); }
+}
+.row-presence-pop { animation: row-presence-pop 0.35s ease-out forwards; }
+
+/* Gradient text */
+.text-gradient-primary {
+  color: transparent;
+  background-image: linear-gradient(135deg, var(--color-primary), oklch(0.6 0.15 180));
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+/* Skip navigation link */
+.skip-nav {
+  @apply sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:rounded-md focus:bg-background focus:text-foreground focus:border focus:border-border focus:shadow-lg;
+}
+
+/* High contrast mode */
+@media (forced-colors: active) {
+  * { border-color: CanvasText !important; }
+  button, [role="button"] { border: 1px solid ButtonText !important; }
+}
+
+/* Text scaling safety */
+html { font-size: clamp(14px, 1rem, 20px); }
+
+@media print {
+  header, aside, .no-print { display: none !important; }
+  main { width: 100% !important; margin: 0 !important; }
+  pre { white-space: pre-wrap !important; word-break: break-word !important; }
+  * { box-shadow: none !important; }
+}
+
+/* User's optional global CSS — `paths.globalCss` in their config.
+ * Generated by the CLI. Imported LAST so user `:root`/`.dark` token
+ * overrides cascade-win over the shell's defaults above. Always exists
+ * (no-op when unconfigured) so this import never 404s. */
+@import "./_user-global.css";

package/src/next-app/app/page.tsx

@@ -1,5 +1,5 @@
 import { getAllDocs } from "@shell/lib/docs"
-import HomePage from "@user/homepage"
+import HomePage from "@shell/components/homepage"
 
 export default function Home() {
   const docs = getAllDocs()