@tenerife.music/ui 1.1.0 → 1.2.0

package/dist/styles.css

@@ -494,9 +494,6 @@ body {
 .right-0 {
   right: 0;
 }
-.right-1 {
-  right: 0.25rem;
-}
 .right-md {
   right: 1rem;
 }
@@ -602,9 +599,6 @@ body {
 .mb-4 {
   margin-bottom: 1rem;
 }
-.mb-8 {
-  margin-bottom: 2rem;
-}
 .mb-lg {
   margin-bottom: 1.5rem;
 }
@@ -710,15 +704,6 @@ body {
 .hidden {
   display: none;
 }
-.aspect-\[16\/9\] {
-  aspect-ratio: 16/9;
-}
-.aspect-\[4\/3\] {
-  aspect-ratio: 4/3;
-}
-.aspect-square {
-  aspect-ratio: 1 / 1;
-}
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
@@ -1082,9 +1067,6 @@ body {
 .max-w-md {
   max-width: 28rem;
 }
-.max-w-none {
-  max-width: none;
-}
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1336,6 +1318,12 @@ body {
 .resize {
   resize: both;
 }
+.list-inside {
+  list-style-position: inside;
+}
+.list-disc {
+  list-style-type: disc;
+}
 .list-none {
   list-style-type: none;
 }
@@ -1548,9 +1536,6 @@ body {
 .rounded-2xl {
   border-radius: 1rem;
 }
-.rounded-3xl {
-  border-radius: 1.5rem;
-}
 .rounded-\[4px\] {
   border-radius: 4px;
 }
@@ -1635,15 +1620,9 @@ body {
 .border-t {
   border-top-width: 1px;
 }
-.border-solid {
-  border-style: solid;
-}
 .border-dashed {
   border-style: dashed;
 }
-.border-dotted {
-  border-style: dotted;
-}
 .border-none {
   border-style: none;
 }
@@ -1939,6 +1918,9 @@ body {
 .bg-muted {
   background-color: hsl(var(--muted));
 }
+.bg-muted\/30 {
+  background-color: hsl(var(--muted) / 0.3);
+}
 .bg-muted\/50 {
   background-color: hsl(var(--muted) / 0.5);
 }
@@ -2209,18 +2191,12 @@ body {
 .pb-sm {
   padding-bottom: 0.5rem;
 }
-.pl-10 {
-  padding-left: 2.5rem;
-}
 .pl-8 {
   padding-left: 2rem;
 }
 .pl-lg {
   padding-left: 1.5rem;
 }
-.pr-10 {
-  padding-right: 2.5rem;
-}
 .pr-8 {
   padding-right: 2rem;
 }
@@ -2260,6 +2236,17 @@ body {
     Roboto,
     sans-serif;
 }
+.font-mono {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    Courier New,
+    monospace;
+}
 .text-2xl {
   font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
   line-height: 2rem;
@@ -2478,10 +2465,6 @@ body {
 .text-foreground\/95 {
   color: hsl(var(--foreground) / 0.95);
 }
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
-}
 .text-green-700 {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity, 1));
@@ -2568,9 +2551,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
-.text-white\/80 {
-  color: rgb(255 255 255 / 0.8);
-}
 .text-yellow-500 {
   --tw-text-opacity: 1;
   color: rgb(234 179 8 / var(--tw-text-opacity, 1));
@@ -2621,14 +2601,6 @@ body {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.shadow-inner {
-  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -3035,8 +3007,8 @@ body {
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--tm-accent-foreground));
 }
-.hover\:text-accent-foreground\/80:hover {
-  color: hsl(var(--tm-accent-foreground) / 0.8);
+.hover\:text-accent\/80:hover {
+  color: hsl(var(--tm-accent) / 0.8);
 }
 .hover\:text-destructive\/80:hover {
   color: hsl(var(--destructive) / 0.8);
@@ -3044,9 +3016,6 @@ body {
 .hover\:text-foreground:hover {
   color: hsl(var(--foreground));
 }
-.hover\:text-primary:hover {
-  color: hsl(var(--tm-primary));
-}
 .hover\:text-primary\/80:hover {
   color: hsl(var(--tm-primary) / 0.8);
 }
@@ -3077,13 +3046,6 @@ body {
   --tw-scale-y: 1.05;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.focus\:opacity-100:focus {
-  opacity: 1;
-}
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .focus\:outline:focus {
   outline-style: solid;
 }
@@ -3096,14 +3058,6 @@ body {
 .focus\:outline-ring:focus {
   outline-color: hsl(var(--ring));
 }
-.focus\:ring-1:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow),
-    var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
-}
 .focus-visible\:bg-\[hsl\(var\(--accent\)\)\]:focus-visible {
   background-color: hsl(var(--accent));
 }
@@ -3400,21 +3354,6 @@ body {
   .md\:justify-end {
     justify-content: flex-end;
   }
-  .md\:text-3xl {
-    font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
-    line-height: 2.25rem;
-    letter-spacing: -0.05em;
-  }
-  .md\:text-4xl {
-    font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
-    line-height: 2.5rem;
-    letter-spacing: -0.025em;
-  }
-  .md\:text-5xl {
-    font-size: clamp(3rem, 2rem + 5vw, 4rem);
-    line-height: 1;
-    letter-spacing: -0.025em;
-  }
   .md\:text-sm {
     font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
     line-height: 1.25rem;
@@ -3434,16 +3373,6 @@ body {
   .lg\:gap-xl {
     gap: 2rem;
   }
-  .lg\:text-5xl {
-    font-size: clamp(3rem, 2rem + 5vw, 4rem);
-    line-height: 1;
-    letter-spacing: -0.025em;
-  }
-  .lg\:text-6xl {
-    font-size: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
-    line-height: 1;
-    letter-spacing: -0.05em;
-  }
 }
 @media (min-width: 1280px) {
   .xl\:grid-cols-4 {

package/dist/theme/index.cjs

@@ -121,6 +121,74 @@ var init_default = __esm({
   }
 });
 
+// src/themes/--help.ts
+var help_exports = {};
+__export(help_exports, {
+  helpTheme: () => helpTheme
+});
+var helpTheme;
+var init_help = __esm({
+  "src/themes/--help.ts"() {
+    helpTheme = {
+      name: "--help",
+      description: "Custom theme:  Help"
+      // Override primary colors (optional)
+      // primaryColors: {
+      //   500: "210 75% 45%", // HSL format
+      //   600: "210 70% 40%",
+      // },
+      // Override accent colors (optional)
+      // accentColors: {
+      //   500: "285 80% 60%",
+      // },
+      // Override secondary colors (optional)
+      // secondaryColors: {
+      //   500: "170 90% 45%",
+      // },
+      // Override base colors for day mode (optional)
+      // baseColorsDay: {
+      //   background: "0 0% 100%",
+      //   foreground: "0 0% 9%",
+      // },
+      // Override base colors for night mode (optional)
+      // baseColorsNight: {
+      //   background: "240 10% 3.9%",
+      //   foreground: "0 0% 89.8%",
+      // },
+      // Override surface colors for day mode (optional)
+      // surfaceColorsDay: {
+      //   base: "0 0% 100%",
+      //   elevated1: "0 0% 98%",
+      // },
+      // Override surface colors for night mode (optional)
+      // surfaceColorsNight: {
+      //   base: "240 10% 2%",
+      //   elevated1: "240 10% 3%",
+      // },
+      // Override semantic colors for day mode (optional)
+      // semanticColorsDay: {
+      //   success: "145 75% 40%",
+      //   error: "0 84.2% 60.2%",
+      // },
+      // Override semantic colors for night mode (optional)
+      // semanticColorsNight: {
+      //   success: "145 70% 48%",
+      //   error: "0 62.8% 30.6%",
+      // },
+      // Override text colors for day mode (optional)
+      // textColorsDay: {
+      //   primary: "0 0% 9%",
+      //   secondary: "0 0% 45%",
+      // },
+      // Override text colors for night mode (optional)
+      // textColorsNight: {
+      //   primary: "0 0% 89.8%",
+      //   secondary: "0 0% 65%",
+      // },
+    };
+  }
+});
+
 // src/FOUNDATION/tokens/colors.ts
 var primaryColors = {
   50: "210 40% 98%",
@@ -2430,7 +2498,8 @@ function removeBrandOverrides(namespace) {
 var themes = {
   default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
   dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
-  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
+  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme),
+  "--help": () => Promise.resolve().then(() => (init_help(), help_exports)).then((m) => m.helpTheme)
 };
 async function getTheme(name) {
   const themeLoader = themes[name];
@@ -3572,21 +3641,23 @@ function ThemeProvider({
     applyDocumentTheme(initialMode, initialTheme, initialBrand);
     if (typeof document !== "undefined" && document.documentElement) {
       setTimeout(() => {
-        const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
-        fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            location: "ThemeProvider.tsx:289",
-            message: "ThemeProvider useEffect after applyDocumentTheme",
-            data: { afterValue: afterApply, hasValue: !!afterApply },
-            timestamp: Date.now(),
-            sessionId: "debug-session",
-            runId: "run1",
-            hypothesisId: "C"
-          })
-        }).catch(() => {
-        });
+        if (typeof document !== "undefined" && document.documentElement) {
+          const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
+          fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              location: "ThemeProvider.tsx:289",
+              message: "ThemeProvider useEffect after applyDocumentTheme",
+              data: { afterValue: afterApply, hasValue: !!afterApply },
+              timestamp: Date.now(),
+              sessionId: "debug-session",
+              runId: "run1",
+              hypothesisId: "C"
+            })
+          }).catch(() => {
+          });
+        }
       }, 100);
     }
     persistMode(initialMode, storageKey);

package/dist/theme/index.mjs

@@ -115,6 +115,74 @@ var init_default = __esm({
   }
 });
 
+// src/themes/--help.ts
+var help_exports = {};
+__export(help_exports, {
+  helpTheme: () => helpTheme
+});
+var helpTheme;
+var init_help = __esm({
+  "src/themes/--help.ts"() {
+    helpTheme = {
+      name: "--help",
+      description: "Custom theme:  Help"
+      // Override primary colors (optional)
+      // primaryColors: {
+      //   500: "210 75% 45%", // HSL format
+      //   600: "210 70% 40%",
+      // },
+      // Override accent colors (optional)
+      // accentColors: {
+      //   500: "285 80% 60%",
+      // },
+      // Override secondary colors (optional)
+      // secondaryColors: {
+      //   500: "170 90% 45%",
+      // },
+      // Override base colors for day mode (optional)
+      // baseColorsDay: {
+      //   background: "0 0% 100%",
+      //   foreground: "0 0% 9%",
+      // },
+      // Override base colors for night mode (optional)
+      // baseColorsNight: {
+      //   background: "240 10% 3.9%",
+      //   foreground: "0 0% 89.8%",
+      // },
+      // Override surface colors for day mode (optional)
+      // surfaceColorsDay: {
+      //   base: "0 0% 100%",
+      //   elevated1: "0 0% 98%",
+      // },
+      // Override surface colors for night mode (optional)
+      // surfaceColorsNight: {
+      //   base: "240 10% 2%",
+      //   elevated1: "240 10% 3%",
+      // },
+      // Override semantic colors for day mode (optional)
+      // semanticColorsDay: {
+      //   success: "145 75% 40%",
+      //   error: "0 84.2% 60.2%",
+      // },
+      // Override semantic colors for night mode (optional)
+      // semanticColorsNight: {
+      //   success: "145 70% 48%",
+      //   error: "0 62.8% 30.6%",
+      // },
+      // Override text colors for day mode (optional)
+      // textColorsDay: {
+      //   primary: "0 0% 9%",
+      //   secondary: "0 0% 45%",
+      // },
+      // Override text colors for night mode (optional)
+      // textColorsNight: {
+      //   primary: "0 0% 89.8%",
+      //   secondary: "0 0% 65%",
+      // },
+    };
+  }
+});
+
 // src/FOUNDATION/tokens/colors.ts
 var primaryColors = {
   50: "210 40% 98%",
@@ -2424,7 +2492,8 @@ function removeBrandOverrides(namespace) {
 var themes = {
   default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
   dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
-  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
+  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme),
+  "--help": () => Promise.resolve().then(() => (init_help(), help_exports)).then((m) => m.helpTheme)
 };
 async function getTheme(name) {
   const themeLoader = themes[name];
@@ -3566,21 +3635,23 @@ function ThemeProvider({
     applyDocumentTheme(initialMode, initialTheme, initialBrand);
     if (typeof document !== "undefined" && document.documentElement) {
       setTimeout(() => {
-        const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
-        fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            location: "ThemeProvider.tsx:289",
-            message: "ThemeProvider useEffect after applyDocumentTheme",
-            data: { afterValue: afterApply, hasValue: !!afterApply },
-            timestamp: Date.now(),
-            sessionId: "debug-session",
-            runId: "run1",
-            hypothesisId: "C"
-          })
-        }).catch(() => {
-        });
+        if (typeof document !== "undefined" && document.documentElement) {
+          const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
+          fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              location: "ThemeProvider.tsx:289",
+              message: "ThemeProvider useEffect after applyDocumentTheme",
+              data: { afterValue: afterApply, hasValue: !!afterApply },
+              timestamp: Date.now(),
+              sessionId: "debug-session",
+              runId: "run1",
+              hypothesisId: "C"
+            })
+          }).catch(() => {
+          });
+        }
       }, 100);
     }
     persistMode(initialMode, storageKey);

package/dist/tokens/index.cjs

@@ -660,15 +660,16 @@ var BUTTON_TOKENS = {
   /**
    * Icon size within buttons by button size
    * Scales proportionally with button size for visual balance
+   * Contains full SVG selector classes for direct use in CVA
    */
   iconSize: {
-    sm: "size-3.5",
+    sm: "[&_svg]:w-3.5 [&_svg]:h-3.5",
     // 14px (0.875rem) - smaller icon for small buttons
-    md: "size-4",
+    md: "[&_svg]:w-4 [&_svg]:h-4",
     // 16px (1rem) - medium icon for medium buttons
-    lg: "size-5",
+    lg: "[&_svg]:w-5 [&_svg]:h-5",
     // 20px (1.25rem) - larger icon for large buttons
-    icon: "size-4"
+    icon: "[&_svg]:w-4 [&_svg]:h-4"
     // 16px (1rem) - medium icon for icon-only buttons
   },
   /**