@olympusoss/canvas 4.0.0 → 5.0.0

package/styles/components/sidebar.css

@@ -1,146 +0,0 @@
-@layer canvas.components {
-  .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 15rem;
-    display: flex;
-    flex-direction: column;
-    z-index: var(--z-sidebar);
-    background-color: hsl(var(--sidebar-background));
-    border-right: 1px solid hsl(var(--sidebar-border));
-    transition-property: transform, width;
-    transition-duration: 200ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    transform: translateX(-100%);
-  }
-
-  @media (min-width: 1024px) {
-    .sidebar {
-      transform: translateX(0);
-    }
-  }
-
-  .sidebar.open {
-    transform: translateX(0);
-  }
-
-  @media (min-width: 1024px) {
-    .sidebar.collapsed {
-      width: 3.5rem;
-    }
-  }
-
-  .sidebar-brand {
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    border-bottom: 1px solid hsl(var(--sidebar-border));
-  }
-
-  .sidebar.collapsed .sidebar-brand {
-    padding: 0;
-    justify-content: center;
-  }
-
-  .sidebar-brand-name {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    color: hsl(var(--sidebar-foreground));
-  }
-
-  .sidebar-collapse-btn {
-    width: 26px;
-    height: 26px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background-color: transparent;
-    cursor: pointer;
-    border-radius: var(--radius-md, 6px);
-    transition-property: color, background-color, border-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    color: hsl(var(--sidebar-foreground) / 0.6);
-  }
-
-  .sidebar-collapse-btn:hover {
-    background-color: hsl(var(--sidebar-accent));
-    color: hsl(var(--sidebar-foreground));
-  }
-
-  .sidebar-nav {
-    flex: 1 1 0%;
-    overflow-y: auto;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-
-  .sidebar-group {
-    margin-bottom: 0.875rem;
-  }
-
-  .sidebar-group-label {
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    padding-bottom: 0.375rem;
-    font-size: 11px;
-    font-weight: 500;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .sidebar-item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    border-radius: var(--radius-md, 6px);
-    border: 0;
-    background-color: transparent;
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 1;
-    cursor: pointer;
-    transition-property: color, background-color, border-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    color: hsl(var(--sidebar-foreground));
-    opacity: 0.78;
-    font-family: var(--font-sans);
-  }
-
-  .sidebar-item:hover {
-    background-color: hsl(var(--sidebar-accent));
-    opacity: 1;
-  }
-
-  .sidebar-item.active {
-    background-color: hsl(var(--sidebar-accent));
-    opacity: 1;
-    color: hsl(var(--sidebar-accent-foreground));
-  }
-
-  .sidebar.collapsed .sidebar-item {
-    justify-content: center;
-    padding: 0.5rem;
-  }
-
-  .sidebar.collapsed .sidebar-item .label {
-    display: none;
-  }
-}

package/styles/components/skeleton.css

@@ -1,32 +0,0 @@
-@layer canvas.components {
-  @keyframes shimmer {
-    from { background-position: -200% 0; }
-    to   { background-position: 200% 0; }
-  }
-
-  .skeleton {
-    background-color: hsl(var(--muted));
-    border-radius: var(--radius-md, 6px);
-    background-image: linear-gradient(
-      90deg,
-      transparent 0%,
-      hsl(var(--muted-foreground) / 0.08) 50%,
-      transparent 100%
-    );
-    background-size: 200% 100%;
-    animation: shimmer 1.5s ease-in-out infinite;
-  }
-
-  .skeleton-text {
-    height: 1rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .skeleton-circle {
-    border-radius: 9999px;
-  }
-
-  .skeleton-rect {
-    border-radius: var(--radius-md, 6px);
-  }
-}

package/styles/components/spinner.css

@@ -1,26 +0,0 @@
-@layer canvas.components {
-  @keyframes spin {
-    from { transform: rotate(0deg); }
-    to   { transform: rotate(360deg); }
-  }
-
-  .spinner {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    border: 2px solid hsl(var(--primary));
-    border-top-color: transparent;
-    border-radius: 9999px;
-    animation: spin 600ms linear infinite;
-  }
-
-  .spinner-sm {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .spinner-lg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-}

package/styles/components/stat-card.css

@@ -1,71 +0,0 @@
-@layer canvas.components {
-  .stat-card {
-    background-color: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-xl, 12px);
-    padding: 1.25rem;
-    box-shadow: var(--shadow-elevated);
-    background-image: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--muted) / 0.4));
-  }
-
-  .dark .stat-card {
-    box-shadow: var(--shadow-elevated);
-    background-image: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--background)));
-  }
-
-  .stat-card-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-
-  .stat-card-label {
-    font-size: 13px;
-    color: hsl(var(--muted-foreground));
-    font-weight: 500;
-  }
-
-  .stat-card-value {
-    font-size: 28px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    margin-top: 0.25rem;
-    color: hsl(var(--foreground));
-  }
-
-  .stat-card-icon {
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: var(--radius-lg, 8px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  .stat-card-icon.blue {
-    background-color: rgb(59 130 246 / 0.1);
-    color: #3b82f6;
-  }
-
-  .stat-card-icon.success {
-    background-color: rgb(16 185 129 / 0.1);
-    color: #10b981;
-  }
-
-  .stat-card-icon.purple {
-    background-color: rgb(139 92 246 / 0.1);
-    color: #8b5cf6;
-  }
-
-  .stat-card-icon.destructive {
-    background-color: rgb(239 68 68 / 0.1);
-    color: #ef4444;
-  }
-
-  .stat-card-icon.amber {
-    background-color: rgb(245 158 11 / 0.1);
-    color: #f59e0b;
-  }
-}

package/styles/components/stepper.css

@@ -1,63 +0,0 @@
-@layer canvas.components {
-  .stepper {
-    display: flex;
-    align-items: center;
-    gap: 0;
-  }
-
-  .step {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .step-indicator {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 9999px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    font-weight: 600;
-    border: 2px solid hsl(var(--border));
-    color: hsl(var(--muted-foreground));
-    background-color: hsl(var(--background));
-  }
-
-  .step.completed .step-indicator {
-    background-color: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    border-color: hsl(var(--primary));
-  }
-
-  .step.active .step-indicator {
-    border-color: hsl(var(--primary));
-    color: hsl(var(--primary));
-  }
-
-  .step-label {
-    font-size: 14px;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .step.active .step-label {
-    color: hsl(var(--foreground));
-    font-weight: 500;
-  }
-
-  .step.completed .step-label {
-    color: hsl(var(--foreground));
-  }
-
-  .step-connector {
-    flex: 1;
-    height: 2px;
-    background-color: hsl(var(--border));
-    margin: 0 0.5rem;
-  }
-
-  .step.completed + .step-connector {
-    background-color: hsl(var(--primary));
-  }
-}

package/styles/components/switch.css

@@ -1,45 +0,0 @@
-@layer canvas.components {
-  .switch {
-    appearance: none;
-    position: relative;
-    width: 2.25rem;
-    height: 1.25rem;
-    border-radius: var(--radius-full, 9999px);
-    background-color: hsl(var(--muted));
-    border: none;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: background-color var(--duration-fast);
-  }
-
-  .switch::after {
-    content: "";
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 0.875rem;
-    height: 0.875rem;
-    border-radius: 9999px;
-    background-color: white;
-    box-shadow: var(--shadow-xs);
-    transition: transform var(--duration-fast);
-  }
-
-  .switch:checked {
-    background-color: hsl(var(--primary));
-  }
-
-  .switch:checked::after {
-    transform: translateX(1rem);
-  }
-
-  .switch:focus-visible {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-  }
-
-  .switch:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}

package/styles/components/tabs.css

@@ -1,40 +0,0 @@
-@layer canvas.components {
-  .tabs-list {
-    display: flex;
-    border-bottom: 1px solid hsl(var(--border));
-    gap: 0;
-  }
-
-  .tab {
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    color: hsl(var(--muted-foreground));
-    border: none;
-    border-bottom: 2px solid transparent;
-    background: none;
-    cursor: pointer;
-    transition-property: color, border-color;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: ease;
-  }
-
-  .tab:hover {
-    color: hsl(var(--foreground));
-  }
-
-  .tab.active {
-    color: hsl(var(--foreground));
-    border-bottom-color: hsl(var(--primary));
-  }
-
-  .tab:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  .tabs-content {
-    padding-top: 1rem;
-  }
-}

package/styles/components/textarea.css

@@ -1,31 +0,0 @@
-@layer canvas.components {
-  .textarea {
-    min-height: 5rem;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid hsl(var(--input));
-    border-radius: var(--radius-md, 6px);
-    background-color: transparent;
-    color: hsl(var(--foreground));
-    font-family: var(--font-sans);
-    font-size: 0.875rem;
-    line-height: 1.5;
-    resize: vertical;
-    box-shadow: var(--shadow-xs);
-    outline: none;
-    width: 100%;
-  }
-
-  .textarea::placeholder {
-    color: hsl(var(--muted-foreground));
-  }
-
-  .textarea:focus-visible {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-  }
-
-  .textarea:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}

package/styles/components/toast.css

@@ -1,95 +0,0 @@
-@layer canvas.components {
-  .toast-viewport {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    z-index: var(--z-toast);
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    pointer-events: none;
-    max-width: 420px;
-    width: 100%;
-  }
-
-  .toast {
-    background-color: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-lg, 8px);
-    box-shadow: var(--shadow-lg);
-    padding: 1rem;
-    pointer-events: auto;
-    position: relative;
-    animation: var(--animate-toast-in);
-  }
-
-  .toast-title {
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .toast-desc {
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    color: hsl(var(--muted-foreground));
-    margin-top: 0.125rem;
-  }
-
-  .toast-close {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    border: none;
-    border-radius: var(--radius-sm, 4px);
-    background-color: transparent;
-    color: hsl(var(--muted-foreground));
-    cursor: pointer;
-    padding: 0;
-  }
-
-  .toast-close:hover {
-    background-color: hsl(var(--accent));
-    color: hsl(var(--foreground));
-  }
-
-  .toast-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
-    border: 1px solid hsl(var(--input));
-    border-radius: var(--radius-md, 6px);
-    box-shadow: var(--shadow-xs);
-    height: 2rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: 500;
-    cursor: pointer;
-    white-space: nowrap;
-    margin-top: 0.5rem;
-  }
-
-  .toast-action:hover {
-    background-color: hsl(var(--accent));
-  }
-
-  .toast-destructive {
-    border-color: hsl(var(--destructive) / 0.5);
-    color: hsl(var(--destructive));
-  }
-
-  .toast-destructive .toast-desc {
-    color: hsl(var(--destructive) / 0.7);
-  }
-}

package/styles/components/tooltip.css

@@ -1,53 +0,0 @@
-@layer canvas.components {
-  .tooltip {
-    position: absolute;
-    padding: 6px 12px;
-    border-radius: var(--radius-md, 6px);
-    background-color: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    font-family: var(--font-sans);
-    font-size: 0.75rem;
-    line-height: 1.4;
-    white-space: nowrap;
-    z-index: var(--z-popover);
-    box-shadow: var(--shadow-sm);
-    animation: var(--animate-fade-in);
-    pointer-events: none;
-  }
-
-  .tooltip-arrow {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    background-color: hsl(var(--primary));
-    transform: rotate(45deg);
-  }
-
-  .tooltip-arrow.bottom {
-    top: 100%;
-    left: 50%;
-    margin-top: -4px;
-    margin-left: -4px;
-  }
-
-  .tooltip-arrow.top {
-    bottom: 100%;
-    left: 50%;
-    margin-bottom: -4px;
-    margin-left: -4px;
-  }
-
-  .tooltip-arrow.left {
-    right: 100%;
-    top: 50%;
-    margin-right: -4px;
-    margin-top: -4px;
-  }
-
-  .tooltip-arrow.right {
-    left: 100%;
-    top: 50%;
-    margin-left: -4px;
-    margin-top: -4px;
-  }
-}

package/styles/components/topbar.css

@@ -1,24 +0,0 @@
-@layer canvas.components {
-  .topbar {
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    border-bottom: 1px solid hsl(var(--border));
-    background-color: hsl(var(--background) / 0.7);
-    backdrop-filter: blur(12px);
-    position: sticky;
-    top: 0;
-    z-index: var(--z-sticky);
-  }
-
-  @media (min-width: 640px) {
-    .topbar {
-      gap: 0.75rem;
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
-    }
-  }
-}