@jacshuo/onyx 2.3.0 → 2.4.0

package/dist/styles/Extras/CinePlayer.css

@@ -1 +1,63 @@
-@import "../../../styles/components/CinePlayer.css";
+/* ── CinePlayer animations & design tokens ──────────── */
+
+@keyframes cp-controls-up {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes cp-curtain-open {
+  from { clip-path: inset(0 50% 0 50%); opacity: 0; }
+  to   { clip-path: inset(0 0 0 0); opacity: 1; }
+}
+
+@keyframes cp-curtain-close {
+  from { clip-path: inset(0 0 0 0); opacity: 1; }
+  to   { clip-path: inset(0 50% 0 50%); opacity: 0; }
+}
+
+@keyframes cp-cinema-in {
+  from { background: rgba(0,0,0,0); }
+  to   { background: rgba(0,0,0,0.92); }
+}
+
+@keyframes cp-cinema-out {
+  from { background: rgba(0,0,0,0.92); }
+  to   { background: rgba(0,0,0,0); }
+}
+
+@keyframes cp-playlist-in {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes cp-playlist-out {
+  from { transform: translateX(0); opacity: 1; }
+  to   { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes cp-track-transition {
+  0%   { filter: brightness(0); transform: scale(1.05); }
+  50%  { filter: brightness(0); }
+  100% { filter: brightness(1); transform: scale(1); }
+}
+
+@keyframes cp-volume-wave {
+  0%   { transform: scaleX(0); opacity: 1; }
+  100% { transform: scaleX(1); opacity: 0; }
+}
+
+/* ── CinePlayer design tokens ───────────── */
+
+:root {
+  --cp-bg:             #000000;
+  --cp-panel-bg:       rgba(0,0,0,0.85);
+  --cp-text:           rgba(255,255,255,0.75);
+  --cp-text-muted:     rgba(255,255,255,0.50);
+  --cp-text-strong:    #ffffff;
+  --cp-border:         rgba(255,255,255,0.10);
+  --cp-surface:        rgba(255,255,255,0.05);
+  --cp-surface-hover:  rgba(255,255,255,0.10);
+  --cp-overlay:        rgba(0,0,0,0.30);
+  --cp-seek-track:     rgba(255,255,255,0.20);
+  --cp-seek-buffer:    rgba(255,255,255,0.15);
+}

package/dist/styles/Extras/FileExplorer.css

@@ -1 +1,39 @@
-@import "../../../styles/components/FileExplorer.css";
+/* ── FileExplorer design tokens ──────────── */
+
+:root {
+  --fe-bg:             linear-gradient(145deg, rgba(255,255,255,0.99), rgba(248,248,252,0.98));
+  --fe-shadow:         0 4px 30px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
+  --fe-text:           var(--color-primary-600);
+  --fe-text-strong:    var(--color-primary-900);
+  --fe-text-muted:     var(--color-primary-400);
+  --fe-border:         rgba(0,0,0,0.06);
+  --fe-surface:        rgba(0,0,0,0.015);
+  --fe-surface-hover:  rgba(0,0,0,0.04);
+  --fe-input-bg:       var(--color-primary-50);
+  --fe-input-border:   var(--color-primary-200);
+  --fe-btn-color:      rgba(0,0,0,0.45);
+  --fe-btn-hover:      rgba(0,0,0,0.80);
+  --fe-btn-hover-bg:   rgba(0,0,0,0.06);
+  --fe-badge-bg:       var(--color-primary-100);
+  --fe-dock-bg:        linear-gradient(135deg, color-mix(in srgb, var(--fe-accent, #8b5cf6) 12%, white), rgba(255,255,255,0.95));
+  --fe-dock-shadow:    0 0 15px color-mix(in srgb, var(--fe-accent, #8b5cf6) 15%, transparent);
+}
+
+.dark {
+  --fe-bg:             linear-gradient(145deg, rgba(10,10,18,0.97), rgba(15,12,28,0.98));
+  --fe-shadow:         0 4px 60px rgba(0,0,0,0.50), 0 0 1px var(--fe-accent, #8b5cf6), inset 0 1px 0 rgba(255,255,255,0.05);
+  --fe-text:           rgba(255,255,255,0.70);
+  --fe-text-strong:    #ffffff;
+  --fe-text-muted:     rgba(255,255,255,0.30);
+  --fe-border:         rgba(255,255,255,0.06);
+  --fe-surface:        rgba(255,255,255,0.02);
+  --fe-surface-hover:  rgba(255,255,255,0.06);
+  --fe-input-bg:       rgba(255,255,255,0.05);
+  --fe-input-border:   rgba(255,255,255,0.08);
+  --fe-btn-color:      rgba(255,255,255,0.50);
+  --fe-btn-hover:      rgba(255,255,255,0.90);
+  --fe-btn-hover-bg:   rgba(255,255,255,0.08);
+  --fe-badge-bg:       rgba(255,255,255,0.05);
+  --fe-dock-bg:        linear-gradient(135deg, color-mix(in srgb, var(--fe-accent, #8b5cf6) 20%, black), rgba(0,0,0,0.85));
+  --fe-dock-shadow:    0 0 20px color-mix(in srgb, var(--fe-accent, #8b5cf6) 30%, transparent);
+}

package/dist/styles/Extras/FilmReel.css

@@ -1 +1,24 @@
-@import "../../../styles/components/FilmReel.css";
+/* ── FilmReel: cinematic gallery animations ─────────── */
+
+@keyframes film-grain-shift {
+  0%, 100% { transform: translate(0, 0); }
+  20% { transform: translate(-2%, 3%); }
+  40% { transform: translate(3%, -2%); }
+  60% { transform: translate(-1%, -3%); }
+  80% { transform: translate(2%, 2%); }
+}
+
+@keyframes lightbox-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes lightbox-photo-in {
+  from { opacity: 0; transform: scale(0.88); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes reveal-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/dist/styles/Extras/MiniPlayer.css

@@ -1 +1,84 @@
-@import "../../../styles/components/MiniPlayer.css";
+/* ── MiniPlayer animations & design tokens ──────────── */
+
+@keyframes mp-enter-bottom {
+  from { opacity: 0; transform: translateY(100%) scale(0.92); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes mp-exit-bottom {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(100%) scale(0.92); }
+}
+
+@keyframes mp-enter-top {
+  from { opacity: 0; transform: translateY(-100%) scale(0.92); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes mp-exit-top {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(-100%) scale(0.92); }
+}
+
+@keyframes mp-enter-left {
+  from { opacity: 0; transform: translateX(-100%) scale(0.92); }
+  to   { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@keyframes mp-exit-left {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to   { opacity: 0; transform: translateX(-100%) scale(0.92); }
+}
+
+@keyframes mp-enter-right {
+  from { opacity: 0; transform: translateX(100%) scale(0.92); }
+  to   { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@keyframes mp-exit-right {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to   { opacity: 0; transform: translateX(100%) scale(0.92); }
+}
+
+@keyframes mp-vinyl-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes mp-pulse-ring {
+  0%   { transform: scale(1); opacity: 0.5; }
+  70%  { transform: scale(1.25); opacity: 0; }
+  100% { transform: scale(1.25); opacity: 0; }
+}
+
+@keyframes mp-progress-glow {
+  0%, 100% { filter: brightness(1); }
+  50%      { filter: brightness(1.4); }
+}
+
+@keyframes mp-eq-bar {
+  0%   { transform: scaleY(0.3); }
+  100% { transform: scaleY(1); }
+}
+
+/* ── MiniPlayer design tokens ───────────── */
+
+:root {
+  --mp-bg:             rgba(255,255,255,0.90);
+  --mp-text:           var(--color-primary-900);
+  --mp-text-muted:     var(--color-primary-500);
+  --mp-border:         rgba(148,163,184,0.60);
+  --mp-surface:        rgba(148,163,184,0.50);
+  --mp-surface-hover:  rgba(241,245,249,0.60);
+  --mp-dock-strip:     rgba(148,163,184,0.40);
+}
+
+.dark {
+  --mp-bg:             rgba(26,22,37,0.95);
+  --mp-text:           #ffffff;
+  --mp-text-muted:     rgba(255,255,255,0.50);
+  --mp-border:         rgba(255,255,255,0.10);
+  --mp-surface:        rgba(255,255,255,0.10);
+  --mp-surface-hover:  rgba(255,255,255,0.05);
+  --mp-dock-strip:     rgba(255,255,255,0.20);
+}

package/dist/styles/Extras/TypewriterText.css

@@ -24,6 +24,18 @@
   }
 }
 
+/* ── Image fade-in for rich mode ─────────────────────────── */
+@keyframes tw-img-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* ── Base cursor element ─────────────────────────────────── */
 .tw-cursor {
   display: inline-block;
@@ -53,3 +65,245 @@
   animation: tw-cursor-out 0.6s ease-out forwards;
   pointer-events: none;
 }
+
+/* ═══════════════════════════════════════════════════════════
+   RICH MODE — prose-style Markdown rendering
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Prose container ─────────────────────────────────────── */
+.tw-rich-prose {
+  font-size: 0.875rem;
+  line-height: 1.75;
+  color: var(--color-primary-900);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.dark .tw-rich-prose {
+  color: var(--color-primary-100);
+}
+
+/* ── Headings ────────────────────────────────────────────── */
+.tw-rich-prose h1,
+.tw-rich-prose h2,
+.tw-rich-prose h3,
+.tw-rich-prose h4,
+.tw-rich-prose h5,
+.tw-rich-prose h6 {
+  font-weight: 700;
+  line-height: 1.3;
+  margin-top: 1.25rem;
+  margin-bottom: 0.375rem;
+  color: var(--color-primary-950);
+}
+
+.dark .tw-rich-prose h1,
+.dark .tw-rich-prose h2,
+.dark .tw-rich-prose h3,
+.dark .tw-rich-prose h4,
+.dark .tw-rich-prose h5,
+.dark .tw-rich-prose h6 {
+  color: var(--color-primary-50);
+}
+
+.tw-rich-prose h1 {
+  font-size: 1.5rem;
+}
+.tw-rich-prose h2 {
+  font-size: 1.25rem;
+}
+.tw-rich-prose h3 {
+  font-size: 1.125rem;
+}
+.tw-rich-prose h4 {
+  font-size: 1rem;
+}
+.tw-rich-prose h5,
+.tw-rich-prose h6 {
+  font-size: 0.875rem;
+}
+
+/* ── Paragraphs ──────────────────────────────────────────── */
+.tw-rich-prose p {
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+.tw-rich-prose p:first-child {
+  margin-top: 0;
+}
+
+.tw-rich-prose p:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Inline code ─────────────────────────────────────────── */
+.tw-rich-prose :not(pre) > code {
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-700);
+  padding: 0.1em 0.35em;
+  border-radius: 0.25rem;
+  font-size: 0.8125em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.dark .tw-rich-prose :not(pre) > code {
+  background-color: var(--color-primary-800);
+  color: var(--color-primary-200);
+}
+
+/* ── Fenced code blocks ──────────────────────────────────── */
+.tw-rich-prose pre {
+  background-color: var(--color-primary-100);
+  border-radius: 0.5rem;
+  padding: 0.875rem 1rem;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+  font-size: 0.8125rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  line-height: 1.6;
+}
+
+.dark .tw-rich-prose pre {
+  background-color: var(--color-primary-800);
+}
+
+.tw-rich-prose pre > code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 0;
+}
+
+/* ── Blockquotes ─────────────────────────────────────────── */
+.tw-rich-prose blockquote {
+  border-left: 3px solid var(--color-primary-400);
+  padding: 0.375rem 0 0.375rem 1rem;
+  margin: 0.75rem 0;
+  color: var(--color-primary-600);
+  font-style: italic;
+}
+
+.dark .tw-rich-prose blockquote {
+  border-left-color: var(--color-primary-500);
+  color: var(--color-primary-400);
+}
+
+/* ── Lists ───────────────────────────────────────────────── */
+.tw-rich-prose ul,
+.tw-rich-prose ol {
+  padding-left: 1.5rem;
+  margin: 0.5rem 0;
+}
+
+.tw-rich-prose ul {
+  list-style: disc;
+}
+
+.tw-rich-prose ol {
+  list-style: decimal;
+}
+
+.tw-rich-prose li {
+  margin: 0.25rem 0;
+}
+
+.tw-rich-prose li > ul,
+.tw-rich-prose li > ol {
+  margin: 0.125rem 0 0.125rem 0.25rem;
+}
+
+/* ── Horizontal rule ─────────────────────────────────────── */
+.tw-rich-prose hr {
+  border: none;
+  border-top: 1px solid var(--color-primary-200);
+  margin: 1.25rem 0;
+}
+
+.dark .tw-rich-prose hr {
+  border-top-color: var(--color-primary-700);
+}
+
+/* ── Links ───────────────────────────────────────────────── */
+.tw-rich-prose a {
+  color: var(--color-primary-600);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.tw-rich-prose a:hover {
+  color: var(--color-primary-800);
+}
+
+.dark .tw-rich-prose a {
+  color: var(--color-primary-400);
+}
+
+.dark .tw-rich-prose a:hover {
+  color: var(--color-primary-200);
+}
+
+/* ── strong / em baseline ────────────────────────────────── */
+.tw-rich-prose strong {
+  font-weight: 700;
+}
+
+.tw-rich-prose em {
+  font-style: italic;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   RICH MODE — image rendering
+   ═══════════════════════════════════════════════════════════ */
+
+/* Figure wrapper */
+.tw-rich-img-wrap {
+  display: block;
+  margin: 0.875rem 0;
+}
+
+/* Actual image */
+.tw-rich-img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
+  animation: tw-img-fade-in 0.4s ease-out both;
+}
+
+.dark .tw-rich-img {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
+}
+
+/* Error state overlay (hidden by default) */
+.tw-rich-img-error {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-400);
+  font-size: 0.75rem;
+  font-style: normal;
+  text-align: center;
+  min-height: 80px;
+  max-width: 100%;
+}
+
+.dark .tw-rich-img-error {
+  background-color: var(--color-primary-800);
+  color: var(--color-primary-500);
+}
+
+/* Toggle error state via JS class added by the image error handler */
+.tw-rich-img-wrap--error .tw-rich-img {
+  display: none;
+}
+
+.tw-rich-img-wrap--error .tw-rich-img-error {
+  display: flex;
+}

package/dist/styles/Primitives/DropdownButton.css

@@ -1 +1,26 @@
-@import "../Dropdown/Dropdown.css";
+:root {
+  --animate-dropdown-item-in: dropdown-item-in 200ms ease-out both;
+  --animate-dropdown-item-out: dropdown-item-out 150ms ease-in both;
+  --animate-dropdown-container-in: dropdown-container-in 150ms ease-out both;
+  --animate-dropdown-container-out: dropdown-container-out 120ms ease-in both;
+}
+
+@keyframes dropdown-item-in {
+  from { opacity: 0; transform: perspective(400px) rotateX(-50deg); transform-origin: top center; }
+  to { opacity: 1; transform: perspective(400px) rotateX(0deg); transform-origin: top center; }
+}
+
+@keyframes dropdown-item-out {
+  from { opacity: 1; transform: perspective(400px) rotateX(0deg); transform-origin: top center; }
+  to { opacity: 0; transform: perspective(400px) rotateX(-50deg); transform-origin: top center; }
+}
+
+@keyframes dropdown-container-in {
+  from { opacity: 0; transform: scaleY(0.96); transform-origin: top center; }
+  to { opacity: 1; transform: scaleY(1); transform-origin: top center; }
+}
+
+@keyframes dropdown-container-out {
+  from { opacity: 1; transform: scaleY(1); transform-origin: top center; }
+  to { opacity: 0; transform: scaleY(0.96); transform-origin: top center; }
+}

package/dist/styles/base.css

@@ -877,6 +877,9 @@
   .min-h-52 {
     min-height: calc(var(--spacing) * 52);
   }
+  .min-h-64 {
+    min-height: calc(var(--spacing) * 64);
+  }
   .min-h-\[2\.5rem\] {
     min-height: 2.5rem;
   }

package/dist/styles.css

@@ -886,6 +886,9 @@
   .min-h-52 {
     min-height: calc(var(--spacing) * 52);
   }
+  .min-h-64 {
+    min-height: calc(var(--spacing) * 64);
+  }
   .min-h-\[2\.5rem\] {
     min-height: 2.5rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacshuo/onyx",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Cross-platform React UI component library — works in web & Electron",
   "type": "module",
   "main": "dist/index.cjs",
@@ -137,6 +137,7 @@
     "null-loader": "^4.0.1",
     "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
     "postcss-loader": "^8.2.1",
     "prettier": "^3.8.1",
     "react": "^19.2.4",