@compose-market/theme 0.0.82 → 0.0.91

package/dist/agents/index.d.ts

@@ -38,10 +38,10 @@ export interface ComposeAgentCardProps extends Omit<React.HTMLAttributes<HTMLEle
     status?: "default" | "running";
     interactive?: boolean;
 }
-export declare function ComposeAgentCard({ avatarAlt, avatarFallback, avatarSrc, title, description, badges, metrics, focusLabel, focusValue, focusIcon, tagsTitle, tags, metaRows, footer, actions, headerAction, status, interactive, className, ...props }: ComposeAgentCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComposeAgentCard({ avatarAlt, avatarFallback, avatarSrc, title, description, badges, metrics, focusLabel, focusValue, focusIcon, tagsTitle, tags, metaRows, footer, actions, headerAction, status, interactive, className, ...props }: ComposeAgentCardProps): React.JSX.Element;
 export interface ComposeAgentCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
     showTags?: boolean;
     showFooter?: boolean;
 }
-export declare function ComposeAgentCardSkeleton({ className, showTags, showFooter, ...props }: ComposeAgentCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComposeAgentCardSkeleton({ className, showTags, showFooter, ...props }: ComposeAgentCardSkeletonProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/agents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/agents/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxE;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,eAAe,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAMD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,cAAc,EACd,SAAS,EACT,KAAK,EACL,WAAW,EACX,MAAW,EACX,OAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAmB,EACnB,IAAS,EACT,QAAa,EACb,MAAM,EACN,OAAO,EACP,YAAY,EACZ,MAAkB,EAClB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA8FvB;AAED,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,QAAe,EACf,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,2CAwB/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/agents/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxE;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,eAAe,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAMD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,cAAc,EACd,SAAS,EACT,KAAK,EACL,WAAW,EACX,MAAW,EACX,OAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAmB,EACnB,IAAS,EACT,QAAa,EACb,MAAM,EACN,OAAO,EACP,YAAY,EACZ,MAAkB,EAClB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,qBA8FvB;AAED,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,QAAe,EACf,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,qBAwB/B"}

package/dist/app/index.d.ts

@@ -5,5 +5,5 @@ export interface ComposeAppShellProps extends React.HTMLAttributes<HTMLDivElemen
     gridOffsetY?: number;
     showScanline?: boolean;
 }
-export declare function ComposeAppShell({ children, className, contentClassName, gridOffsetX, gridOffsetY, showScanline, ...props }: ComposeAppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComposeAppShell({ children, className, contentClassName, gridOffsetX, gridOffsetY, showScanline, ...props }: ComposeAppShellProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,WAAe,EACf,WAAe,EACf,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAgBtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,WAAe,EACf,WAAe,EACf,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAgBtB"}

package/dist/app/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const appCss = "/**\n * Compose.Market App Chrome\n * @compose-market/theme/css/app\n */\n\n.cm-app-shell {\n  position: relative;\n  min-height: 100dvh;\n  background: hsl(var(--background));\n  color: hsl(var(--foreground));\n  overflow-x: hidden;\n  overflow-y: hidden;\n  isolation: isolate;\n}\n\n.cm-app-shell__backdrop {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background:\n    radial-gradient(circle at 18% 14%, hsl(var(--primary) / 0.14), transparent 26%),\n    radial-gradient(circle at 82% 12%, hsl(var(--accent) / 0.12), transparent 22%),\n    radial-gradient(circle at 50% 100%, hsl(220 60% 7% / 0.9), transparent 48%),\n    linear-gradient(180deg, hsl(220 50% 4%), hsl(var(--background)) 42%, hsl(223 47% 3%));\n}\n\n.cm-app-shell__grid,\n.cm-app-shell__gradient,\n.cm-app-shell__scanline {\n  position: absolute;\n  inset: 0;\n}\n\n.cm-app-shell__grid {\n  background-size: 48px 48px;\n  background-image:\n    linear-gradient(to right, hsl(188 95% 43% / 0.08) 1px, transparent 1px),\n    linear-gradient(to bottom, hsl(188 95% 43% / 0.08) 1px, transparent 1px);\n  transition: transform 140ms linear;\n  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16));\n}\n\n.cm-app-shell__gradient {\n  background-image:\n    radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.08), transparent 38%),\n    radial-gradient(circle at 55% 18%, hsl(var(--accent) / 0.08), transparent 30%),\n    linear-gradient(180deg, transparent 0%, hsl(var(--background) / 0.18) 36%, hsl(var(--background)) 100%);\n}\n\n.cm-app-shell__scanline {\n  top: -100px;\n  height: 100px;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.07) 50%, rgba(0, 0, 0, 0) 100%);\n  opacity: 0.22;\n  animation: cm-app-scanline 8s linear infinite;\n}\n\n@keyframes cm-app-scanline {\n  0% {\n    transform: translateY(-100px);\n  }\n\n  100% {\n    transform: translateY(calc(100vh + 100px));\n  }\n}\n\n.cm-app-shell__content {\n  position: relative;\n  z-index: 1;\n  min-height: 100dvh;\n}\n";
+export declare const appCss = "/**\n * Compose.Market App Chrome\n * @compose-market/theme/css/app\n */\n\n.cm-app-shell {\n  position: relative;\n  min-height: 100dvh;\n  background: hsl(221 50% 9%);\n  color: hsl(var(--foreground));\n  overflow-x: hidden;\n  overflow-y: hidden;\n  isolation: isolate;\n}\n\n.cm-app-shell__backdrop {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background:\n    radial-gradient(circle at 18% 14%, hsl(var(--primary) / 0.14), transparent 26%),\n    radial-gradient(circle at 82% 12%, hsl(var(--accent) / 0.12), transparent 22%),\n    radial-gradient(circle at 50% 100%, hsl(221 50% 9% / 0.9), transparent 48%),\n    linear-gradient(180deg, hsl(221 55% 5%), hsl(221 50% 9%) 42%, hsl(222 47% 4%));\n}\n\n.cm-app-shell__grid,\n.cm-app-shell__gradient,\n.cm-app-shell__scanline {\n  position: absolute;\n  inset: 0;\n}\n\n.cm-app-shell__grid {\n  background-size: 48px 48px;\n  background-image:\n    linear-gradient(to right, hsl(188 95% 43% / 0.08) 1px, transparent 1px),\n    linear-gradient(to bottom, hsl(188 95% 43% / 0.08) 1px, transparent 1px);\n  transition: transform 140ms linear, opacity 180ms ease;\n  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16));\n  will-change: transform;\n}\n\n.cm-app-shell__gradient {\n  background-image:\n    radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.08), transparent 38%),\n    radial-gradient(circle at 55% 18%, hsl(var(--accent) / 0.08), transparent 30%),\n    linear-gradient(180deg, transparent 0%, hsl(var(--background) / 0.18) 36%, hsl(var(--background)) 100%);\n}\n\n.cm-app-shell__scanline {\n  top: -100px;\n  height: 100px;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.07) 50%, rgba(0, 0, 0, 0) 100%);\n  opacity: 0.22;\n  animation: cm-app-scanline 8s linear infinite;\n  will-change: transform;\n}\n\n@keyframes cm-app-scanline {\n  0% {\n    transform: translateY(-100px);\n  }\n\n  100% {\n    transform: translateY(calc(100vh + 100px));\n  }\n}\n\n.cm-app-shell__content {\n  position: relative;\n  z-index: 1;\n  min-height: 100dvh;\n}\n\n.cm-app-shell--deep .cm-app-shell__backdrop {\n  background:\n    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.09), transparent 34rem),\n    radial-gradient(circle at 16% 46%, hsl(var(--accent) / 0.08), transparent 28rem),\n    linear-gradient(180deg, hsl(222 47% 4%) 0%, hsl(224 36% 13%) 46%, hsl(221 50% 9%) 100%);\n}\n\n.cm-app-shell--luminescent .cm-app-shell__backdrop {\n  background:\n    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.13), transparent 34rem),\n    radial-gradient(circle at 16% 46%, hsl(var(--accent) / 0.1), transparent 28rem),\n    radial-gradient(circle at 84% 36%, hsl(var(--primary) / 0.08), transparent 22rem),\n    linear-gradient(180deg, hsl(222 47% 4%) 0%, hsl(224 36% 13%) 48%, hsl(221 50% 9%) 100%);\n}\n\n.cm-app-shell--luminescent .cm-app-shell__grid {\n  opacity: 0.86;\n  background-size: 44px 44px;\n  animation: cm-app-grid-drift 18s linear infinite;\n  mask-image: radial-gradient(ellipse at 50% 32%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.28) 56%, transparent 100%);\n}\n\n.cm-app-shell--luminescent .cm-app-shell__gradient {\n  background-image:\n    linear-gradient(90deg, rgba(2, 6, 7, 0.78) 0%, transparent 22%, transparent 78%, rgba(2, 6, 7, 0.78) 100%),\n    linear-gradient(180deg, rgba(2, 6, 7, 0.22), transparent 36%, rgba(2, 6, 7, 0.58)),\n    radial-gradient(ellipse at 50% 34%, transparent 17%, rgba(2, 6, 7, 0.24) 54%, rgba(2, 6, 7, 0.86) 100%),\n    radial-gradient(ellipse at 50% 50%, hsl(var(--primary) / 0.08), transparent 28rem);\n}\n\n.cm-app-shell--still .cm-app-shell__grid,\n.cm-app-shell--still .cm-app-shell__scanline {\n  animation: none;\n}\n\n.cm-app-shell--still .cm-app-shell__scanline {\n  opacity: 0;\n}\n\n@keyframes cm-app-grid-drift {\n  from {\n    transform: translate3d(0, 0, 0);\n  }\n\n  to {\n    transform: translate3d(44px, 44px, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cm-app-shell__grid,\n  .cm-app-shell__scanline {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/app/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/app/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,qhEA0ElB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/app/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,+nIAsIlB,CAAC"}

package/dist/app/styles.js

@@ -6,7 +6,7 @@ export const appCss = `/**
 .cm-app-shell {
   position: relative;
   min-height: 100dvh;
-  background: hsl(var(--background));
+  background: hsl(221 50% 9%);
   color: hsl(var(--foreground));
   overflow-x: hidden;
   overflow-y: hidden;
@@ -22,8 +22,8 @@ export const appCss = `/**
   background:
     radial-gradient(circle at 18% 14%, hsl(var(--primary) / 0.14), transparent 26%),
     radial-gradient(circle at 82% 12%, hsl(var(--accent) / 0.12), transparent 22%),
-    radial-gradient(circle at 50% 100%, hsl(220 60% 7% / 0.9), transparent 48%),
-    linear-gradient(180deg, hsl(220 50% 4%), hsl(var(--background)) 42%, hsl(223 47% 3%));
+    radial-gradient(circle at 50% 100%, hsl(221 50% 9% / 0.9), transparent 48%),
+    linear-gradient(180deg, hsl(221 55% 5%), hsl(221 50% 9%) 42%, hsl(222 47% 4%));
 }
 
 .cm-app-shell__grid,
@@ -38,8 +38,9 @@ export const appCss = `/**
   background-image:
     linear-gradient(to right, hsl(188 95% 43% / 0.08) 1px, transparent 1px),
     linear-gradient(to bottom, hsl(188 95% 43% / 0.08) 1px, transparent 1px);
-  transition: transform 140ms linear;
+  transition: transform 140ms linear, opacity 180ms ease;
   mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16));
+  will-change: transform;
 }
 
 .cm-app-shell__gradient {
@@ -55,6 +56,7 @@ export const appCss = `/**
   background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.07) 50%, rgba(0, 0, 0, 0) 100%);
   opacity: 0.22;
   animation: cm-app-scanline 8s linear infinite;
+  will-change: transform;
 }
 
 @keyframes cm-app-scanline {
@@ -72,5 +74,63 @@ export const appCss = `/**
   z-index: 1;
   min-height: 100dvh;
 }
+
+.cm-app-shell--deep .cm-app-shell__backdrop {
+  background:
+    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.09), transparent 34rem),
+    radial-gradient(circle at 16% 46%, hsl(var(--accent) / 0.08), transparent 28rem),
+    linear-gradient(180deg, hsl(222 47% 4%) 0%, hsl(224 36% 13%) 46%, hsl(221 50% 9%) 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__backdrop {
+  background:
+    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.13), transparent 34rem),
+    radial-gradient(circle at 16% 46%, hsl(var(--accent) / 0.1), transparent 28rem),
+    radial-gradient(circle at 84% 36%, hsl(var(--primary) / 0.08), transparent 22rem),
+    linear-gradient(180deg, hsl(222 47% 4%) 0%, hsl(224 36% 13%) 48%, hsl(221 50% 9%) 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__grid {
+  opacity: 0.86;
+  background-size: 44px 44px;
+  animation: cm-app-grid-drift 18s linear infinite;
+  mask-image: radial-gradient(ellipse at 50% 32%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.28) 56%, transparent 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__gradient {
+  background-image:
+    linear-gradient(90deg, rgba(2, 6, 7, 0.78) 0%, transparent 22%, transparent 78%, rgba(2, 6, 7, 0.78) 100%),
+    linear-gradient(180deg, rgba(2, 6, 7, 0.22), transparent 36%, rgba(2, 6, 7, 0.58)),
+    radial-gradient(ellipse at 50% 34%, transparent 17%, rgba(2, 6, 7, 0.24) 54%, rgba(2, 6, 7, 0.86) 100%),
+    radial-gradient(ellipse at 50% 50%, hsl(var(--primary) / 0.08), transparent 28rem);
+}
+
+.cm-app-shell--still .cm-app-shell__grid,
+.cm-app-shell--still .cm-app-shell__scanline {
+  animation: none;
+}
+
+.cm-app-shell--still .cm-app-shell__scanline {
+  opacity: 0;
+}
+
+@keyframes cm-app-grid-drift {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(44px, 44px, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cm-app-shell__grid,
+  .cm-app-shell__scanline {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
 `;
 //# sourceMappingURL=styles.js.map

package/dist/app/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/app/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ErB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/app/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIrB,CAAC"}

package/dist/css/app.css

@@ -6,7 +6,7 @@
 .cm-app-shell {
   position: relative;
   min-height: 100dvh;
-  background: hsl(var(--background));
+  background: hsl(221 50% 9%);
   color: hsl(var(--foreground));
   overflow-x: hidden;
   overflow-y: hidden;
@@ -22,8 +22,8 @@
   background:
     radial-gradient(circle at 18% 14%, hsl(var(--primary) / 0.14), transparent 26%),
     radial-gradient(circle at 82% 12%, hsl(var(--accent) / 0.12), transparent 22%),
-    radial-gradient(circle at 50% 100%, hsl(220 60% 7% / 0.9), transparent 48%),
-    linear-gradient(180deg, hsl(220 50% 4%), hsl(var(--background)) 42%, hsl(223 47% 3%));
+    radial-gradient(circle at 50% 100%, hsl(221 50% 9% / 0.9), transparent 48%),
+    linear-gradient(180deg, hsl(221 55% 5%), hsl(221 50% 9%) 42%, hsl(222 47% 4%));
 }
 
 .cm-app-shell__grid,
@@ -38,8 +38,9 @@
   background-image:
     linear-gradient(to right, hsl(188 95% 43% / 0.08) 1px, transparent 1px),
     linear-gradient(to bottom, hsl(188 95% 43% / 0.08) 1px, transparent 1px);
-  transition: transform 140ms linear;
+  transition: transform 140ms linear, opacity 180ms ease;
   mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16));
+  will-change: transform;
 }
 
 .cm-app-shell__gradient {
@@ -55,6 +56,7 @@
   background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.07) 50%, rgba(0, 0, 0, 0) 100%);
   opacity: 0.22;
   animation: cm-app-scanline 8s linear infinite;
+  will-change: transform;
 }
 
 @keyframes cm-app-scanline {
@@ -72,3 +74,61 @@
   z-index: 1;
   min-height: 100dvh;
 }
+
+.cm-app-shell--deep .cm-app-shell__backdrop {
+  background:
+    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.09), transparent 34rem),
+    radial-gradient(circle at 16% 46%, hsl(var(--accent) / 0.08), transparent 28rem),
+    linear-gradient(180deg, hsl(222 47% 4%) 0%, hsl(224 36% 13%) 46%, hsl(221 50% 9%) 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__backdrop {
+  background:
+    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.13), transparent 34rem),
+    radial-gradient(circle at 16% 46%, hsl(var(--accent) / 0.1), transparent 28rem),
+    radial-gradient(circle at 84% 36%, hsl(var(--primary) / 0.08), transparent 22rem),
+    linear-gradient(180deg, hsl(222 47% 4%) 0%, hsl(224 36% 13%) 48%, hsl(221 50% 9%) 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__grid {
+  opacity: 0.86;
+  background-size: 44px 44px;
+  animation: cm-app-grid-drift 18s linear infinite;
+  mask-image: radial-gradient(ellipse at 50% 32%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.28) 56%, transparent 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__gradient {
+  background-image:
+    linear-gradient(90deg, rgba(2, 6, 7, 0.78) 0%, transparent 22%, transparent 78%, rgba(2, 6, 7, 0.78) 100%),
+    linear-gradient(180deg, rgba(2, 6, 7, 0.22), transparent 36%, rgba(2, 6, 7, 0.58)),
+    radial-gradient(ellipse at 50% 34%, transparent 17%, rgba(2, 6, 7, 0.24) 54%, rgba(2, 6, 7, 0.86) 100%),
+    radial-gradient(ellipse at 50% 50%, hsl(var(--primary) / 0.08), transparent 28rem);
+}
+
+.cm-app-shell--still .cm-app-shell__grid,
+.cm-app-shell--still .cm-app-shell__scanline {
+  animation: none;
+}
+
+.cm-app-shell--still .cm-app-shell__scanline {
+  opacity: 0;
+}
+
+@keyframes cm-app-grid-drift {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(44px, 44px, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cm-app-shell__grid,
+  .cm-app-shell__scanline {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/css/dark.css

@@ -8,31 +8,31 @@
 
 :root {
   /* Colors */
-  --background: 222 47% 3%;
-  --foreground: 210 40% 80%;
-  --card: 222 40% 5%;
-  --card-foreground: 210 30% 75%;
-  --popover: 222 40% 4%;
-  --popover-foreground: 210 30% 75%;
+  --background: 221 50% 9%;
+  --foreground: 230 78% 92%;
+  --card: 224 36% 13%;
+  --card-foreground: 230 78% 92%;
+  --popover: 224 36% 13%;
+  --popover-foreground: 230 78% 92%;
   --primary: 188 95% 43%;
   --primary-foreground: 222 47% 3%;
-  --secondary: 270 60% 20%;
-  --secondary-foreground: 270 80% 90%;
-  --muted: 217 33% 15%;
-  --muted-foreground: 215 16% 47%;
+  --secondary: 226 21% 23%;
+  --secondary-foreground: 230 78% 92%;
+  --muted: 224 36% 13%;
+  --muted-foreground: 229 28% 70%;
   --accent: 292 85% 55%;
-  --accent-foreground: 0 0% 100%;
+  --accent-foreground: 230 78% 92%;
   --destructive: 0 90% 50%;
   --destructive-foreground: 0 0% 100%;
-  --border: 217 33% 15%;
-  --input: 217 33% 10%;
+  --border: 188 95% 43%;
+  --input: 222 47% 7%;
   --ring: 188 95% 43%;
-  --sidebar: 222 47% 3%;
-  --sidebar-foreground: 210 30% 75%;
+  --sidebar: 221 50% 9%;
+  --sidebar-foreground: 230 78% 92%;
   --sidebar-primary: 188 95% 43%;
   --sidebar-primary-foreground: 222 47% 3%;
-  --sidebar-accent: 222 40% 8%;
-  --sidebar-accent-foreground: 210 40% 90%;
-  --sidebar-border: 217 33% 15%;
+  --sidebar-accent: 226 21% 23%;
+  --sidebar-accent-foreground: 230 78% 92%;
+  --sidebar-border: 188 95% 43%;
   --sidebar-ring: 188 95% 43%;
 }