@olympusoss/canvas 3.2.1 → 5.0.0

package/styles/patterns/density.css

@@ -1,66 +0,0 @@
-@layer canvas.patterns {
-  html[data-density="compact"] .app-content {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.75rem;
-    padding-bottom: 2rem;
-  }
-
-  html[data-density="comfy"] .app-content {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    padding-top: 2rem;
-    padding-bottom: 4rem;
-  }
-
-  @media (min-width: 1024px) {
-    html[data-density="comfy"] .app-content {
-      padding-left: 2.25rem;
-      padding-right: 2.25rem;
-    }
-  }
-
-  html[data-density="compact"] .dt-toolbar {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-  }
-
-  html[data-density="comfy"] .dt-toolbar {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-    padding-top: 18px;
-    padding-bottom: 18px;
-  }
-
-  html[data-density="compact"] .dt-table th {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  html[data-density="comfy"] .dt-table th {
-    padding-left: 18px;
-    padding-right: 18px;
-    padding-top: 0.875rem;
-    padding-bottom: 0.875rem;
-  }
-
-  html[data-density="compact"] .dt-table td {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 12.5px;
-  }
-
-  html[data-density="comfy"] .dt-table td {
-    padding-left: 18px;
-    padding-right: 18px;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    font-size: 13.5px;
-  }
-}

package/styles/patterns/focus.css

@@ -1,22 +0,0 @@
-@layer canvas.patterns {
-  :where(
-    .input:focus,
-    input:focus,
-    textarea:focus,
-    select:focus,
-    .focus-pulse-within:focus-within
-  ):not(.no-focus-pulse),
-  .canvas-focus-pulse {
-    outline: none;
-    animation: canvasFocusPulse 1.2s ease-out infinite;
-  }
-
-  .focus-pulse-within :focus {
-    animation: none;
-  }
-
-  @keyframes canvasFocusPulse {
-    0% { box-shadow: 0 0 0 0px hsl(var(--ring) / 0.7); }
-    100% { box-shadow: 0 0 0 5px hsl(var(--ring) / 0); }
-  }
-}

package/styles/patterns/glass.css

@@ -1,85 +0,0 @@
-@layer canvas.patterns {
-  html[data-surface="glass"] { --glass-tint: 222 22% 100%; --glass-tint-a: 0.55; --glass-edge-a: 0.45; --glass-hi-a: 0.55; --glass-shadow: 220 30% 20%; }
-  html[data-surface="glass"].dark { --glass-tint: 222 22% 18%; --glass-tint-a: 0.55; --glass-edge-a: 0.10; --glass-hi-a: 0.10; --glass-shadow: 222 60% 4%; }
-
-  html[data-surface="glass"] .app-shell { background-color: transparent; }
-
-  html[data-surface="glass"] .stat-card,
-  html[data-surface="glass"] .section-card,
-  html[data-surface="glass"] .dt-wrap,
-  html[data-surface="glass"] .empty-card,
-  html[data-surface="glass"] .topbar,
-  html[data-surface="glass"] .sidebar {
-    backdrop-filter: blur(18px) saturate(1.4);
-    background-color: hsl(var(--glass-tint) / var(--glass-tint-a));
-    border-color: hsl(255 100% 100% / var(--glass-edge-a));
-    box-shadow:
-      inset 0 1px 0 hsl(255 100% 100% / var(--glass-hi-a)),
-      0 1px 2px hsl(var(--glass-shadow) / 0.06),
-      0 8px 24px -12px hsl(var(--glass-shadow) / 0.18);
-  }
-
-  html[data-surface="glass"] .sidebar {
-    background-color: hsl(var(--glass-tint) / calc(var(--glass-tint-a) - 0.10));
-    border-right-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-  html[data-surface="glass"] .topbar {
-    background-color: hsl(var(--glass-tint) / calc(var(--glass-tint-a) - 0.10));
-    border-bottom-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-  html[data-surface="glass"] .sidebar-brand,
-  html[data-surface="glass"] .sidebar-group-label {
-    border-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-  html[data-surface="glass"] .sidebar-item:hover,
-  html[data-surface="glass"] .sidebar-item.active {
-    background-color: hsl(255 100% 100% / 0.18);
-  }
-
-  html[data-surface="glass"] .dt-toolbar,
-  html[data-surface="glass"] .dt-footer {
-    border-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-  html[data-surface="glass"] .dt-table th {
-    background-color: hsl(255 100% 100% / 0.10);
-    border-bottom-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-  html[data-surface="glass"] .dt-table td {
-    border-bottom-color: hsl(255 100% 100% / calc(var(--glass-edge-a) - 0.20));
-  }
-  html[data-surface="glass"] .dt-table tbody tr.clickable:hover {
-    background-color: hsl(255 100% 100% / 0.10);
-  }
-  html[data-surface="glass"] .section-card-divider {
-    background-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-
-  html[data-surface="glass"] .input,
-  html[data-surface="glass"] textarea.input,
-  html[data-surface="glass"] select.input {
-    backdrop-filter: blur(8px);
-    background-color: hsl(var(--glass-tint) / 0.35);
-    border-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-  html[data-surface="glass"] .kbd,
-  html[data-surface="glass"] .codeblock {
-    background-color: hsl(255 100% 100% / 0.10);
-    border-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-
-  html[data-surface="glass"]:not(.dark) .btn-secondary,
-  html[data-surface="glass"]:not(.dark) .btn-outline {
-    backdrop-filter: blur(8px);
-    background-color: hsl(var(--glass-tint) / 0.55);
-    border-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-
-  html[data-surface="glass"] [role="menu"],
-  html[data-surface="glass"] .popover,
-  html[data-surface="glass"] .rowmenu-portal,
-  html[data-surface="glass"] .slide-over-panel {
-    backdrop-filter: blur(20px) saturate(1.4);
-    background-color: hsl(var(--glass-tint) / 0.85);
-    border-color: hsl(255 100% 100% / var(--glass-edge-a));
-  }
-}

package/styles/patterns/high-contrast.css

@@ -1,70 +0,0 @@
-@layer canvas.patterns {
-  @media (prefers-contrast: more) {
-    :root {
-      --border: 240 5.9% 50%;
-      --input: 240 5.9% 50%;
-      --muted-foreground: 240 6% 25%;
-      --shadow-xs: none;
-      --shadow-sm: none;
-      --shadow-md: none;
-      --shadow-lg: none;
-      --shadow-elevated: none;
-    }
-
-    .dark {
-      --border: 240 5% 60%;
-      --input: 240 5% 60%;
-      --muted-foreground: 240 5% 80%;
-    }
-
-    .btn,
-    .input,
-    .select,
-    .textarea,
-    .checkbox,
-    .radio,
-    .switch {
-      border-width: 2px;
-    }
-
-    .card,
-    .stat-card,
-    .section-card,
-    .dt-wrap,
-    .empty-card,
-    .alert {
-      border-width: 2px;
-    }
-
-    .badge,
-    .status-badge,
-    .kbd {
-      border-width: 2px;
-    }
-
-    .sidebar {
-      border-right-width: 2px;
-    }
-
-    .topbar {
-      border-bottom-width: 2px;
-    }
-
-    .dt-table th,
-    .dt-table td {
-      border-bottom-width: 2px;
-    }
-
-    .tab.active {
-      border-bottom-width: 3px;
-    }
-
-    .sep {
-      border-top-width: 2px;
-    }
-
-    .sep-v {
-      border-left-width: 2px;
-    }
-  }
-}

package/styles/patterns/reduced-motion.css

@@ -1,12 +0,0 @@
-@layer canvas.patterns {
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    ::before,
-    ::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-}

package/styles/patterns/scrollbar.css

@@ -1,10 +0,0 @@
-@layer canvas.patterns {
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
-  }
-
-  html[data-surface="glass"] * {
-    scrollbar-color: hsl(255 100% 100% / 0.30) transparent;
-  }
-}

package/styles/reset.css

@@ -1,89 +0,0 @@
-@layer canvas.reset {
-  *,
-  ::after,
-  ::before {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  html {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-  }
-
-  body {
-    line-height: inherit;
-  }
-
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  b, strong {
-    font-weight: bolder;
-  }
-
-  code, kbd, samp, pre {
-    font-size: 1em;
-  }
-
-  small {
-    font-size: 80%;
-  }
-
-  button, input, optgroup, select, textarea {
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
-
-  button, select {
-    text-transform: none;
-  }
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-    appearance: button;
-  }
-
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  [hidden] {
-    display: none;
-  }
-}

package/styles/tokens/colors.css

@@ -1,108 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 79.4% 60%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 79.4% 60%;
-    --radius: 0.5rem;
-
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 79.4% 60%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-    --brand-blue-700: #1e40af;
-    --brand-blue-400: #60a5fa;
-    --brand-gradient: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%);
-
-    --orb-indigo: #6366f1;
-    --orb-violet: #8b5cf6;
-    --orb-cyan: #06b6d4;
-
-    --color-success: hsl(143 70% 45%);
-    --color-warning: hsl(38 92% 50%);
-    --color-info: hsl(217 91% 60%);
-
-    --success-bg: 141 79% 85%;
-    --success-fg: 144 61% 20%;
-    --warning-bg: 48 96% 89%;
-    --warning-fg: 40 80% 27%;
-    --error-bg: 0 93% 94%;
-    --error-fg: 0 70% 35%;
-    --info-bg: 214 95% 93%;
-    --info-fg: 221 83% 45%;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 240 79.4% 60%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 240 3.7% 20%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 20%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 20%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 240 3.7% 22%;
-    --input: 240 3.7% 22%;
-    /* Lighter than the light-theme ring so the focus indicator keeps >=3:1
-       contrast against dark surfaces (cards, menus, accent rows). */
-    --ring: 240 80% 70%;
-
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 240 79.4% 60%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 24%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 24%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-    --success-bg: 149 50% 22%;
-    --success-fg: 142 70% 65%;
-    --warning-bg: 38 50% 20%;
-    --warning-fg: 43 90% 65%;
-    --error-bg: 0 50% 18%;
-    --error-fg: 0 80% 70%;
-    --info-bg: 217 50% 22%;
-    --info-fg: 217 90% 72%;
-  }
-}

package/styles/tokens/motion.css

@@ -1,33 +0,0 @@
-@layer canvas.tokens {
-  @keyframes toast-in {
-    from { opacity: 0; transform: translateY(8px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes modal-in {
-    from { opacity: 0; transform: scale(0.96); }
-    to   { opacity: 1; transform: scale(1); }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-  }
-
-  @keyframes slide-in {
-    from { transform: translateX(100%); }
-    to   { transform: translateX(0); }
-  }
-
-  :root {
-    --duration-fast: 150ms;
-    --duration-normal: 200ms;
-    --duration-slow: 300ms;
-    --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
-
-    --animate-toast-in: toast-in var(--duration-normal) ease-out;
-    --animate-modal-in: modal-in 180ms ease-out;
-    --animate-fade-in: fade-in var(--duration-normal) ease-out;
-    --animate-slide-in: slide-in 240ms var(--ease-out);
-  }
-}

package/styles/tokens/radius.css

@@ -1,10 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 8px;
-    --radius-xl: 12px;
-    --radius-2xl: 16px;
-    --radius-full: 9999px;
-  }
-}

package/styles/tokens/shadows.css

@@ -1,35 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-sm:
-      0 1px 2px hsl(220 30% 20% / 0.04),
-      0 2px 4px -1px hsl(220 30% 20% / 0.06);
-    --shadow-md:
-      0 1px 2px hsl(220 30% 20% / 0.04),
-      0 8px 24px -12px hsl(220 30% 20% / 0.12);
-    --shadow-lg:
-      0 2px 4px hsl(220 30% 20% / 0.04),
-      0 12px 32px -8px hsl(220 30% 20% / 0.16);
-    --shadow-elevated:
-      0 1px 2px hsl(220 30% 20% / 0.04),
-      0 8px 24px -12px hsl(220 30% 20% / 0.12),
-      inset 0 1px 0 hsl(0 0% 100% / 0.5);
-  }
-
-  .dark {
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2);
-    --shadow-sm:
-      0 1px 2px hsl(0 0% 0% / 0.2),
-      0 2px 4px -1px hsl(0 0% 0% / 0.2);
-    --shadow-md:
-      0 1px 2px hsl(0 0% 0% / 0.4),
-      0 8px 24px -12px hsl(0 0% 0% / 0.5);
-    --shadow-lg:
-      0 2px 4px hsl(0 0% 0% / 0.3),
-      0 12px 32px -8px hsl(0 0% 0% / 0.5);
-    --shadow-elevated:
-      0 1px 2px hsl(0 0% 0% / 0.4),
-      0 8px 24px -12px hsl(0 0% 0% / 0.5),
-      inset 0 1px 0 hsl(0 0% 100% / 0.06);
-  }
-}

package/styles/tokens/spacing.css

@@ -1,19 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --space-0: 0px;
-    --space-px: 1px;
-    --space-0-5: 0.125rem;
-    --space-1: 0.25rem;
-    --space-1-5: 0.375rem;
-    --space-2: 0.5rem;
-    --space-2-5: 0.625rem;
-    --space-3: 0.75rem;
-    --space-4: 1rem;
-    --space-5: 1.25rem;
-    --space-6: 1.5rem;
-    --space-8: 2rem;
-    --space-10: 2.5rem;
-    --space-12: 3rem;
-    --space-16: 4rem;
-  }
-}

package/styles/tokens/typography.css

@@ -1,6 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
-    --font-mono: "JetBrains Mono", "Fira Code", monospace;
-  }
-}

package/styles/tokens/z-index.css

@@ -1,12 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --z-base: 0;
-    --z-dropdown: 10;
-    --z-sticky: 20;
-    --z-overlay: 30;
-    --z-sidebar: 40;
-    --z-modal: 50;
-    --z-popover: 60;
-    --z-toast: 70;
-  }
-}

package/styles/utilities/display.css

@@ -1,66 +0,0 @@
-/* AUTO-GENERATED by scripts/generate-utilities.ts. Do not edit by hand; run: bun run generate-utilities */
-@layer canvas.utilities {
-  .block { display:block; }
-  .inline-block { display:inline-block; }
-  .inline { display:inline; }
-  .flex { display:flex; }
-  .inline-flex { display:inline-flex; }
-  .grid { display:grid; }
-  .inline-grid { display:inline-grid; }
-  .hidden { display:none; }
-
-  @media (min-width: 640px) {
-    .sm\:block { display:block; }
-    .sm\:inline-block { display:inline-block; }
-    .sm\:inline { display:inline; }
-    .sm\:flex { display:flex; }
-    .sm\:inline-flex { display:inline-flex; }
-    .sm\:grid { display:grid; }
-    .sm\:inline-grid { display:inline-grid; }
-    .sm\:hidden { display:none; }
-  }
-
-  @media (min-width: 768px) {
-    .md\:block { display:block; }
-    .md\:inline-block { display:inline-block; }
-    .md\:inline { display:inline; }
-    .md\:flex { display:flex; }
-    .md\:inline-flex { display:inline-flex; }
-    .md\:grid { display:grid; }
-    .md\:inline-grid { display:inline-grid; }
-    .md\:hidden { display:none; }
-  }
-
-  @media (min-width: 1024px) {
-    .lg\:block { display:block; }
-    .lg\:inline-block { display:inline-block; }
-    .lg\:inline { display:inline; }
-    .lg\:flex { display:flex; }
-    .lg\:inline-flex { display:inline-flex; }
-    .lg\:grid { display:grid; }
-    .lg\:inline-grid { display:inline-grid; }
-    .lg\:hidden { display:none; }
-  }
-
-  @media (min-width: 1280px) {
-    .xl\:block { display:block; }
-    .xl\:inline-block { display:inline-block; }
-    .xl\:inline { display:inline; }
-    .xl\:flex { display:flex; }
-    .xl\:inline-flex { display:inline-flex; }
-    .xl\:grid { display:grid; }
-    .xl\:inline-grid { display:inline-grid; }
-    .xl\:hidden { display:none; }
-  }
-
-  @media (min-width: 1536px) {
-    .\32 xl\:block { display:block; }
-    .\32 xl\:inline-block { display:inline-block; }
-    .\32 xl\:inline { display:inline; }
-    .\32 xl\:flex { display:flex; }
-    .\32 xl\:inline-flex { display:inline-flex; }
-    .\32 xl\:grid { display:grid; }
-    .\32 xl\:inline-grid { display:inline-grid; }
-    .\32 xl\:hidden { display:none; }
-  }
-}