@olympusoss/canvas 2.20.2 → 3.2.0

package/styles/organisms/dialog.css

@@ -0,0 +1,72 @@
+@layer canvas.components {
+  .dialog-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0 0 0 / 0.5);
+    z-index: var(--z-modal);
+    animation: var(--animate-fade-in);
+  }
+
+  .dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: var(--z-modal);
+    max-width: 32rem;
+    width: calc(100% - 2rem);
+    background-color: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius-xl, 12px);
+    box-shadow: var(--shadow-lg);
+    animation: var(--animate-modal-in);
+    padding: 1.5rem;
+  }
+
+  .dialog-header {
+    margin-bottom: 1rem;
+  }
+
+  .dialog-title {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+  }
+
+  .dialog-desc {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: hsl(var(--muted-foreground));
+    margin-top: 0.25rem;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+  }
+
+  .dialog-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    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;
+  }
+
+  .dialog-close:hover {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--foreground));
+  }
+}

package/styles/organisms/filter-panel.css

@@ -0,0 +1,58 @@
+@layer canvas.components {
+  .filter-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .filter-group-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+  }
+
+  .filter-group-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: 9999px;
+    font-size: 12px;
+    border: 1px solid hsl(var(--border));
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .filter-chip:hover {
+    background-color: hsl(var(--accent));
+  }
+
+  .filter-chip.active {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    border-color: hsl(var(--primary));
+  }
+
+  .filter-chip-remove {
+    display: inline-flex;
+    margin-left: 0.125rem;
+    opacity: 0.6;
+    cursor: pointer;
+  }
+
+  .filter-chip-remove:hover {
+    opacity: 1;
+  }
+}

package/styles/organisms/row-menu.css

@@ -0,0 +1,69 @@
+@layer canvas.components {
+  .rowmenu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    font-size: 13px;
+    font-family: inherit;
+    color: hsl(var(--foreground));
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+    border-radius: 5px;
+    text-align: left;
+  }
+
+  .rowmenu-item:hover {
+    background-color: hsl(var(--accent));
+  }
+
+  .rowmenu-item.rowmenu-danger {
+    color: hsl(var(--destructive));
+  }
+
+  .rowmenu-item.rowmenu-danger:hover {
+    background: hsl(var(--destructive) / 0.08);
+  }
+
+  .rowmenu-sep {
+    height: 1px;
+    background-color: hsl(var(--border));
+    margin-left: 0.125rem;
+    margin-right: 0.125rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .navlink {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: hsl(var(--muted-foreground));
+    text-decoration: none;
+    transition-property: color, background-color, border-color;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .navlink:hover {
+    color: hsl(var(--foreground));
+  }
+
+  .navlink.active {
+    color: hsl(var(--foreground));
+  }
+
+  .nav-wrap {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-modal);
+    background-color: hsl(var(--background) / 0.8);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid hsl(var(--border));
+  }
+}

package/styles/organisms/sheet.css

@@ -0,0 +1,70 @@
+@layer canvas.components {
+  @keyframes slide-in-left {
+    from { transform: translateX(-100%); }
+    to   { transform: translateX(0); }
+  }
+
+  .sheet-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0 0 0 / 0.5);
+    z-index: var(--z-modal);
+    animation: var(--animate-fade-in);
+  }
+
+  .sheet {
+    position: fixed;
+    z-index: var(--z-modal);
+    background-color: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    border: 1px solid hsl(var(--border));
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sheet-right {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 24rem;
+    max-width: calc(100% - 2rem);
+    animation: var(--animate-slide-in);
+    border-left: 1px solid hsl(var(--border));
+  }
+
+  .sheet-left {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 24rem;
+    max-width: calc(100% - 2rem);
+    animation: slide-in-left 240ms var(--ease-out);
+    border-right: 1px solid hsl(var(--border));
+  }
+
+  .sheet-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid hsl(var(--border));
+  }
+
+  .sheet-title {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+  }
+
+  .sheet-body {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .sheet-footer {
+    padding: 1.5rem;
+    border-top: 1px solid hsl(var(--border));
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+  }
+}

package/styles/organisms/sidebar.css

@@ -0,0 +1,146 @@
+@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/organisms/stepper.css

@@ -0,0 +1,63 @@
+@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/organisms/tabs.css

@@ -0,0 +1,40 @@
+@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/organisms/topbar.css

@@ -0,0 +1,24 @@
+@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;
+    }
+  }
+}

package/styles/patterns/backdrops.css

@@ -0,0 +1,35 @@
+@layer canvas.patterns {
+  html, body {
+    background-color: hsl(var(--background));
+  }
+
+  body {
+    background-image:
+      radial-gradient(70% 55% at 50% -10%, hsl(var(--primary) / 0.28), transparent 60%);
+    background-size: 100% 100%;
+    background-attachment: fixed;
+  }
+
+  .dark body {
+    background-image:
+      radial-gradient(70% 55% at 50% -10%, hsl(var(--primary) / 0.40), transparent 60%);
+  }
+
+  html[data-surface="glass"] body {
+    background:
+      radial-gradient(60% 50% at 12% 10%, hsl(28 100% 80% / 0.55), transparent 60%),
+      radial-gradient(55% 55% at 88% 8%, hsl(210 100% 78% / 0.55), transparent 60%),
+      radial-gradient(70% 60% at 50% 100%, hsl(270 90% 82% / 0.45), transparent 65%),
+      hsl(220 30% 97%);
+    background-attachment: fixed;
+  }
+
+  html[data-surface="glass"].dark body {
+    background:
+      radial-gradient(55% 50% at 10% 8%, hsl(245 90% 60% / 0.40), transparent 60%),
+      radial-gradient(50% 55% at 92% 12%, hsl(280 85% 55% / 0.35), transparent 60%),
+      radial-gradient(70% 60% at 50% 100%, hsl(190 90% 45% / 0.28), transparent 70%),
+      hsl(222 30% 6%);
+    background-attachment: fixed;
+  }
+}

package/styles/patterns/density.css

@@ -0,0 +1,66 @@
+@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

@@ -0,0 +1,22 @@
+@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); }
+  }
+}