@ttt-productions/theme-core 0.1.16 → 0.1.20

package/README.md

@@ -1,6 +1,6 @@
 # @ttt-productions/theme-core
 
-Shared theme provider + CSS token contract.
+Theme provider + CSS token contract for TTT Productions apps.
 
 ## Install
 ```bash

package/dist/required-tokens.d.ts

@@ -1,3 +1,3 @@
-export declare const REQUIRED_TOKENS: readonly ["--brand-primary", "--brand-secondary", "--brand-accent", "--status-success", "--status-warning", "--status-error", "--neutral-white", "--neutral-black"];
+export declare const REQUIRED_TOKENS: readonly ["--brand-primary", "--brand-secondary", "--brand-accent"];
 export type RequiredToken = (typeof REQUIRED_TOKENS)[number];
 //# sourceMappingURL=required-tokens.d.ts.map

package/dist/required-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"required-tokens.d.ts","sourceRoot":"","sources":["../src/required-tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,qKAWhB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"required-tokens.d.ts","sourceRoot":"","sources":["../src/required-tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,qEAIlB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/required-tokens.js

@@ -2,10 +2,5 @@ export const REQUIRED_TOKENS = [
     "--brand-primary",
     "--brand-secondary",
     "--brand-accent",
-    "--status-success",
-    "--status-warning",
-    "--status-error",
-    "--neutral-white",
-    "--neutral-black"
 ];
 //# sourceMappingURL=required-tokens.js.map

package/dist/required-tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"required-tokens.js","sourceRoot":"","sources":["../src/required-tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,iBAAiB;IACjB,mBAAmB;IACnB,gBAAgB;IAEhB,kBAAkB;IAClB,kBAAkB;IAClB,gBAAgB;IAEhB,iBAAiB;IACjB,iBAAiB;CACT,CAAC"}
+{"version":3,"file":"required-tokens.js","sourceRoot":"","sources":["../src/required-tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,iBAAiB;IACjB,mBAAmB;IACnB,gBAAgB;CACR,CAAC"}

package/dist/styles/components.css

@@ -0,0 +1,633 @@
+@layer components {
+  /* =========================================================
+     FOUNDATIONS (icon + layout bundles) — replaces inline utils
+     ========================================================= */
+
+  /* Icons */
+  .icon-xxs { @apply h-3 w-3; }
+  .icon-xs  { @apply h-4 w-4; }
+  .icon-sm  { @apply h-5 w-5; }
+  .icon-md  { @apply h-6 w-6; }
+  .icon-lg  { @apply h-8 w-8; }
+  .icon-xl  { @apply h-10 w-10; }
+  .icon-2xl { @apply h-12 w-12; }
+
+  /* Spinners */
+  .spinner-xs { @apply icon-xs animate-spin; color: hsl(var(--primary)); }
+  .spinner-sm { @apply icon-sm animate-spin; color: hsl(var(--primary)); }
+  .spinner-md { @apply icon-md animate-spin; color: hsl(var(--primary)); }
+  .spinner-lg { @apply icon-lg animate-spin; color: hsl(var(--primary)); }
+  .spinner-xl { @apply icon-xl animate-spin; color: hsl(var(--primary)); }
+  .spinner-with-gap { @apply mr-2; }
+
+  /* Common centering */
+  .center-row { @apply flex items-center justify-center; }
+  .center-col { @apply flex flex-col items-center justify-center; }
+  .loading-block { @apply center-row py-8; }
+  .loading-block-padded { @apply center-row p-8; }
+  .loading-screen { @apply flex flex-col h-screen-mobile w-screen items-center justify-center bg-background space-y-4; }
+
+  /* Stacks */
+  .stack-1 { @apply space-y-1; }
+  .stack-2 { @apply space-y-2; }
+  .stack-4 { @apply space-y-4; }
+  .stack-6 { @apply space-y-6; }
+
+  /* =========================================================
+     PAGE LAYOUT
+     ========================================================= */
+  .page-container {
+    @apply flex-1 w-full mx-auto py-4;
+  }
+
+  .page-card {
+    @apply w-full bg-card text-card-foreground shadow-xl rounded-lg border-2 border-border;
+  }
+
+  .page-card-header {
+    @apply text-center p-4 sm:p-6 items-center;
+  }
+
+  .page-card-header-left {
+    @apply p-4 sm:p-6 text-left;
+  }
+
+  .page-card-title {
+    @apply text-3xl font-bold text-foreground;
+  }
+
+  .page-card-content {
+    @apply px-2 sm:px-6 pb-4;
+  }
+
+  .inner-card-container {
+    @apply px-4 py-2;
+  }
+
+  /* =========================================================
+     TYPOGRAPHY (high-level)
+     ========================================================= */
+  .text-body {
+    @apply text-sm font-medium;
+    color: hsl(var(--foreground));
+  }
+
+  .text-muted {
+    @apply text-sm font-medium;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .text-caption {
+    @apply text-xs font-medium;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .text-small {
+    @apply text-sm font-bold;
+    color: hsl(var(--foreground));
+  }
+
+  .text-xs-bold {
+    @apply text-xs font-bold;
+    color: hsl(var(--foreground));
+  }
+
+  .text-label {
+    @apply font-bold;
+    color: hsl(var(--foreground));
+  }
+
+  .text-counter {
+    @apply text-sm font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .empty-state-text {
+    @apply text-center py-8 font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .card-description {
+    @apply text-sm font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .input-description {
+    @apply text-xs;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .disclaimer-text {
+    @apply text-sm font-bold text-center;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* Error blocks / inline */
+  .text-error {
+    @apply text-sm font-bold;
+    color: hsl(var(--destructive));
+  }
+
+  .text-error-block {
+    @apply text-center p-4 font-bold rounded-md border;
+    color: hsl(var(--destructive));
+    border-color: hsl(var(--destructive) / 0.5);
+    background-color: hsl(var(--destructive) / 0.10);
+  }
+
+  /* =========================================================
+     LINKS
+     ========================================================= */
+  .auth-link {
+    @apply text-sm underline font-semibold;
+    color: hsl(var(--primary));
+  }
+
+  /* =========================================================
+     CHAT
+     ========================================================= */
+  .chat-date-separator {
+    @apply text-xs font-bold bg-muted px-3 py-1 rounded-full;
+    color: hsl(var(--foreground));
+  }
+
+  /* Status pills (replaces bg-blue-100/text-blue-700 etc.) */
+  .status-pill {
+    @apply text-xs-bold px-2 py-0.5 rounded-full inline-flex items-center;
+  }
+
+  .status-pill--info {
+    background-color: hsl(var(--info) / 0.15);
+    color: hsl(var(--info));
+  }
+
+  .status-pill--success {
+    background-color: hsl(var(--success) / 0.15);
+    color: hsl(var(--success));
+  }
+
+  .status-pill--warning {
+    background-color: hsl(var(--warning) / 0.15);
+    color: hsl(var(--warning));
+  }
+
+  .status-pill--muted {
+    background-color: hsl(var(--muted));
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* High contrast pills: pure B/W */
+  .high-contrast .status-pill--info,
+  .high-contrast .status-pill--success,
+  .high-contrast .status-pill--warning,
+  .high-contrast .status-pill--muted {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    border: 2px solid hsl(var(--border));
+  }
+
+  /* ===================
+    SCREEN ADAPTIVE VIEW
+  =================== */
+    .screen-adaptive-root {
+      @apply flex flex-1 flex-col w-full;
+    }
+  
+    .screen-adaptive-inner {
+      @apply mx-auto w-full;
+    }
+  
+    /* Max width variants */
+    .screen-max-w-none { max-width: none; }
+    .screen-max-w-full { max-width: 100%; }
+  
+    .screen-max-w-sm  { max-width: 24rem; }  /* 384px */
+    .screen-max-w-md  { max-width: 28rem; }  /* 448px */
+    .screen-max-w-lg  { max-width: 32rem; }  /* 512px */
+    .screen-max-w-xl  { max-width: 36rem; }  /* 576px */
+  
+    .screen-max-w-2xl { max-width: 42rem; }  /* 672px */
+    .screen-max-w-3xl { max-width: 48rem; }  /* 768px */
+    .screen-max-w-4xl { max-width: 56rem; }  /* 896px */
+    .screen-max-w-5xl { max-width: 64rem; }  /* 1024px */
+    .screen-max-w-6xl { max-width: 72rem; }  /* 1152px */
+    .screen-max-w-7xl { max-width: 80rem; }  /* 1280px */
+
+  /* =========================================================
+     RULE CARDS
+     ========================================================= */
+  .rule-card {
+    @apply p-4 rounded-lg border-2 border-border bg-card;
+  }
+
+  .rule-card-title {
+    @apply font-bold mb-2;
+    color: hsl(var(--foreground));
+  }
+
+  .rule-card-description {
+    @apply text-sm leading-relaxed font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* =========================================================
+     ACCORDION
+     ========================================================= */
+  .accordion-trigger {
+    @apply p-6 hover:no-underline rounded-t-lg;
+  }
+
+  .accordion-icon-container {
+    @apply p-2 rounded-lg;
+    background-color: hsl(var(--primary) / 0.10);
+    color: hsl(var(--primary));
+  }
+
+  .accordion-title {
+    @apply text-lg font-semibold;
+    color: hsl(var(--foreground));
+  }
+
+  .accordion-content-container {
+    @apply px-6 py-4 rounded-b-lg space-y-4 bg-card;
+  }
+
+  /* =========================================================
+     DETAILS (nested accordions)
+     ========================================================= */
+  .details-summary {
+    @apply flex items-center justify-between cursor-pointer list-none p-4 rounded-lg border-2 border-border bg-card transition-all;
+  }
+
+  .details-summary:hover {
+    border-color: hsl(var(--primary));
+    background-color: hsl(var(--primary) / 0.05);
+  }
+
+  .details-icon-container {
+    @apply p-2 rounded-lg transition-colors;
+    background-color: hsl(var(--primary) / 0.10);
+    color: hsl(var(--primary));
+  }
+
+  .group\/details:hover .details-icon-container {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+
+  .details-title {
+    @apply font-semibold text-base;
+    color: hsl(var(--foreground));
+  }
+
+  .details-chevron {
+    color: hsl(var(--primary));
+  }
+
+  /* =========================================================
+     AGREEMENT LIST ITEMS
+     ========================================================= */
+  .agreement-list-item {
+    @apply flex gap-2 text-sm font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* =========================================================
+     FUTURE PLANS / MEDIA
+     ========================================================= */
+  .future-plan-description {
+    @apply text-base whitespace-pre-wrap leading-relaxed max-w-prose font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .future-plan-media {
+    @apply w-full aspect-video rounded-lg overflow-hidden border;
+    border-color: hsl(var(--border));
+    background-color: hsl(var(--muted));
+  }
+
+  /* Media helpers (replaces repeated w/full/max-w/aspect) */
+  .media-image-sm-centered {
+    @apply w-full h-auto max-w-sm mx-auto;
+  }
+
+  .media-square-centered {
+    @apply w-full max-w-[400px] mx-auto aspect-square rounded-md overflow-hidden;
+    background-color: hsl(var(--muted));
+  }
+
+  .media-wide {
+    @apply w-full aspect-video rounded-lg overflow-hidden border;
+    border-color: hsl(var(--border));
+    background-color: hsl(var(--muted));
+  }
+
+  /* =========================================================
+     INFO SECTIONS
+     ========================================================= */
+  .info-section {
+    @apply flex items-start gap-4;
+  }
+
+  .info-section-icon {
+    @apply mt-1;
+    color: hsl(var(--primary));
+  }
+
+  .info-section-title {
+    @apply font-semibold;
+    color: hsl(var(--foreground));
+  }
+
+  .info-section-description {
+    @apply text-sm font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .info-section-divider {
+    @apply w-full h-px;
+    background-color: hsl(var(--border));
+  }
+
+  .info-section-header {
+    @apply text-lg font-semibold text-center pt-4;
+    color: hsl(var(--foreground));
+  }
+
+  /* =========================================================
+     ATTRIBUTION SECTIONS
+     ========================================================= */
+  .attribution-item {
+    @apply flex items-start gap-4;
+  }
+
+  .attribution-icon {
+    @apply mt-1;
+    color: hsl(var(--primary));
+  }
+
+  .attribution-title {
+    @apply font-semibold;
+    color: hsl(var(--foreground));
+  }
+
+  .attribution-cost {
+    @apply text-sm font-semibold;
+    color: hsl(var(--primary));
+  }
+
+  .attribution-description {
+    @apply text-sm mt-1 font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* =========================================================
+     DEDICATION SECTIONS
+     ========================================================= */
+  .dedication-section {
+    @apply text-center space-y-2;
+  }
+
+  .dedication-header {
+    @apply inline-flex items-center gap-2;
+  }
+
+  .dedication-title {
+    @apply font-semibold text-lg;
+    color: hsl(var(--foreground));
+  }
+
+  .dedication-content {
+    @apply font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* =========================================================
+     DMCA INFO
+     ========================================================= */
+  .dmca-section-title {
+    @apply text-lg font-semibold;
+    color: hsl(var(--foreground));
+  }
+
+  .dmca-info-container {
+    @apply space-y-2 pl-4 border-l-2;
+    border-color: hsl(var(--border));
+  }
+
+  .dmca-info-row {
+    @apply flex flex-col sm:flex-row sm:items-center;
+  }
+
+  .dmca-label {
+    @apply w-full sm:w-40 font-semibold shrink-0;
+    color: hsl(var(--foreground));
+  }
+
+  .dmca-value {
+    @apply break-all font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* =========================================================
+     BUTTONS
+     ========================================================= */
+  .primary-action-button {
+    @apply w-full text-lg py-6;
+  }
+
+  .secondary-action-grid {
+    @apply grid grid-cols-2 md:grid-cols-3 gap-4 mt-6;
+  }
+
+  .secondary-action-button {
+    @apply justify-center;
+  }
+
+  /* =========================================================
+     FOOTER
+     ========================================================= */
+  .app-footer {
+    @apply w-full h-12 flex-shrink-0 bg-secondary pt-4;
+  }
+
+  /* =========================================================
+     CUSTOM FORM ELEMENTS
+     ========================================================= */
+  .form-select-trigger {
+    @apply font-semibold rounded-xl h-11 px-4 shadow-sm border-2;
+    background-color: hsl(var(--background));
+    border-color: hsl(var(--border)) !important;
+    color: hsl(var(--foreground));
+  }
+
+  /* =========================================================
+     SAFE AREA UTILITIES
+     ========================================================= */
+  .fixed-header {
+    padding-top: max(1rem, var(--sat));
+  }
+
+  .fixed-footer {
+    padding-bottom: max(1rem, var(--sab));
+  }
+
+  /* =========================================================
+     LANDING PAGE
+     ========================================================= */
+  .landing-tabs-list {
+    @apply grid w-full grid-cols-2 bg-transparent p-0 gap-2 mb-4;
+  }
+
+  .landing-tab-trigger {
+    @apply flex-1;
+  }
+
+  .landing-section-title {
+    @apply text-xl font-semibold text-center;
+    color: hsl(var(--foreground));
+  }
+
+  .landing-section-description {
+    @apply text-center font-bold;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .landing-video-container {
+    @apply aspect-video w-full rounded-lg overflow-hidden border;
+    border-color: hsl(var(--border));
+    background-color: hsl(var(--muted));
+  }
+
+  /* =========================================================
+     APP HEADER
+     ========================================================= */
+  .app-header {
+    @apply flex items-center h-[60px] shadow-md;
+    background-color: hsl(var(--secondary));
+    border-bottom: 2px solid hsl(var(--border));
+  }
+
+  .app-header-container {
+    @apply flex items-center justify-between w-full px-0.5;
+  }
+
+  .app-header-actions {
+    @apply flex items-center space-x-3;
+  }
+
+  .app-header-menu-button {
+    @apply flex items-center space-x-2 h-10 px-3 rounded-full;
+  }
+
+  .app-dropdown-menu {
+    @apply w-56 border-2;
+    background-color: hsl(var(--card));
+    border-color: hsl(var(--border));
+  }
+
+  .app-dropdown-item {
+    @apply flex items-center cursor-pointer font-bold;
+    color: hsl(var(--foreground)) !important;
+  }
+
+  .app-dropdown-item:hover,
+  .app-dropdown-item:focus {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--accent-foreground)) !important;
+  }
+
+  /* =========================================================
+     POPOVERS
+     ========================================================= */
+  .app-popover {
+    @apply w-80 p-2 border-2;
+    background-color: hsl(var(--card));
+    border-color: hsl(var(--border));
+    color: hsl(var(--card-foreground));
+  }
+
+  /* =========================================================
+     HELP DIALOG
+     ========================================================= */
+  .help-dialog-title {
+    @apply font-semibold;
+    color: hsl(var(--foreground)) !important;
+  }
+
+  .help-dialog-body {
+    font-weight: 700 !important;
+    color: hsl(var(--muted-foreground)) !important;
+  }
+
+  @media (prefers-contrast: more) {
+    .help-dialog-body {
+      color: #ffffff !important;
+    }
+  }
+
+  /* =========================================================
+     FILTER & SORT (GENERIC)
+     ========================================================= */
+  .filter-select-trigger,
+  .sort-select-trigger {
+    @apply w-full sm:w-auto rounded-xl h-11 px-4 font-bold shadow-sm border-2;
+    background-color: hsl(var(--primary));
+    border-color: hsl(var(--border));
+    color: hsl(var(--primary-foreground));
+  }
+
+  .filter-select-content,
+  .sort-select-content {
+    background-color: hsl(var(--popover));
+    border-color: hsl(var(--border));
+    color: hsl(var(--popover-foreground));
+  }
+
+  .filter-select-item,
+  .sort-select-item {
+    @apply font-bold;
+    color: hsl(var(--foreground));
+  }
+
+  .filter-select-item:hover,
+  .sort-select-item:hover {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  /* High contrast behavior */
+  .high-contrast .filter-select-trigger,
+  .high-contrast .sort-select-trigger {
+    background-color: hsl(var(--background));
+    border-color: hsl(var(--border));
+    color: hsl(var(--foreground));
+  }
+
+  .high-contrast .filter-select-content,
+  .high-contrast .sort-select-content {
+    background-color: hsl(var(--background));
+    border-color: hsl(var(--border));
+    color: hsl(var(--foreground));
+  }
+
+  .high-contrast .filter-select-item:hover,
+  .high-contrast .sort-select-item:hover {
+    background-color: hsl(var(--foreground));
+    color: hsl(var(--background));
+  }
+
+  /* =========================================================
+     VIEW TOGGLE (GENERIC)
+     ========================================================= */
+  .view-toggle-container {
+    @apply flex items-center p-1 rounded-xl border-2 shadow-sm;
+    background-color: hsl(var(--muted));
+    border-color: hsl(var(--border));
+  }
+
+  .view-toggle-button {
+    @apply rounded-lg h-8 w-8;
+    color: hsl(var(--foreground));
+  }
+}

package/dist/styles/contract.css

@@ -1,27 +1,30 @@
 @layer base {
-    :root {
-      /* Loud fallbacks: if you see this color, app did not define required brand contract */
-      --brand-primary: 999 100% 50%;
-      --brand-secondary: 999 100% 50%;
-      --brand-accent: 999 100% 50%;
-  
-      --status-success: 999 100% 50%;
-      --status-warning: 999 100% 50%;
-      --status-error: 999 100% 50%;
-  
-      --neutral-white: 0 0% 100%;
-      --neutral-black: 0 0% 0%;
-    }
-  
-    /* High contrast must be pure B/W: override brand tokens too (prevents bleed) */
-    .high-contrast {
-      --brand-primary: 0 0% 0%;
-      --brand-secondary: 0 0% 0%;
-      --brand-accent: 0 0% 100%;
-  
-      --status-success: 0 0% 0%;
-      --status-warning: 0 0% 0%;
-      --status-error: 0 0% 0%;
-    }
+  :root {
+    /* Loud fallbacks: if you see this, app did NOT define required brand tokens */
+    --brand-primary: 999 100% 50%;
+    --brand-secondary: 999 100% 50%;
+    --brand-accent: 999 100% 50%;
+
+    /* Status tokens: OPTIONAL (sane defaults) */
+    --status-success: 140 70% 45%;
+    --status-warning: 45 90% 50%;
+    --status-error: 0 84% 60%;
+    --status-info: 221 83% 53%;
+
+    /* Neutrals */
+    --neutral-white: 0 0% 100%;
+    --neutral-black: 0 0% 0%;
   }
-  
+
+  /* High contrast must be pure B/W: override brand + status tokens too (prevents bleed) */
+  .high-contrast {
+    --brand-primary: 0 0% 0%;
+    --brand-secondary: 0 0% 0%;
+    --brand-accent: 0 0% 100%;
+
+    --status-success: 0 0% 0%;
+    --status-warning: 0 0% 0%;
+    --status-error: 0 0% 0%;
+    --status-info: 0 0% 0%;
+  }
+}

package/dist/styles/hooks.css

@@ -0,0 +1,94 @@
+
+@layer components {
+  /* ===================
+     BUTTONS
+     =================== */
+  .btn-destructive {
+    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
+  }
+
+  /* ===================
+     MESSAGE BUBBLES
+     =================== */
+  .msg-bubble {
+    @apply p-3 rounded-lg;
+  }
+
+  .msg-bubble--mine {
+    background-color: hsl(var(--primary) / 0.10);
+  }
+
+  .msg-bubble--theirs {
+    @apply bg-muted;
+  }
+
+  /* ===================
+     STATUS PILLS
+     =================== */
+  .status-pill {
+    @apply text-xs-bold px-2 py-0.5 rounded-full;
+  }
+
+  /* map to semantic tokens (no blue/yellow/green hardcodes) */
+  .status-pill--open-user {
+    background-color: hsl(var(--info) / 0.15);
+    color: hsl(var(--info-foreground));
+  }
+
+  .status-pill--admin-reply {
+    background-color: hsl(var(--warning) / 0.20);
+    color: hsl(var(--warning-foreground));
+  }
+
+  .status-pill--user-reply {
+    background-color: hsl(var(--success) / 0.18);
+    color: hsl(var(--success-foreground));
+  }
+
+  .status-pill--closed {
+    @apply bg-muted text-muted-foreground;
+  }
+
+  .status-pill--default {
+    @apply bg-muted text-muted-foreground;
+  }
+
+  /* ===================
+     STATUS ICONS
+     =================== */
+  .status-icon {
+    @apply h-5 w-5;
+  }
+
+  .status-icon--success { color: hsl(var(--success)); }
+  .status-icon--warning { color: hsl(var(--warning)); }
+  .status-icon--info    { color: hsl(var(--info)); }
+  .status-icon--error   { color: hsl(var(--destructive)); }
+
+  /* ===================
+     NOTIFICATIONS
+     =================== */
+  .notify-dot {
+    @apply absolute top-1 right-1 h-2 w-2 rounded-full;
+    background-color: hsl(var(--destructive));
+  }
+
+  .notify-empty-icon {
+    color: hsl(var(--success));
+  }
+
+  /* ===================
+     MEDIA PREVIEW
+     =================== */
+  .media-preview {
+    @apply relative w-full h-full;
+  }
+
+  .media-preview--frame {
+    @apply w-full h-auto max-w-sm mx-auto;
+  }
+
+  .media-preview--fullwidth {
+    @apply w-full h-auto;
+  }
+}

package/dist/styles/index.css

@@ -1,3 +1,5 @@
 @import "./contract.css";
 @import "./tokens.css";
 @import "./base.css";
+@import "./hooks.css";
+/* components.css is a separate entrypoint: @ttt-productions/theme-core/components.css */

package/dist/styles/tokens.css

@@ -1,82 +1,105 @@
 @layer base {
-    :root {
-      /* Semantic tokens (default = light) */
-      --background: var(--neutral-white);
-      --foreground: var(--neutral-black);
-  
-      --card: var(--neutral-white);
-      --card-foreground: var(--neutral-black);
-  
-      --popover: var(--neutral-white);
-      --popover-foreground: var(--neutral-black);
-  
-      --muted: 0 0% 95%;
-      --muted-foreground: var(--neutral-black);
-  
-      --accent: var(--brand-accent);
-      --accent-foreground: var(--neutral-black);
-  
-      --primary: var(--brand-primary);
-      --primary-foreground: var(--neutral-white);
-  
-      --secondary: var(--brand-secondary);
-      --secondary-foreground: var(--neutral-white);
-  
-      --destructive: var(--status-error);
-      --destructive-foreground: var(--neutral-white);
-  
-      --border: var(--brand-primary);
-      --ring: var(--brand-primary);
-  
-      --radius: 1rem;
-    }
-  
-    .dark {
-      /* Keep semantic token mapping; apps can override brand tokens per-mode if they want */
-      --background: 240 6% 10%;
-      --foreground: 0 0% 100%;
-  
-      --card: 240 6% 12%;
-      --card-foreground: 0 0% 100%;
-  
-      --popover: 240 6% 12%;
-      --popover-foreground: 0 0% 100%;
-  
-      --muted: 240 4% 20%;
-      --muted-foreground: 0 0% 100%;
-  
-      --border: 0 0% 100%;
-      --ring: 0 0% 100%;
-    }
-  
-    .high-contrast {
-      /* You already had this approach in master-app and it’s correct: pure B/W semantic tokens */
-      --background: 0 0% 0%;
-      --foreground: 0 0% 100%;
-  
-      --card: 0 0% 0%;
-      --card-foreground: 0 0% 100%;
-  
-      --popover: 0 0% 0%;
-      --popover-foreground: 0 0% 100%;
-  
-      --muted: 0 0% 0%;
-      --muted-foreground: 0 0% 100%;
-  
-      --accent: 0 0% 0%;
-      --accent-foreground: 0 0% 100%;
-  
-      --primary: 0 0% 100%;
-      --primary-foreground: 0 0% 0%;
-  
-      --secondary: 0 0% 100%;
-      --secondary-foreground: 0 0% 0%;
-  
-      --destructive: 0 0% 100%;
-      --destructive-foreground: 0 0% 0%;
-  
-      --border: 0 0% 100%;
-      --ring: 0 0% 100%;
-    }
+  :root {
+    /* Semantic tokens (default = light) */
+    --background: var(--neutral-white);
+    --foreground: var(--neutral-black);
+
+    --card: var(--neutral-white);
+    --card-foreground: var(--neutral-black);
+
+    --popover: var(--neutral-white);
+    --popover-foreground: var(--neutral-black);
+
+    --muted: 0 0% 95%;
+    --muted-foreground: 0 0% 25%;
+
+    --accent: var(--brand-accent);
+    --accent-foreground: var(--neutral-black);
+
+    --primary: var(--brand-primary);
+    --primary-foreground: var(--neutral-white);
+
+    --secondary: var(--brand-secondary);
+    --secondary-foreground: var(--neutral-white);
+
+    --destructive: var(--status-error);
+    --destructive-foreground: var(--neutral-white);
+
+    /* Extra semantic status colors (used by pills/toasts/etc.) */
+    --success: var(--status-success);
+    --success-foreground: var(--neutral-white);
+
+    --warning: var(--status-warning);
+    --warning-foreground: var(--neutral-black);
+
+    --info: var(--status-info);
+    --info-foreground: var(--neutral-white);
+
+    --border: var(--brand-primary);
+    --ring: var(--brand-primary);
+
+    --radius: 1rem;
   }
-  
+
+  .dark {
+    /* Dark base (brand tokens are still app-controlled) */
+    --background: 240 6% 10%;
+    --foreground: 0 0% 100%;
+
+    --card: 240 6% 12%;
+    --card-foreground: 0 0% 100%;
+
+    --popover: 240 6% 12%;
+    --popover-foreground: 0 0% 100%;
+
+    --muted: 240 4% 20%;
+    --muted-foreground: 0 0% 85%;
+
+    --border: 0 0% 100%;
+    --ring: 0 0% 100%;
+
+    /* status foregrounds still reasonable in dark */
+    --success-foreground: 0 0% 0%;
+    --warning-foreground: 0 0% 0%;
+    --info-foreground: 0 0% 0%;
+  }
+
+  .high-contrast {
+    /* Pure B/W semantic tokens */
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+
+    --card: 0 0% 0%;
+    --card-foreground: 0 0% 100%;
+
+    --popover: 0 0% 0%;
+    --popover-foreground: 0 0% 100%;
+
+    --muted: 0 0% 0%;
+    --muted-foreground: 0 0% 100%;
+
+    --accent: 0 0% 0%;
+    --accent-foreground: 0 0% 100%;
+
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 0%;
+
+    --secondary: 0 0% 100%;
+    --secondary-foreground: 0 0% 0%;
+
+    --destructive: 0 0% 100%;
+    --destructive-foreground: 0 0% 0%;
+
+    --success: 0 0% 100%;
+    --success-foreground: 0 0% 0%;
+
+    --warning: 0 0% 100%;
+    --warning-foreground: 0 0% 0%;
+
+    --info: 0 0% 100%;
+    --info-foreground: 0 0% 0%;
+
+    --border: 0 0% 100%;
+    --ring: 0 0% 100%;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ttt-productions/theme-core",
-    "version": "0.1.16",
+    "version": "0.1.20",
     "description": "Theme provider + CSS token contract for TTT Productions apps",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -13,7 +13,8 @@
             "types": "./dist/index.d.ts",
             "default": "./dist/index.js"
         },
-        "./styles.css": "./dist/styles/index.css"
+        "./styles.css": "./dist/styles/index.css",
+        "./components.css": "./dist/styles/components.css"
     },
     "scripts": {
         "build": "tsc && rm -rf dist/styles && mkdir -p dist/styles && cp -R src/styles/* dist/styles/",
@@ -39,7 +40,10 @@
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/ttt-productions/ttt-packages.git",
+        "url": "git+https://github.com/ttt-productions/ttt-packages.git",
         "directory": "packages/theme-core"
-    }
+    },
+    "sideEffects": [
+        "**/*.css"
+    ]
 }