@ttt-productions/media-viewer 0.10.13 → 0.10.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttt-productions/media-viewer",
-  "version": "0.10.13",
+  "version": "0.10.15",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ttt-productions/ttt-packages.git",
@@ -33,14 +33,14 @@
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "@ttt-productions/media-schemas": "^0.14.6",
-    "@ttt-productions/ui-core": "^0.11.16"
+    "@ttt-productions/media-schemas": "^0.14.7",
+    "@ttt-productions/ui-core": "^0.11.19"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lucide-react": "^1.30.0",
-    "react-intersection-observer": ">=9.0.0"
+    "react-intersection-observer": ">=11.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -58,8 +58,7 @@
   },
   "devDependencies": {
     "lucide-react": "^1.30.0",
-    "react-intersection-observer": "^9.13.0",
-    "typescript": "^5.8.3"
+    "react-intersection-observer": "^11.0.1"
   },
   "author": "DJ (TTT Productions)",
   "license": "MIT"

package/src/styles/media-viewer.css

@@ -2,9 +2,9 @@
 
 /* Skeleton fallback (CSS-only, for environments without ui-core) */
 .mv-skeleton {
-  background: hsl(var(--muted, 220 14% 96%));
+  background: hsl(var(--muted));
   animation: mv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  border-radius: var(--radius, 0.375rem);
+  border-radius: var(--radius);
 }
 
 @keyframes mv-pulse {
@@ -19,7 +19,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: hsl(var(--destructive, 0 84% 60%) / 0.1);
+  background: hsl(var(--destructive) / 0.1);
 }
 
 .mv-error-fallback svg {
@@ -27,7 +27,7 @@
   height: 50%;
   max-width: 4rem;
   max-height: 4rem;
-  color: hsl(var(--destructive, 0 84% 60%) / 0.8);
+  color: hsl(var(--destructive) / 0.8);
 }
 
 /* Empty fallback */
@@ -37,7 +37,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: hsl(var(--muted, 220 14% 96%));
+  background: hsl(var(--muted));
 }
 
 /* Pending state: the URL is still being prepared. Same seat as the empty state,
@@ -48,7 +48,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: hsl(var(--muted, 220 14% 96%));
+  background: hsl(var(--muted));
 }
 
 .mv-empty-fallback svg {
@@ -56,7 +56,7 @@
   height: 50%;
   max-width: 4rem;
   max-height: 4rem;
-  color: hsl(var(--muted-foreground, 220 9% 46%));
+  color: hsl(var(--muted-foreground));
 }
 
 /* Avatar/circular empty fallback */
@@ -67,9 +67,9 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: hsl(var(--muted, 220 14% 96%));
+  background: hsl(var(--muted));
   font-size: 1.125rem;
-  color: hsl(var(--muted-foreground, 220 9% 46%));
+  color: hsl(var(--muted-foreground));
 }
 
 /* Video error state */
@@ -80,12 +80,12 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: hsl(var(--muted, 220 14% 96%));
-  border-radius: var(--radius, 0.375rem);
+  background: hsl(var(--muted));
+  border-radius: var(--radius);
 }
 
 .mv-video-error p {
-  color: hsl(var(--muted-foreground, 220 9% 46%));
+  color: hsl(var(--muted-foreground));
   font-size: 0.875rem;
 }
 
@@ -100,7 +100,7 @@
 
 /* ---------------------------------------------------------------------------
    Canonical audio player chrome (AudioViewer / AudioPlayer).
-   Semantic classes with token fallbacks; apps re-skin freely.
+   Semantic classes reading theme-core tokens; apps re-skin freely.
    --------------------------------------------------------------------------- */
 .mv-player {
   display: flex;
@@ -108,18 +108,18 @@
   gap: 0.375rem;
   width: 100%;
   padding: 0.5rem;
-  background: hsl(var(--card, 0 0% 100%));
-  border: 1px solid hsl(var(--border, 220 13% 91%));
-  border-radius: var(--radius, 0.375rem);
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
 }
 
 .mv-player-viz {
   position: relative;
   width: 100%;
   height: 6rem;
-  color: hsl(var(--primary, 262 83% 58%));
-  background: hsl(var(--muted, 220 14% 96%) / 0.5);
-  border-radius: calc(var(--radius, 0.375rem) - 2px);
+  color: hsl(var(--primary));
+  background: hsl(var(--muted) / 0.5);
+  border-radius: calc(var(--radius) - 2px);
   overflow: hidden;
 }
 
@@ -145,14 +145,14 @@
   height: 2rem;
   padding: 0;
   border: none;
-  border-radius: calc(var(--radius, 0.375rem) - 2px);
+  border-radius: calc(var(--radius) - 2px);
   background: transparent;
-  color: hsl(var(--foreground, 224 71% 4%));
+  color: hsl(var(--foreground));
   cursor: pointer;
 }
 
 .mv-player-btn:hover {
-  background: hsl(var(--muted, 220 14% 96%));
+  background: hsl(var(--muted));
 }
 
 .mv-player-btn svg {
@@ -161,7 +161,7 @@
 }
 
 .mv-player-play-btn {
-  color: hsl(var(--primary, 262 83% 58%));
+  color: hsl(var(--primary));
 }
 
 .mv-player-mode-btn {
@@ -170,7 +170,7 @@
   right: 0.25rem;
   width: 1.5rem;
   height: 1.5rem;
-  color: hsl(var(--muted-foreground, 220 9% 46%));
+  color: hsl(var(--muted-foreground));
 }
 
 .mv-player-mode-btn svg {
@@ -182,19 +182,19 @@
   flex-shrink: 0;
   font-size: 0.75rem;
   font-variant-numeric: tabular-nums;
-  color: hsl(var(--muted-foreground, 220 9% 46%));
+  color: hsl(var(--muted-foreground));
 }
 
 .mv-player-seek {
   flex: 1 1 auto;
   min-width: 2rem;
-  accent-color: hsl(var(--primary, 262 83% 58%));
+  accent-color: hsl(var(--primary));
 }
 
 .mv-player-volume {
   flex: 0 1 4rem;
   min-width: 2.5rem;
-  accent-color: hsl(var(--primary, 262 83% 58%));
+  accent-color: hsl(var(--primary));
 }
 
 .mv-player-extra {
@@ -209,13 +209,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: hsl(var(--muted, 220 14% 96%));
-  border-radius: var(--radius, 0.375rem);
+  background: hsl(var(--muted));
+  border-radius: var(--radius);
   padding: 1rem;
   height: 3.5rem;
 }
 
 .mv-audio-error p {
-  color: hsl(var(--destructive, 0 84% 60%));
+  color: hsl(var(--destructive));
   font-size: 0.75rem;
 }