@james_sww/metaform-asset-distribution 0.1.6 → 0.1.7

package/codebase/template/src/styles/workspace-shell.css

@@ -4,45 +4,99 @@
 .workspace-shell {
   --workspace-blue: var(--link-foreground);
   --workspace-violet: var(--data-violet);
+
   background:
-    radial-gradient(ellipse 48% 28% at 12% 0%, color-mix(in srgb, var(--workspace-blue) 16%, transparent), transparent 100%),
-    radial-gradient(ellipse 35% 24% at 55% 0%, color-mix(in srgb, var(--workspace-violet) 12%, transparent), transparent 100%),
-    radial-gradient(ellipse 30% 40% at 100% 100%, color-mix(in srgb, var(--workspace-violet) 13%, transparent), transparent 100%),
+    radial-gradient(
+      ellipse 48% 28% at 12% 0%,
+      color-mix(in srgb, var(--workspace-blue) 16%, transparent),
+      transparent 100%
+    ),
+    radial-gradient(
+      ellipse 35% 24% at 55% 0%,
+      color-mix(in srgb, var(--workspace-violet) 12%, transparent),
+      transparent 100%
+    ),
+    radial-gradient(
+      ellipse 30% 40% at 100% 100%,
+      color-mix(in srgb, var(--workspace-violet) 13%, transparent),
+      transparent 100%
+    ),
     color-mix(in srgb, var(--workspace-blue) 5%, var(--card));
 }
 
 .workspace-body {
   gap: 16px;
-  padding: 12px 16px 16px;
+  padding: 0;
 }
 
-.workspace-sidebar,
-.workspace-content {
-  border: 1px solid color-mix(in oklch, var(--card) 80%, transparent);
-  border-radius: var(--radius);
-  background: color-mix(in srgb, var(--card) 90%, transparent);
-  box-shadow: 0 6px 24px color-mix(in srgb, var(--workspace-blue) 4%, transparent);
+.workspace-main-column {
+  margin: 12px 16px 16px 0;
 }
 
 .workspace-sidebar {
   height: auto;
-  background:
-    radial-gradient(ellipse 100% 24% at 0% 100%, color-mix(in srgb, var(--workspace-violet) 6%, transparent), transparent 100%),
-    color-mix(in srgb, var(--card) 88%, transparent);
+  background: var(--card);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.workspace-sidebar-resize-handle {
+  position: absolute;
+  z-index: 20;
+  inset-block: 0;
+  right: -5px;
+  width: 10px;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+  outline: none;
+}
+
+.workspace-sidebar-resize-handle::after {
+  position: absolute;
+  inset-block: 0;
+  left: 4px;
+  width: 2px;
+  content: '';
+  background: transparent;
+}
+
+.workspace-sidebar-resize-handle:hover::after,
+.workspace-sidebar-resize-handle:focus-visible::after,
+.workspace-sidebar-resize-handle[data-dragging='true']::after {
+  background: var(--link-foreground);
+}
+
+.workspace-sidebar:has(.workspace-sidebar-resize-handle[data-dragging='true']) {
+  transition: none;
+  user-select: none;
 }
 
 .workspace-content {
   background:
-    radial-gradient(ellipse 42% 20% at 100% 0%, color-mix(in srgb, var(--brand-gradient-highlight) 9%, transparent), transparent 100%),
-    radial-gradient(ellipse 35% 30% at 100% 100%, color-mix(in srgb, var(--workspace-violet) 4%, transparent), transparent 100%),
+    radial-gradient(
+      ellipse 42% 20% at 100% 0%,
+      color-mix(in srgb, var(--brand-gradient-highlight) 9%, transparent),
+      transparent 100%
+    ),
+    radial-gradient(
+      ellipse 35% 30% at 100% 100%,
+      color-mix(in srgb, var(--workspace-violet) 4%, transparent),
+      transparent 100%
+    ),
     color-mix(in srgb, var(--card) 92%, transparent);
+  border: 1px solid color-mix(in oklch, var(--card) 80%, transparent);
+  border-radius: var(--radius);
+  box-shadow: 0 6px 24px color-mix(in srgb, var(--workspace-blue) 4%, transparent);
 }
 
 .workspace-nav-item[aria-current='page'] {
-  background: linear-gradient(110deg,
-    color-mix(in srgb, var(--workspace-blue) 16%, var(--card)),
-    color-mix(in srgb, var(--brand-gradient-highlight) 13%, var(--card)));
   color: var(--link-foreground);
+  background: linear-gradient(
+    110deg,
+    color-mix(in srgb, var(--workspace-blue) 16%, var(--card)),
+    color-mix(in srgb, var(--brand-gradient-highlight) 13%, var(--card))
+  );
 }
 
 .workspace-nav-item[aria-current='page']:hover {
@@ -51,55 +105,61 @@
 
 .workspace-page-header h1,
 .workspace-content > div > h1 {
-  font-size: clamp(1.5rem, 1.9vw, 2rem);
+  font-size: 24px;
   line-height: 1.35;
   letter-spacing: -0.025em;
 }
 
-.workspace-content [data-region-implementation='scaffold']:not([data-region-boundary]) {
+.workspace-content
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold) {
+  min-height: 156px;
+  padding: 12px;
+  background:
+    linear-gradient(
+        115deg,
+        var(--card) 45%,
+        color-mix(in srgb, var(--workspace-violet) 3%, var(--card))
+      )
+      padding-box,
+    linear-gradient(
+        115deg,
+        color-mix(in srgb, var(--brand-gradient-highlight) 50%, var(--card)),
+        color-mix(in srgb, var(--workspace-blue) 32%, var(--card)) 40%,
+        color-mix(in srgb, var(--workspace-violet) 45%, var(--card))
+      )
+      border-box;
+  border-color: transparent;
   border-style: solid;
   border-width: 1px;
-  border-color: transparent;
-  border-radius: 16px;
-  min-height: clamp(180px, 14vw, 240px);
-  padding: clamp(24px, 1.9vw, 32px);
-  background:
-    linear-gradient(115deg,
-      var(--card) 45%,
-      color-mix(in srgb, var(--workspace-violet) 3%, var(--card))) padding-box,
-    linear-gradient(115deg,
-      color-mix(in srgb, var(--brand-gradient-highlight) 50%, var(--card)),
-      color-mix(in srgb, var(--workspace-blue) 32%, var(--card)) 40%,
-      color-mix(in srgb, var(--workspace-violet) 45%, var(--card))) border-box;
+  border-radius: 12px;
   box-shadow: 0 6px 20px color-mix(in srgb, var(--workspace-blue) 4%, transparent);
 }
 
-
 .workspace-sidebar > div:first-child {
-  padding-block: 24px;
+  padding-block: 16px;
 }
 
 .workspace-sidebar nav {
-  padding-inline: 16px;
+  padding-inline: 8px;
 }
 
 .workspace-sidebar nav > div.space-y-1 > p {
-  margin-bottom: 10px;
+  margin-bottom: 6px;
   font-size: 12px;
   font-weight: 400;
-  letter-spacing: 0;
   color: var(--muted-foreground);
+  letter-spacing: 0;
 }
 
 .workspace-sidebar nav > div.h-px {
-  margin-block: 20px;
+  margin-block: 12px;
 }
 
 .workspace-sidebar .workspace-nav-item {
-  min-height: 46px;
-  gap: 14px;
-  padding-inline: 14px;
-  font-size: 15px;
+  gap: 10px;
+  min-height: 38px;
+  padding: 8px 12px;
+  font-size: 14px;
   font-weight: 400;
 }
 
@@ -108,8 +168,8 @@
 }
 
 .workspace-sidebar .workspace-nav-item svg {
-  width: 19px;
-  height: 19px;
+  width: 17px;
+  height: 17px;
 }
 
 .workspace-sidebar:has(> button[aria-expanded='false']) nav {
@@ -121,140 +181,182 @@
 }
 
 .workspace-default-page {
-  padding-top: clamp(20px, 2.2vw, 38px);
+  padding-top: 8px;
 }
 
 .workspace-default-page > h1 {
   position: relative;
-  min-height: 52px;
   display: flex;
   align-items: center;
-  padding-left: 70px;
+  min-height: 36px;
+  padding-left: 46px;
   margin-block-end: 4px;
   font-weight: 650;
 }
 
 .workspace-default-page > h1::before {
-  content: '';
   position: absolute;
   left: 0;
-  width: 50px;
-  height: 50px;
-  background: linear-gradient(135deg, var(--brand-gradient-highlight), var(--workspace-blue) 45%, var(--workspace-violet));
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 7 3 9 10 10-7 1-9 3-10 10-1-7-3-9-10-10 7-1 9-3 10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
+  width: 32px;
+  height: 32px;
+  content: '';
+  background: linear-gradient(
+    135deg,
+    var(--brand-gradient-highlight),
+    var(--workspace-blue) 45%,
+    var(--workspace-violet)
+  );
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 7 3 9 10 10-7 1-9 3-10 10-1-7-3-9-10-10 7-1 9-3 10-10z'/%3E%3C/svg%3E")
+    center / contain no-repeat;
 }
 
 .workspace-default-page > p {
-  margin-inline-start: 70px;
-  margin-block-end: 36px;
+  margin-block-end: 24px;
+  margin-inline-start: 46px;
   line-height: 1.7;
 }
 
-.workspace-default-page [data-region-implementation='scaffold']:not([data-region-boundary]) > div:first-child > div {
+.workspace-default-page
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+  > div:first-child
+  > div {
   position: relative;
-  padding-left: 64px;
+  padding-left: 52px;
 }
 
-.workspace-default-page [data-region-implementation='scaffold']:not([data-region-boundary]) > div:first-child > div::before {
-  content: '';
+.workspace-default-page
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+  > div:first-child
+  > div::before {
   position: absolute;
   top: 0;
   left: 0;
-  width: 46px;
-  height: 46px;
-  border-radius: 12px;
+  width: 36px;
+  height: 36px;
+  content: '';
   background: color-mix(in srgb, var(--workspace-blue) 16%, var(--card));
+  border-radius: 8px;
 }
 
-.workspace-default-page [data-region-implementation='scaffold']:not([data-region-boundary]) > div:first-child > div::after {
-  content: '';
+.workspace-default-page
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+  > div:first-child
+  > div::after {
   position: absolute;
-  top: 11px;
-  left: 11px;
-  width: 24px;
-  height: 24px;
+  top: 8px;
+  left: 8px;
+  width: 20px;
+  height: 20px;
+  content: '';
   background: var(--link-foreground);
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E")
+    center / contain no-repeat;
 }
 
-.workspace-default-page [data-region-implementation='scaffold']:not([data-region-boundary]) > div.mt-4 {
-  margin-left: 64px;
+.workspace-default-page
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+  > div.mt-4 {
+  margin-left: 52px;
 }
 
-.workspace-content [data-region-implementation='scaffold']:not([data-region-boundary]) h2 {
-  font-size: clamp(18px, 1.4vw, 24px);
+.workspace-content
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+  h2 {
+  font-size: 18px;
   line-height: 1.4;
 }
 
-.workspace-content [data-region-implementation='scaffold']:not([data-region-boundary]) [data-slot='badge'] {
-  border: 0;
-  background: color-mix(in srgb, var(--workspace-blue) 12%, var(--card));
-  color: var(--link-foreground);
+.workspace-content
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+  [data-slot='badge'] {
   padding: 4px 12px;
+  color: var(--link-foreground);
+  background: color-mix(in srgb, var(--workspace-blue) 12%, var(--card));
+  border: 0;
 }
 
-.workspace-content [data-region-implementation='scaffold']:not([data-region-boundary]) > div.mt-4 {
-  margin-top: 24px;
-  gap: 12px;
+.workspace-content
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+  > div.mt-4 {
+  gap: 10px;
+  margin-top: 20px;
 }
 
-.workspace-content [data-region-implementation='scaffold']:not([data-region-boundary]) > div.mt-4 > span {
-  border-radius: 999px;
+.workspace-content
+  [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+  > div.mt-4
+  > span {
   padding: 5px 12px;
-  background: var(--surface-muted);
-  color: var(--surface-muted-foreground);
   font-size: 13px;
+  color: var(--surface-muted-foreground);
+  background: var(--surface-muted);
+  border-radius: 999px;
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .workspace-body {
     gap: 0;
     padding: 8px;
   }
 
+  .workspace-main-column {
+    margin: 0;
+  }
+
   .workspace-default-page {
     padding-top: 8px;
   }
 
   .workspace-default-page > h1 {
-    min-height: 44px;
-    padding-left: 56px;
+    min-height: 36px;
+    padding-left: 46px;
   }
 
   .workspace-default-page > h1::before {
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
   }
 
   .workspace-default-page > p {
-    margin-inline-start: 0;
     margin-block-end: 24px;
+    margin-inline-start: 0;
   }
 
-  .workspace-default-page [data-region-implementation='scaffold']:not([data-region-boundary]) > div:first-child > div {
+  .workspace-default-page
+    [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+    > div:first-child
+    > div {
     padding-left: 0;
   }
 
-  .workspace-default-page [data-region-implementation='scaffold']:not([data-region-boundary]) > div:first-child > div::before,
-  .workspace-default-page [data-region-implementation='scaffold']:not([data-region-boundary]) > div:first-child > div::after {
+  .workspace-default-page
+    [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+    > div:first-child
+    > div::before,
+  .workspace-default-page
+    [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+    > div:first-child
+    > div::after {
     display: none;
   }
 
-  .workspace-default-page [data-region-implementation='scaffold']:not([data-region-boundary]) > div.mt-4 {
+  .workspace-default-page
+    [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold)
+    > div.mt-4 {
     margin-left: 0;
   }
 
-  .workspace-content [data-region-implementation='scaffold']:not([data-region-boundary]) {
-    min-height: 180px;
+  .workspace-content
+    [data-region-implementation='scaffold']:not([data-region-boundary], .semantic-scaffold) {
+    min-height: 156px;
     padding: 20px;
   }
 }
 
-
 .workspace-navigation,
 .workspace-navigation-children {
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style: none;
 }
 
@@ -266,76 +368,204 @@
   border-radius: var(--radius);
 }
 
+.workspace-navigation > .workspace-navigation-node {
+  padding: 4px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+}
+
+.workspace-navigation > .workspace-navigation-node > .workspace-navigation-row > .workspace-navigation-button {
+  min-height: 48px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.workspace-navigation > .workspace-navigation-node > .workspace-navigation-row .workspace-navigation-icon {
+  width: 28px;
+  height: 28px;
+  color: var(--link-foreground);
+  background: var(--selection);
+  border-radius: var(--radius);
+}
+
 .workspace-navigation-button {
+  gap: 12px;
+  justify-content: flex-start;
   width: 100%;
-  min-height: 44px;
   height: auto;
-  justify-content: flex-start;
-  gap: 12px;
+  min-height: 44px;
   padding: 10px 12px;
-  border-radius: var(--radius);
-  color: var(--foreground);
   font-weight: 500;
+  color: var(--foreground);
   white-space: normal;
+  border-radius: var(--radius);
 }
 
-.workspace-navigation-button[aria-current='page'],
-.workspace-navigation-ancestor {
+.workspace-navigation-button[aria-current='page'] {
   color: var(--link-foreground);
 }
 
 .workspace-navigation-button[aria-current='page'] {
-  background: var(--selection);
   font-weight: 600;
+  background: var(--selection);
 }
 
 .workspace-navigation-children {
-  padding-left: 18px;
-  padding-bottom: 4px;
+  padding: 6px 0 6px 20px;
+  margin-left: 10px;
+}
+
+.workspace-navigation > .workspace-navigation-node.workspace-navigation-open > .workspace-navigation-children {
+  margin-top: 4px;
+  border-top: 1px solid var(--border);
+}
+
+.workspace-navigation-children > .workspace-navigation-node {
+  position: relative;
+  padding-block: 2px;
+}
+
+.workspace-navigation-children > .workspace-navigation-node::before,
+.workspace-navigation-children > .workspace-navigation-node::after {
+  position: absolute;
+  left: -14px;
+  content: '';
+  pointer-events: none;
+}
+
+.workspace-navigation-children > .workspace-navigation-node::before {
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid var(--border);
+}
+
+.workspace-navigation-children > .workspace-navigation-node::after {
+  top: 24px;
+  width: 14px;
+  border-top: 1px solid var(--border);
+}
+
+.workspace-navigation-children > .workspace-navigation-node:last-child::before {
+  bottom: auto;
+  width: 14px;
+  height: 24px;
+  border-bottom: 1px solid var(--border);
+  border-bottom-left-radius: 8px;
+}
+
+.workspace-navigation-children > .workspace-navigation-node:last-child::after {
+  display: none;
+}
+
+.workspace-navigation-node:not([data-depth='0']) > .workspace-navigation-row {
+  position: relative;
+  min-height: 44px;
+  color: var(--muted-foreground);
+}
+
+.workspace-navigation-node:not([data-depth='0']) > .workspace-navigation-row > .workspace-navigation-button {
+  color: inherit;
+}
+
+.workspace-navigation-node.workspace-navigation-open:not([data-depth='0']) > .workspace-navigation-row {
+  color: var(--foreground);
+}
+
+.workspace-navigation-node.workspace-navigation-open > .workspace-navigation-row > .workspace-navigation-button {
+  font-weight: 600;
+}
+
+.workspace-navigation-node:not([data-depth='0']) > .workspace-navigation-row:has(> .workspace-navigation-button[aria-current='page']) {
+  overflow: hidden;
+  color: var(--link-foreground);
+  background: var(--selection);
+}
+
+.workspace-navigation-node:not([data-depth='0']) > .workspace-navigation-row:has(> .workspace-navigation-button:focus-visible) {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.workspace-navigation-node:not([data-depth='0']) > .workspace-navigation-row:has(> .workspace-navigation-button[aria-current='page'])::before {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 3px;
+  content: '';
+  background: var(--link-foreground);
+  pointer-events: none;
 }
 
 .workspace-navigation-children[hidden] {
   display: none;
 }
 
-.workspace-navigation-node[data-depth='1'].workspace-navigation-open {
-  background: var(--surface-muted);
+.workspace-navigation-row {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--radius);
+}
+
+.workspace-navigation-row:has(> .workspace-navigation-button[aria-current='page']) {
+  color: var(--link-foreground);
+  background: var(--selection);
+}
+
+.workspace-navigation-row > .workspace-navigation-button[aria-current='page'],
+.workspace-navigation-row > .workspace-navigation-button[aria-current='page']:hover {
+  background: transparent;
+}
+
+.workspace-navigation-row:has(> .workspace-navigation-button[aria-current='page']) > .workspace-navigation-toggle {
+  color: inherit;
+}
+
+.workspace-navigation-row > .workspace-navigation-button {
+  flex: 1;
+  min-width: 0;
+}
+
+.workspace-navigation-toggle {
+  width: 36px;
+  height: 44px;
+  flex-shrink: 0;
+  color: var(--muted-foreground);
 }
 
 .workspace-navigation-icon {
   display: inline-flex;
-  width: 22px;
-  height: 22px;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  color: var(--link-foreground);
+  width: 22px;
+  height: 22px;
+  color: inherit;
 }
 
-.workspace-navigation-dot {
-  width: 4px;
-  height: 4px;
-  margin-inline: 8px;
+.workspace-navigation-current-indicator {
   flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  background: currentColor;
   border-radius: 50%;
-  background: var(--muted-foreground);
 }
 
 .workspace-navigation-count {
   min-width: 24px;
-  border-radius: 6px;
   padding: 1px 6px;
-  background: var(--surface-muted);
-  color: var(--muted-foreground);
   font-size: 12px;
   line-height: 18px;
+  color: var(--muted-foreground);
   text-align: center;
+  background: var(--surface-muted);
+  border-radius: 6px;
 }
 
 .workspace-navigation-collapsed {
+  justify-content: center;
   width: 100%;
   min-height: 44px;
-  justify-content: center;
   padding-inline: 8px;
 }
 
@@ -344,10 +574,16 @@
   overflow-y: auto;
 }
 
+.workspace-navigation-menu [role='menuitem'][aria-current='page'] {
+  color: var(--link-foreground);
+  background: var(--selection);
+  font-weight: 600;
+}
+
 .workspace-breadcrumb-link {
-  cursor: pointer;
   color: var(--link-foreground);
   text-decoration: none;
+  cursor: pointer;
 }
 
 .workspace-breadcrumb-link:hover {