@compose-market/theme 0.0.2 → 0.0.4

package/dist/css/dark.css

@@ -0,0 +1,38 @@
+/**
+ * Compose.Market Dark Theme
+ * @compose-market/theme
+ * 
+ * Cyberpunk-inspired dark theme with neon accents.
+ * DO NOT EDIT - This file is generated from the theme package.
+ */
+
+: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%;
+  --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%;
+  --accent: 292 85% 55%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 90% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 217 33% 15%;
+  --input: 217 33% 10%;
+  --ring: 188 95% 43%;
+  --sidebar: 222 47% 3%;
+  --sidebar-foreground: 210 30% 75%;
+  --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-ring: 188 95% 43%;
+}

package/dist/css/index.css

@@ -0,0 +1,10 @@
+/**
+ * Compose.Market Theme System
+ * @compose-market/theme/css
+ * 
+ * Import this file for the complete theme (dark by default).
+ */
+
+@import './tokens.css';
+@import './dark.css';
+@import './shell.css';

package/dist/css/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * CSS Custom Properties Generator
+ *
+ * This file is the source for generating CSS. The actual CSS files
+ * are generated via the build script, but we also export static
+ * templates that can be used directly.
+ */
+import { darkTheme } from '../themes/dark';
+export declare function generateThemeCss(theme: typeof darkTheme, themeName: string): string;
+export declare function generateFontCss(): string;
+export declare function generateRadiusCss(): string;
+export declare const baseTokensCss: string;
+export declare const darkThemeCss: string;
+export declare const lightThemeCss: string;
+export declare const indexCss = "/**\n * Compose.Market Theme System\n * @compose-market/theme/css\n * \n * Import this file for the complete theme (dark by default).\n * For light mode support, also import ./light.css\n */\n\n@import './tokens.css';\n@import './dark.css';\n@import './shell.css';\n";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAanF;AAED,wBAAgB,eAAe,IAAI,MAAM,CASxC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAS1C;AAED,eAAO,MAAM,aAAa,QAazB,CAAC;AAEF,eAAO,MAAM,YAAY,QAaxB,CAAC;AAEF,eAAO,MAAM,aAAa,QAiBzB,CAAC;AAEF,eAAO,MAAM,QAAQ,+QAWpB,CAAC"}

package/dist/css/index.js

@@ -0,0 +1,97 @@
+/**
+ * CSS Custom Properties Generator
+ *
+ * This file is the source for generating CSS. The actual CSS files
+ * are generated via the build script, but we also export static
+ * templates that can be used directly.
+ */
+import { fontFamilies } from '../tokens/typography';
+import { radius } from '../tokens/radius';
+import { darkTheme } from '../themes/dark';
+import { lightTheme } from '../themes/light';
+export function generateThemeCss(theme, themeName) {
+    const lines = [];
+    lines.push(`/* Compose.Market Theme: ${themeName} */`);
+    lines.push(`/* Generated from @compose-market/theme */`);
+    lines.push('');
+    for (const [key, value] of Object.entries(theme)) {
+        const cssVarName = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+        lines.push(`  ${cssVarName}: ${value};`);
+    }
+    return lines.join('\n');
+}
+export function generateFontCss() {
+    const lines = [];
+    lines.push('/* Typography */');
+    for (const font of Object.values(fontFamilies)) {
+        lines.push(`  ${font.cssVar}: ${font.value}, ${font.fallback};`);
+    }
+    return lines.join('\n');
+}
+export function generateRadiusCss() {
+    const lines = [];
+    lines.push('/* Border Radius */');
+    for (const r of Object.values(radius)) {
+        lines.push(`  ${r.cssVar}: ${r.value};`);
+    }
+    return lines.join('\n');
+}
+export const baseTokensCss = `/**
+ * Compose.Market Design Tokens
+ * @compose-market/theme
+ * 
+ * DO NOT EDIT - This file is generated from the theme package.
+ * Source: backend/services/packages/theme/src/css/tokens.css
+ */
+
+:root {
+${generateFontCss()}
+
+${generateRadiusCss()}
+}
+`;
+export const darkThemeCss = `/**
+ * Compose.Market Dark Theme
+ * @compose-market/theme
+ * 
+ * Cyberpunk-inspired dark theme with neon accents.
+ * DO NOT EDIT - This file is generated from the theme package.
+ */
+
+:root {
+${generateThemeCss(darkTheme, 'dark')}
+}
+
+/* Dark mode is default - no @media query needed */
+`;
+export const lightThemeCss = `/**
+ * Compose.Market Light Theme
+ * @compose-market/theme
+ * 
+ * Clean, professional light theme.
+ * DO NOT EDIT - This file is generated from the theme package.
+ */
+
+:root {
+${generateThemeCss(lightTheme, 'light')}
+}
+
+/* Light mode activation via class or data attribute */
+.light,
+[data-theme="light"] {
+${generateThemeCss(lightTheme, 'light').split('\n').slice(3).join('\n')}
+}
+`;
+export const indexCss = `/**
+ * Compose.Market Theme System
+ * @compose-market/theme/css
+ * 
+ * Import this file for the complete theme (dark by default).
+ * For light mode support, also import ./light.css
+ */
+
+@import './tokens.css';
+@import './dark.css';
+@import './shell.css';
+`;
+//# sourceMappingURL=index.js.map

package/dist/css/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,UAAU,gBAAgB,CAAC,KAAuB,EAAE,SAAiB;IACzE,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,4BAA4B,SAAS,KAAK,CAAC,CAAC;IACvD,KAAK,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;IACzD,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;QACvE,KAAK,CAAC,IAAI,CAAC,KAAK,UAAU,KAAK,KAAK,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/B,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC;QAC/C,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAClC,KAAK,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;QACtC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;EAS3B,eAAe,EAAE;;EAEjB,iBAAiB,EAAE;;CAEpB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;EAS1B,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC;;;;CAIpC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;EAS3B,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;;;;;;EAMrC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;CAEtE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;CAWvB,CAAC"}

package/dist/css/light.css

@@ -0,0 +1,70 @@
+/**
+ * Compose.Market Light Theme
+ * @compose-market/theme
+ * 
+ * Clean, professional light theme.
+ * DO NOT EDIT - This file is generated from the theme package.
+ */
+
+:root {
+  /* Colors */
+  --background: 0 0% 100%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 188 95% 43%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 292 85% 55%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 188 95% 43%;
+  --sidebar: 0 0% 98%;
+  --sidebar-foreground: 222 47% 11%;
+  --sidebar-primary: 188 95% 43%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 210 40% 96%;
+  --sidebar-accent-foreground: 222 47% 11%;
+  --sidebar-border: 214 32% 91%;
+  --sidebar-ring: 188 95% 43%;
+}
+
+/* Light mode activation */
+.light,
+[data-theme="light"] {
+  --background: 0 0% 100%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 188 95% 43%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 292 85% 55%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 188 95% 43%;
+  --sidebar: 0 0% 98%;
+  --sidebar-foreground: 222 47% 11%;
+  --sidebar-primary: 188 95% 43%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 210 40% 96%;
+  --sidebar-accent-foreground: 222 47% 11%;
+  --sidebar-border: 214 32% 91%;
+  --sidebar-ring: 188 95% 43%;
+}

package/dist/css/shell.css

@@ -0,0 +1,414 @@
+/**
+ * Compose.Market Shared Shell
+ * @compose-market/theme/css/shell
+ */
+
+:root {
+  --cm-shell-glow-primary: hsl(var(--primary) / 0.32);
+  --cm-shell-glow-accent: hsl(314 100% 64% / 0.18);
+  --cm-shell-surface: linear-gradient(180deg, hsl(var(--card) / 0.9), hsl(var(--background) / 0.92));
+  --cm-shell-border: hsl(var(--border) / 0.78);
+  --cm-shell-shadow:
+    0 24px 72px hsl(240 30% 2% / 0.45),
+    inset 0 1px 0 hsl(0 0% 100% / 0.05);
+}
+
+.cm-shell-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cm-shell-cluster {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.cm-shell-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+  min-height: 2.5rem;
+  padding: 0 1rem;
+  border-radius: 0.55rem;
+  border: 1px solid transparent;
+  background: transparent;
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans), sans-serif;
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    transform 180ms ease,
+    background-color 180ms ease,
+    border-color 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.cm-shell-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.cm-shell-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.cm-shell-button--primary {
+  background:
+    linear-gradient(135deg, hsl(var(--primary) / 0.9), hsl(314 100% 64% / 0.78));
+  color: hsl(var(--primary-foreground));
+  border-color: hsl(var(--primary) / 0.42);
+  box-shadow: 0 0 24px var(--cm-shell-glow-primary);
+}
+
+.cm-shell-button--primary:hover:not(:disabled) {
+  box-shadow:
+    0 0 30px var(--cm-shell-glow-primary),
+    0 0 22px var(--cm-shell-glow-accent);
+}
+
+.cm-shell-button--secondary {
+  background: hsl(var(--muted) / 0.32);
+  border-color: hsl(var(--border) / 0.88);
+}
+
+.cm-shell-button--secondary:hover:not(:disabled) {
+  border-color: hsl(var(--primary) / 0.4);
+  background: hsl(var(--muted) / 0.52);
+}
+
+.cm-shell-button--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: hsl(var(--muted-foreground));
+}
+
+.cm-shell-button--ghost:hover:not(:disabled) {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted) / 0.2);
+}
+
+.cm-shell-button--danger {
+  background: hsl(var(--destructive) / 0.12);
+  border-color: hsl(var(--destructive) / 0.3);
+  color: hsl(var(--destructive-foreground));
+}
+
+.cm-shell-button--danger:hover:not(:disabled) {
+  background: hsl(var(--destructive) / 0.2);
+}
+
+.cm-shell-button--sm {
+  min-height: 2rem;
+  padding: 0 0.8rem;
+  font-size: 0.78rem;
+}
+
+.cm-shell-button--lg {
+  min-height: 2.9rem;
+  padding: 0 1.15rem;
+}
+
+.cm-shell-button--icon {
+  width: 2.5rem;
+  padding: 0;
+}
+
+.cm-shell-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 1.9rem;
+  padding: 0 0.8rem;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--border) / 0.72);
+  background: hsl(var(--muted) / 0.28);
+  color: hsl(var(--muted-foreground));
+  font-size: 0.76rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.cm-shell-pill strong,
+.cm-shell-pill span {
+  color: inherit;
+}
+
+.cm-shell-panel {
+  border: 1px solid var(--cm-shell-border);
+  border-radius: 1rem;
+  background: var(--cm-shell-surface);
+  box-shadow: var(--cm-shell-shadow);
+  backdrop-filter: blur(14px);
+}
+
+.cm-shell-panel--muted {
+  background:
+    linear-gradient(180deg, hsl(var(--muted) / 0.38), hsl(var(--background) / 0.84));
+}
+
+.cm-shell-panel--ghost {
+  background: transparent;
+  box-shadow: none;
+}
+
+.cm-shell-panel__body {
+  padding: 1.2rem;
+}
+
+.cm-shell-page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.35rem 1.45rem;
+}
+
+.cm-shell-page-header__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.cm-shell-page-header__eyebrow {
+  color: hsl(var(--primary));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.76rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.cm-shell-page-header__title {
+  color: hsl(var(--foreground));
+  font-family: var(--font-display), sans-serif;
+  font-size: clamp(1.2rem, 2vw, 1.65rem);
+  letter-spacing: 0.02em;
+}
+
+.cm-shell-page-header__subtitle {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.92rem;
+  max-width: 56rem;
+}
+
+.cm-shell-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: 0.8rem;
+}
+
+.cm-shell-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.9rem 1rem;
+}
+
+.cm-shell-stat__label {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.76rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.cm-shell-stat__value {
+  color: hsl(var(--foreground));
+  font-family: var(--font-display), sans-serif;
+  font-size: 1.1rem;
+}
+
+.cm-shell-stat__hint {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.78rem;
+}
+
+.cm-shell-tab-strip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem;
+  border: 1px solid hsl(var(--border) / 0.75);
+  border-radius: 999px;
+  background: hsl(var(--muted) / 0.16);
+}
+
+.cm-shell-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.35rem;
+  padding: 0 1rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.76rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    background-color 180ms ease,
+    color 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.cm-shell-tab:hover {
+  color: hsl(var(--foreground));
+}
+
+.cm-shell-tab[data-active="true"] {
+  background: linear-gradient(135deg, hsl(var(--primary) / 0.22), hsl(314 100% 64% / 0.18));
+  border-color: hsl(var(--primary) / 0.34);
+  color: hsl(var(--foreground));
+  box-shadow: 0 0 22px hsl(var(--primary) / 0.18);
+}
+
+.cm-shell-notice {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.9rem 1rem;
+  border-radius: 0.9rem;
+  border: 1px solid;
+}
+
+.cm-shell-notice--info {
+  background: hsl(var(--primary) / 0.08);
+  border-color: hsl(var(--primary) / 0.22);
+  color: hsl(var(--foreground));
+}
+
+.cm-shell-notice--success {
+  background: hsl(148 75% 24% / 0.18);
+  border-color: hsl(148 75% 46% / 0.3);
+  color: hsl(var(--foreground));
+}
+
+.cm-shell-notice--warning {
+  background: hsl(42 100% 48% / 0.12);
+  border-color: hsl(42 100% 52% / 0.25);
+  color: hsl(var(--foreground));
+}
+
+.cm-shell-notice--error {
+  background: hsl(var(--destructive) / 0.13);
+  border-color: hsl(var(--destructive) / 0.28);
+  color: hsl(var(--foreground));
+}
+
+.cm-shell-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.15rem;
+}
+
+.cm-shell-banner__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.cm-shell-banner__title {
+  color: hsl(var(--foreground));
+  font-weight: 700;
+}
+
+.cm-shell-banner__subtitle {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.9rem;
+}
+
+.cm-shell-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  min-height: 18rem;
+  padding: 2.4rem 1.5rem;
+  text-align: center;
+}
+
+.cm-shell-empty__icon {
+  color: hsl(var(--primary));
+}
+
+.cm-shell-empty__title {
+  color: hsl(var(--foreground));
+  font-family: var(--font-display), sans-serif;
+  font-size: 1.2rem;
+}
+
+.cm-shell-empty__description {
+  color: hsl(var(--muted-foreground));
+  max-width: 38rem;
+}
+
+.cm-shell-modal-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: hsl(240 30% 2% / 0.68);
+  backdrop-filter: blur(10px);
+  z-index: 100;
+}
+
+.cm-shell-modal {
+  width: min(100%, 46rem);
+  max-height: min(90vh, 56rem);
+  overflow: auto;
+}
+
+.cm-shell-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem 1.3rem 0;
+}
+
+.cm-shell-modal__title {
+  color: hsl(var(--foreground));
+  font-family: var(--font-display), sans-serif;
+  font-size: 1.1rem;
+}
+
+.cm-shell-modal__subtitle {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.92rem;
+  margin-top: 0.35rem;
+}
+
+.cm-shell-modal__body {
+  padding: 1.2rem 1.3rem 1.3rem;
+}
+
+@media (max-width: 720px) {
+  .cm-shell-page-header,
+  .cm-shell-banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .cm-shell-stat-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .cm-shell-tab-strip {
+    width: 100%;
+    overflow-x: auto;
+  }
+}

package/dist/css/tokens.css

@@ -0,0 +1,24 @@
+/**
+ * Compose.Market Design Tokens
+ * @compose-market/theme
+ * 
+ * DO NOT EDIT - This file is generated from the theme package.
+ */
+
+:root {
+  /* Typography */
+  --font-display: "Orbitron", sans-serif;
+  --font-sans: "Rajdhani", sans-serif;
+  --font-mono: "Fira Code", monospace;
+
+  /* Border Radius */
+  --radius-none: 0;
+  --radius-sm: 0.125rem;
+  --radius: 0.25rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+}

package/dist/index.d.ts

@@ -1,12 +1,14 @@
+/**
+ * @compose-market/theme
+ *
+ * Official design tokens and theme system for Compose.Market
+ */
 export * from './tokens';
 export * from './themes';
-export * from './utils';
+export * from './shell';
 import { tokens, type DesignTokens } from './tokens';
 import { themes, defaultTheme, getTheme, getThemeColors, type ThemeName, type Theme } from './themes';
 export { tokens, themes, defaultTheme, getTheme, getThemeColors, type ThemeName, type Theme, type DesignTokens, };
-export * from './components/ui';
-export * from './components/brand';
-export { type SessionState as SessionStateType, type ComposeKeyRecord, type SessionActions, type SessionBudgetDialogProps, type SessionStatusCardProps, type SessionIndicatorProps, type SessionManageDialogProps, type ComposeKeyDialogProps, BUDGET_PRESETS, SessionBudgetDialog, SessionStatusCard, SessionIndicator, } from './components/session';
-export declare const packageVersion = "0.0.2";
+export declare const packageVersion = "1.0.0";
 export declare const packageName = "@compose-market/theme";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAEtG,OAAO,EACL,MAAM,EACN,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,KAAK,SAAS,EACd,KAAK,KAAK,EACV,KAAK,YAAY,GAClB,CAAC;AAEF,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EACL,KAAK,YAAY,IAAI,gBAAgB,EACrC,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,cAAc,UAAU,CAAC;AACtC,eAAO,MAAM,WAAW,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAEtG,OAAO,EACL,MAAM,EACN,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,KAAK,SAAS,EACd,KAAK,KAAK,EACV,KAAK,YAAY,GAClB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAU,CAAC;AACtC,eAAO,MAAM,WAAW,0BAA0B,CAAC"}