devnonla-ui 0.1.0

package/src/styles.css

@@ -0,0 +1,897 @@
+@import "highlight.js/styles/github.css";
+
+/**
+ * NonlaUI theme — single source of color.
+ *
+ * Light-only. Warm paper + charcoal ink, amber brand.
+ * Override `--nonla-*` knobs in the consuming app (CSS or `<App theme>`).
+ * Components read only these tokens — never edit Button/Tag/… to retheme.
+ */
+
+:root,
+.dark,
+.nonla-ui {
+  color-scheme: light;
+
+  /* ── Knobs (override these) ──────────────────────────────────────────── */
+  --nonla-bg: #fffcf1;
+  --nonla-fg: #1f1f1e;
+  /* Text rank on cream — same ink, contrast steps ~13.6 / 7 / 4.5 / 3 (WCAG AAA body → AA body → AA UI). */
+  --nonla-fg-muted: color-mix(in oklab, var(--nonla-fg) 78%, var(--nonla-bg));
+  --nonla-fg-tertiary: color-mix(in oklab, var(--nonla-fg) 64%, var(--nonla-bg));
+  --nonla-fg-quaternary: color-mix(in oklab, var(--nonla-fg) 50%, var(--nonla-bg));
+  --nonla-brand: #eb9d29;
+  /* Ink on brand fills — charcoal, not white (white fails WCAG on amber). */
+  --nonla-solid-fg: var(--nonla-fg);
+  --nonla-danger: #c0392b;
+  --nonla-success: #1f9d55;
+  --nonla-warn: #c47d12;
+  --nonla-link: var(--nonla-brand);
+  --nonla-radius: 8px;
+  --nonla-height: 32px;
+  --nonla-height-sm: 24px;
+  --nonla-height-lg: 40px;
+
+  --nonla-ink: var(--nonla-fg);
+  --nonla-surface: #ffffff;
+  --nonla-elevated: var(--nonla-surface);
+  --nonla-chip: color-mix(in oklab, var(--nonla-fg) 5%, var(--nonla-bg));
+  --nonla-chip-hover: color-mix(in oklab, var(--nonla-fg) 9%, var(--nonla-bg));
+  --nonla-border: color-mix(in oklab, var(--nonla-fg) 7%, var(--nonla-bg));
+  --nonla-input: color-mix(in oklab, var(--nonla-fg) 12%, var(--nonla-bg));
+  --nonla-composer: var(--nonla-surface);
+  --nonla-chat-bg: #fcfcfc;
+
+  /* Neutral frost — blur shows whatever sits behind, no page-tint */
+  --nonla-meadow: #4f7a32;
+  --nonla-glass: color-mix(in srgb, white 58%, transparent);
+  --nonla-glass-bar: color-mix(in srgb, white 28%, transparent);
+  --nonla-glass-menu: color-mix(in srgb, white 48%, transparent);
+  --nonla-glass-border: color-mix(in srgb, white 62%, transparent);
+  --nonla-glass-highlight: color-mix(in srgb, white 70%, transparent);
+  --nonla-ink-hover: color-mix(in srgb, var(--nonla-ink) 6%, transparent);
+  --nonla-ink-active: color-mix(in srgb, var(--nonla-ink) 8%, transparent);
+  --nonla-ink-line: color-mix(in srgb, var(--nonla-ink) 14%, transparent);
+  --nonla-desktop-bar-height: 42px;
+
+  /* Preset accents — Button color="blue" / Tag color="purple" / … */
+  --nonla-blue: #1677ff;
+  --nonla-purple: #722ed1;
+  --nonla-cyan: #13c2c2;
+  --nonla-green: #0ac864;
+  --nonla-magenta: #eb2f96;
+  --nonla-pink: #eb2f96;
+  --nonla-red: #ef4444;
+  --nonla-orange: #fa8c16;
+  --nonla-yellow: #fadb14;
+  --nonla-volcano: #fa541c;
+  --nonla-geekblue: #2f54eb;
+  --nonla-lime: #a0d911;
+  --nonla-gold: #faad14;
+
+  /* ── Derived map (do not set unless you need a one-off exception) ───── */
+  --nonla-radius-sm: max(0px, calc(var(--nonla-radius) - 2px));
+  --nonla-radius-lg: calc(var(--nonla-radius) + 2px);
+  --radius: var(--nonla-radius);
+  --background: var(--nonla-bg);
+  --foreground: var(--nonla-fg);
+  --card: var(--nonla-surface);
+  --card-foreground: var(--nonla-fg);
+  --popover: var(--nonla-elevated);
+  --popover-foreground: var(--nonla-fg);
+  /* Nonla: --primary = ink (emphasis), not CTA — CTA is --brand */
+  --primary: var(--nonla-ink);
+  --primary-foreground: var(--nonla-bg);
+  --secondary: var(--nonla-chip);
+  --secondary-foreground: var(--nonla-fg);
+  --muted: var(--nonla-chip);
+  --muted-foreground: var(--nonla-fg-muted);
+  --accent: color-mix(in oklab, var(--nonla-brand) 14%, transparent);
+  --accent-foreground: var(--brand-700);
+  --destructive: var(--nonla-danger);
+  --destructive-foreground: var(--nonla-surface);
+  --border: var(--nonla-border);
+  --input: var(--nonla-input);
+  --ring: color-mix(in oklab, var(--nonla-brand) 55%, transparent);
+
+  /* Brand scale — 500 is the knob. Tints → white, shades → black. */
+  --brand-50: color-mix(in oklab, var(--nonla-brand) 5%, white);
+  --brand-100: color-mix(in oklab, var(--nonla-brand) 12%, white);
+  --brand-200: color-mix(in oklab, var(--nonla-brand) 24%, white);
+  --brand-300: color-mix(in oklab, var(--nonla-brand) 42%, white);
+  --brand-400: color-mix(in oklab, var(--nonla-brand) 68%, white);
+  --brand-500: var(--nonla-brand);
+  --brand-600: color-mix(in oklab, var(--nonla-brand) 82%, black);
+  --brand-700: color-mix(in oklab, var(--nonla-brand) 64%, black);
+  --brand-800: color-mix(in oklab, var(--nonla-brand) 48%, black);
+  --brand: var(--brand-500);
+  --brand-text: var(--brand-700);
+  --link: var(--nonla-link);
+  --success: var(--nonla-success);
+  --warn: var(--nonla-warn);
+  --tertiary-foreground: var(--nonla-fg-tertiary);
+  --quaternary-foreground: var(--nonla-fg-quaternary);
+  --border-subtle: color-mix(in srgb, var(--nonla-border) 65%, transparent);
+  --control-bg: var(--nonla-chip);
+  --control-bg-hover: var(--nonla-chip-hover);
+  --elevated-shadow: 0 16px 48px color-mix(in srgb, var(--nonla-fg) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--nonla-fg) 6%, transparent);
+  --popper-shadow: 0 16px 48px color-mix(in srgb, var(--nonla-fg) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--nonla-fg) 6%, transparent);
+  --popper-border: var(--nonla-border);
+  --mask: color-mix(in srgb, var(--nonla-fg) 28%, transparent);
+  --meadow: var(--nonla-meadow);
+  --glass: var(--nonla-glass);
+  --glass-bar: var(--nonla-glass-bar);
+  --glass-menu: var(--nonla-glass-menu);
+  --glass-border: var(--nonla-glass-border);
+  --glass-highlight: var(--nonla-glass-highlight);
+  --ink-hover: var(--nonla-ink-hover);
+  --ink-active: var(--nonla-ink-active);
+  --ink-line: var(--nonla-ink-line);
+
+  /* Motion — shadcn-like ease-out-expo */
+  --nonla-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --nonla-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --nonla-dur-fast: 150ms;
+  --nonla-dur: 200ms;
+  --nonla-dur-slow: 300ms;
+
+  /* Chat type — one scale for full-page chat and side panels */
+  --chat-body-size: 15px;
+  --chat-body-leading: 24px;
+  --chat-h1-size: 16px;
+  --chat-h2-size: 16px;
+  --chat-h3-size: 14px;
+  --chat-h4-size: 14px;
+  --chat-p-mb: 12px;
+  --chat-h-mt: 16px;
+  --chat-h-mb: 8px;
+  --chat-composer-size: 14px;
+  --chat-composer-leading: 22px;
+  --chat-code-size: 12.5px;
+  --nonla-scrollbar-size: 6px;
+  --nonla-scrollbar-thumb: color-mix(in oklab, var(--nonla-fg) 22%, var(--nonla-bg));
+  --nonla-scrollbar-thumb-hover: var(--nonla-fg-quaternary);
+
+  color: var(--foreground);
+}
+
+/* Tailwind v4 — scan this package + expose semantic color utilities. */
+@source "./**/*.tsx";
+
+@theme inline {
+  --radius: var(--nonla-radius);
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
+  --radius-4xl: 24px;
+  --radius-full: 9999px;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-border-subtle: var(--border-subtle);
+  --default-border-color: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-brand: var(--brand);
+  --color-brand-50: var(--brand-50);
+  --color-brand-100: var(--brand-100);
+  --color-brand-200: var(--brand-200);
+  --color-brand-300: var(--brand-300);
+  --color-brand-400: var(--brand-400);
+  --color-brand-500: var(--brand-500);
+  --color-brand-600: var(--brand-600);
+  --color-brand-700: var(--brand-700);
+  --color-brand-800: var(--brand-800);
+  --color-brand-text: var(--brand-text);
+  --color-link: var(--link);
+  --color-success: var(--success);
+  --color-warn: var(--warn);
+  --color-tertiary-foreground: var(--tertiary-foreground);
+  --color-quaternary-foreground: var(--quaternary-foreground);
+  --color-meadow: var(--meadow);
+  --color-glass: var(--glass);
+  --color-glass-bar: var(--glass-bar);
+  --color-glass-menu: var(--glass-menu);
+  --color-glass-border: var(--glass-border);
+  --color-glass-highlight: var(--glass-highlight);
+  --color-ink-hover: var(--ink-hover);
+  --color-ink-active: var(--ink-active);
+  --color-ink-line: var(--ink-line);
+  --color-chat: var(--nonla-chat-bg);
+
+  --shadow-card: none;
+  --shadow-whisper: none;
+  --shadow-button-outline: 0 0 0 1px var(--border);
+  --shadow-drop: 0 2px 8px color-mix(in oklab, var(--nonla-fg) 10%, transparent);
+  --shadow-panel: 0 0 0 1px var(--border), 0 4px 16px color-mix(in oklab, var(--nonla-fg) 10%, transparent);
+
+  --spacing-control-xs: 24px;
+  --spacing-control-sm: 28px;
+  --spacing-control-md: 32px;
+  --spacing-control-lg: 36px;
+  --spacing-nav-item: 32px;
+  --spacing-field-sm: 28px;
+  --spacing-field-md: 32px;
+  --spacing-field-lg: 36px;
+  --spacing-field-nav: 32px;
+  --spacing-desktop-bar: var(--nonla-desktop-bar-height);
+
+  /* --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; */
+  --font-sans: "ui-sans-serif", -apple-system, "system-ui", Segoe UI Variable Display, Segoe UI, Helvetica, Apple Color Emoji, Arial, "sans-serif", Segoe UI Emoji, Segoe UI Symbol;
+  --font-family-sans: var(--font-sans);
+  --default-font-family: var(--font-sans);
+
+  --text-2xs: 11px;
+  --text-2xs--line-height: 14px;
+  --text-xs: 12px;
+  --text-xs--line-height: 16px;
+  --text-sm: 13px;
+  --text-sm--line-height: 18px;
+  --text-md: 16px;
+  --text-md--line-height: 24px;
+  --text-base: 14px;
+  --text-base--line-height: 20px;
+  --text-lg: 18px;
+  --text-lg--line-height: 28px;
+  --text-xl: 24px;
+  --text-xl--line-height: 32px;
+  --text-2xl: 28px;
+  --text-2xl--line-height: 42px;
+
+  --animate-fadeIn: fadeIn 0.28s ease-out both;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes nonla-chat-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.nonla-chat-shimmer {
+  background-image: linear-gradient(90deg, var(--muted-foreground) 0%, var(--foreground) 45%, var(--muted-foreground) 90%);
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: nonla-chat-shimmer 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nonla-chat-shimmer {
+    animation: none;
+    background-image: none;
+    background-clip: border-box;
+    -webkit-background-clip: border-box;
+    color: var(--muted-foreground);
+  }
+}
+
+/* Toast host — top-center stack */
+.nonla-message-host {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+  max-width: min(420px, calc(100vw - 32px));
+}
+
+.nonla-message-item {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  border-radius: var(--radius);
+  font-size: 14px;
+  line-height: 1.5714;
+  animation: nonla-message-in var(--nonla-dur) var(--nonla-ease-out);
+  will-change: transform, opacity;
+}
+
+.nonla-message-item.is-leaving {
+  animation: nonla-message-out 150ms var(--nonla-ease-in) forwards;
+}
+
+.nonla-message-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+}
+
+.nonla-message-content {
+  min-width: 0;
+  word-break: break-word;
+}
+
+.nonla-message-spin {
+  animation: nonla-message-spin 0.8s linear infinite;
+}
+
+@keyframes nonla-message-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes nonla-message-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+}
+
+@keyframes nonla-message-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Spin: agent / subAgent (3×3 random snake — color only) ─────────────── */
+.nonla-spin-matrix {
+  align-content: center;
+  justify-content: center;
+}
+
+.nonla-spin-matrix-cell {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--nonla-chip-hover);
+  transition: background 120ms linear;
+}
+
+.nonla-spin-matrix-cell.is-on {
+  background: var(--nonla-ink);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nonla-spin-matrix-cell {
+    transition: none;
+  }
+}
+
+@keyframes nonla-check-in {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes nonla-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes nonla-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* shadcn-style zoom: fade + scale(0.95) ↔ 1 (no slide) */
+@keyframes nonla-modal-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 0) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+  }
+}
+@keyframes nonla-modal-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, 0) scale(0.95);
+  }
+}
+@keyframes nonla-modal-in-centered {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes nonla-modal-out-centered {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+}
+
+@keyframes nonla-drawer-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes nonla-drawer-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes nonla-drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes nonla-drawer-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes nonla-drawer-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes nonla-drawer-out-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes nonla-drawer-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes nonla-drawer-out-top {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+/* Direction-aware popper (Popover / Select / Dropdown / Tooltip) */
+@keyframes nonla-pop-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes nonla-pop-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes nonla-pop-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(6px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+@keyframes nonla-pop-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(-6px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+@keyframes nonla-pop-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/* Frosted overlay — macOS menu chrome: outer hairline + inner white rim */
+.nonla-glass {
+  border: 1px solid rgb(255 255 255 / 0.78);
+  background: var(--glass);
+  color: var(--foreground);
+  box-shadow:
+    0 0 0 0.5px color-mix(in srgb, black 22%, transparent),
+    0 10px 28px color-mix(in srgb, black 14%, transparent),
+    inset 0 0 0 0.5px rgb(255 255 255 / 0.55),
+    inset 0 1px 0 rgb(255 255 255 / 0.92);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+  backdrop-filter: blur(24px) saturate(160%);
+}
+
+.nonla-btn-glass {
+  border-color: var(--glass-border);
+  background: var(--glass);
+  box-shadow: inset 0 1px 0 var(--glass-highlight);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+  transition: box-shadow var(--nonla-dur-fast) var(--nonla-ease-out), transform var(--nonla-dur-fast) var(--nonla-ease-out);
+}
+.nonla-btn-glass:hover:not(:disabled):not([aria-disabled]) {
+  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 999px var(--ink-hover);
+}
+.nonla-btn-glass:active:not(:disabled):not([aria-disabled]) {
+  transform: scale(0.98);
+  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 999px var(--ink-active);
+}
+
+/* Nested glass chip — hover is frost only; selected tints with brand */
+.nonla-glass-chip,
+.nonla-menu-item[data-highlighted] {
+  background: var(--glass-bar);
+  border-color: var(--glass-border);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+}
+.nonla-glass-chip-on {
+  background: var(--glass-bar);
+  border-color: color-mix(in oklab, var(--brand) 38%, var(--glass-border));
+  box-shadow: inset 0 0 0 999px color-mix(in oklab, var(--brand) 18%, transparent);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .nonla-btn-glass {
+    transition: box-shadow var(--nonla-dur-fast) var(--nonla-ease-out);
+  }
+  .nonla-btn-glass:active:not(:disabled):not([aria-disabled]) {
+    transform: none;
+  }
+}
+
+.nonla-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--mask);
+}
+.nonla-overlay[data-state="open"] {
+  animation: nonla-overlay-in var(--nonla-dur) var(--nonla-ease-out);
+}
+.nonla-overlay[data-state="closed"] {
+  animation: nonla-overlay-out var(--nonla-dur-fast) var(--nonla-ease-in);
+}
+
+.nonla-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9990;
+  background: var(--mask);
+}
+.nonla-modal-overlay[data-state="open"] {
+  animation: nonla-overlay-in var(--nonla-dur) var(--nonla-ease-out);
+}
+.nonla-modal-overlay[data-state="closed"] {
+  animation: nonla-overlay-out var(--nonla-dur-fast) var(--nonla-ease-in) forwards;
+  pointer-events: none;
+}
+
+.nonla-modal-content {
+  position: fixed;
+  left: 50%;
+  top: 60px;
+  z-index: 9991;
+  transform: translate(-50%, 0);
+  display: flex;
+  flex-direction: column;
+  width: min(480px, calc(100vw - 32px));
+  max-height: calc(100vh - 88px);
+  overflow: hidden;
+  border-radius: calc(var(--radius) + 4px);
+  padding: 0;
+  outline: none;
+  will-change: transform, opacity;
+}
+.nonla-modal-content[data-state="open"] {
+  animation: nonla-modal-in var(--nonla-dur) var(--nonla-ease-out);
+}
+.nonla-modal-content[data-state="closed"] {
+  animation: nonla-modal-out var(--nonla-dur-fast) var(--nonla-ease-in) forwards;
+  pointer-events: none;
+}
+.nonla-modal-content[data-centered="true"] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+  max-height: calc(100vh - 64px);
+}
+.nonla-modal-content[data-centered="true"][data-state="open"] {
+  animation: nonla-modal-in-centered var(--nonla-dur) var(--nonla-ease-out);
+}
+.nonla-modal-content[data-centered="true"][data-state="closed"] {
+  animation: nonla-modal-out-centered var(--nonla-dur-fast) var(--nonla-ease-in) forwards;
+  pointer-events: none;
+}
+
+.nonla-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-shrink: 0;
+  padding: 12px 16px;
+  background: transparent;
+}
+.nonla-modal-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--foreground);
+}
+.nonla-modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: -4px -6px -4px 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+.nonla-modal-close:hover {
+  color: var(--foreground);
+  background: var(--control-bg);
+}
+.nonla-modal-body {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 16px 16px 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--foreground);
+  background: transparent;
+}
+.nonla-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 10px 16px;
+  background: transparent;
+}
+
+.nonla-drawer-panel {
+  will-change: transform;
+}
+.nonla-drawer-panel[data-side="right"][data-state="open"] {
+  animation: nonla-drawer-in-right var(--nonla-dur-slow) var(--nonla-ease-out);
+}
+.nonla-drawer-panel[data-side="right"][data-state="closed"] {
+  animation: nonla-drawer-out-right var(--nonla-dur) var(--nonla-ease-in);
+}
+.nonla-drawer-panel[data-side="left"][data-state="open"] {
+  animation: nonla-drawer-in-left var(--nonla-dur-slow) var(--nonla-ease-out);
+}
+.nonla-drawer-panel[data-side="left"][data-state="closed"] {
+  animation: nonla-drawer-out-left var(--nonla-dur) var(--nonla-ease-in);
+}
+.nonla-drawer-panel[data-side="bottom"][data-state="open"] {
+  animation: nonla-drawer-in-bottom var(--nonla-dur-slow) var(--nonla-ease-out);
+}
+.nonla-drawer-panel[data-side="bottom"][data-state="closed"] {
+  animation: nonla-drawer-out-bottom var(--nonla-dur) var(--nonla-ease-in);
+}
+.nonla-drawer-panel[data-side="top"][data-state="open"] {
+  animation: nonla-drawer-in-top var(--nonla-dur-slow) var(--nonla-ease-out);
+}
+.nonla-drawer-panel[data-side="top"][data-state="closed"] {
+  animation: nonla-drawer-out-top var(--nonla-dur) var(--nonla-ease-in);
+}
+
+.nonla-popper {
+  will-change: transform, opacity;
+  transform-origin: var(--radix-popover-content-transform-origin, var(--radix-dropdown-menu-content-transform-origin, var(--radix-select-content-transform-origin, var(--radix-tooltip-content-transform-origin, center))));
+}
+.nonla-popper[data-state="open"][data-side="top"] {
+  animation: nonla-pop-in-top var(--nonla-dur-fast) var(--nonla-ease-out);
+}
+.nonla-popper[data-state="open"][data-side="bottom"] {
+  animation: nonla-pop-in-bottom var(--nonla-dur-fast) var(--nonla-ease-out);
+}
+.nonla-popper[data-state="open"][data-side="left"] {
+  animation: nonla-pop-in-left var(--nonla-dur-fast) var(--nonla-ease-out);
+}
+.nonla-popper[data-state="open"][data-side="right"] {
+  animation: nonla-pop-in-right var(--nonla-dur-fast) var(--nonla-ease-out);
+}
+.nonla-popper[data-state="open"]:not([data-side]) {
+  animation: nonla-pop-in-bottom var(--nonla-dur-fast) var(--nonla-ease-out);
+}
+.nonla-popper[data-state="closed"] {
+  animation: nonla-pop-out 100ms var(--nonla-ease-in);
+}
+
+.nonla-codeblock-pre code,
+.nonla-codeblock-pre .hljs {
+  color: var(--foreground);
+  background: transparent;
+}
+
+.nonla-codeblock-pre .hljs-line {
+  display: inline-block;
+  min-width: 100%;
+  min-height: 1.65em;
+}
+.nonla-codeblock-pre:not(.whitespace-pre-wrap) .hljs-line {
+  width: max-content;
+}
+.nonla-codeblock-pre.whitespace-pre-wrap .hljs-line {
+  width: 100%;
+}
+
+.nonla-codeblock-lines code {
+  counter-reset: nonla-code-line;
+}
+
+.nonla-codeblock-lines .hljs-line::before {
+  counter-increment: nonla-code-line;
+  content: counter(nonla-code-line);
+  display: inline-block;
+  width: 1.75rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: var(--quaternary-foreground);
+  user-select: none;
+  font-size: 11px;
+}
+
+.nonla-scroll-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.nonla-scroll-hidden::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--nonla-scrollbar-thumb) transparent;
+}
+::-webkit-scrollbar {
+  width: var(--nonla-scrollbar-size);
+  height: var(--nonla-scrollbar-size);
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--nonla-scrollbar-thumb);
+  border-radius: 99px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--nonla-scrollbar-thumb-hover);
+}
+
+.nonla-scroll-hover {
+  scrollbar-color: transparent transparent;
+}
+.nonla-scroll-hover:hover {
+  scrollbar-color: var(--nonla-scrollbar-thumb) transparent;
+}
+.nonla-scroll-hover::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.nonla-scroll-hover:hover::-webkit-scrollbar-thumb {
+  background: var(--nonla-scrollbar-thumb);
+}
+.nonla-scroll-hover:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--nonla-scrollbar-thumb-hover);
+}
+
+.nonla-overlay-thumb {
+  background: var(--nonla-scrollbar-thumb);
+}
+.group\/scroll:hover .nonla-overlay-thumb {
+  background: var(--nonla-scrollbar-thumb-hover);
+}