@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/layout/panel/template-gallery.css

@@ -0,0 +1,131 @@
+.ui-template-gallery {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 16px;
+  min-height: 0;
+  padding: 20px;
+}
+
+.ui-template-gallery__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.ui-template-gallery__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
+  gap: 12px;
+  align-content: start;
+  min-height: 0;
+  overflow: auto;
+}
+
+.ui-template-gallery__footer {
+  color: var(--color-text-subtle);
+  font-size: var(--font-size-xs);
+}
+
+.ui-template-gallery-card {
+  box-sizing: border-box;
+  display: grid;
+  gap: 10px;
+  width: 100%;
+  min-height: 208px;
+  padding: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-bg);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-template-gallery-card:hover,
+.ui-template-gallery-card:focus-visible {
+  background: var(--color-surface);
+  outline: 1px solid var(--vscode-focusBorder, var(--color-accent));
+  outline-offset: 1px;
+}
+
+.ui-template-gallery-card__preview {
+  display: grid;
+  place-items: center;
+  height: 96px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-surface);
+  font-size: 28px;
+}
+
+.ui-template-gallery-card__body {
+  display: grid;
+  gap: 4px;
+}
+
+.ui-template-gallery-card__eyebrow {
+  color: var(--color-text-subtle);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.ui-template-gallery-card__title {
+  font-size: var(--font-size-sm);
+}
+
+.ui-template-gallery-card__description {
+  color: var(--color-text-subtle);
+  font-size: var(--font-size-xs);
+  line-height: 1.45;
+}
+
+.ui-template-gallery-card--skeleton {
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    var(--color-surface) 0%,
+    var(--color-surface-hover) 50%,
+    var(--color-surface) 100%
+  );
+  background-size: 200% 100%;
+  animation: ui-template-gallery-skeleton 1.2s ease-in-out infinite;
+}
+
+@keyframes ui-template-gallery-skeleton {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.ui-source-manager-nav-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 28px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-source-manager-nav-item[data-active='true'] {
+  background: var(--color-surface-hover);
+}
+
+.ui-source-manager-nav-item:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-accent));
+  outline-offset: 1px;
+}

package/src/layout/panel/workbench-authoring-shell.css

@@ -0,0 +1,48 @@
+.ui-workbench-authoring-shell {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-workbench-authoring-shell__body {
+  width: 100%;
+}
+
+.ui-workbench-surface-toolbar {
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+}
+
+.ui-workbench-surface-meta {
+  margin: 0;
+  font-size: var(--font-size-sm, 12px);
+  line-height: 1.4;
+  color: var(--color-text-muted, var(--color-text-secondary));
+}
+
+.ui-workbench-surface-toolbar > .ui-workbench-surface-meta {
+  margin-left: auto;
+}
+
+.ui-workbench-plain-text-source {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  resize: none;
+  border: 0;
+  outline: none;
+  padding: 12px;
+  background: transparent;
+  color: var(--color-text);
+  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  tab-size: 2;
+}

package/src/layout/panel/workbench-labeled-pane.css

@@ -0,0 +1,69 @@
+.ui-workbench-labeled-pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.ui-workbench-labeled-pane--flat {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.ui-workbench-labeled-pane--card {
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  border-radius: 8px;
+  background: var(--color-editor-background, rgba(0, 0, 0, 0.15));
+}
+
+.ui-workbench-labeled-pane--card.ui-workbench-labeled-pane--muted {
+  background: var(--color-surface-raised, var(--color-editor-background, rgba(0, 0, 0, 0.15)));
+}
+
+.ui-workbench-labeled-pane__header {
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  color: var(--color-text-muted, var(--color-text-secondary));
+  font-size: var(--font-size-xs, 11px);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  background: var(--color-sideBar-background, transparent);
+}
+
+.ui-workbench-labeled-pane__body {
+  /* Flex child of the pane chrome — definite height for % children (preview/source). */
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  /* Do not flex-stretch children: that collapses scrollHeight and steals overflow
+     into nested unthemed overflow:auto panels. Content sizes naturally; this
+     ScrollArea (ui-scroll-area + ui-workbench-scrollbar) owns scrolling. */
+}
+
+/* Nested inspectors defer scroll to the pane body ScrollArea. */
+.ui-workbench-labeled-pane__body .ui-workbench-property-panel,
+.ui-workbench-labeled-pane__body .widget-tree-inspector {
+  height: auto;
+  min-height: 0;
+  overflow: visible;
+}
+
+/* Fill surfaces (preview viewport, plain-text source) still resolve % height. */
+.ui-workbench-labeled-pane__body > .ui-jdw-preview-viewport-host,
+.ui-workbench-labeled-pane__body > .ui-workbench-plain-text-source {
+  display: block;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 100%;
+}
+
+.ui-workbench-labeled-pane--card .ui-workbench-labeled-pane__body {
+  padding: 12px;
+}

package/src/layout/panel/workbench-sidebar-stack.css

@@ -0,0 +1,18 @@
+.ui-workbench-sidebar-stack {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 4px 2px 4px 0;
+}
+
+.ui-workbench-sidebar-stack > *:last-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}

package/src/layout/property/color-input.css

@@ -0,0 +1,8 @@
+.ui-workbench-color-input.ui-input {
+  width: 28px;
+  height: 22px;
+  flex: 0 0 28px;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}

package/src/layout/property/color-row.css

@@ -0,0 +1,6 @@
+.ui-workbench-color-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}

package/src/layout/property/index.css

@@ -0,0 +1,15 @@
+/* layout/property feature styles */
+@import './color-input.css';
+@import './color-row.css';
+@import './property-card.css';
+@import './property-grid.css';
+@import './property-hint.css';
+@import './property-inline.css';
+@import './property-key-value.css';
+@import './property-override-label.css';
+@import './property-panel.css';
+@import './property-row.css';
+@import './property-search.css';
+@import './property-section.css';
+@import './property-stack.css';
+@import './property-toggle.css';

package/src/layout/property/property-card.css

@@ -0,0 +1,8 @@
+.ui-workbench-property-card {
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 8px;
+  background: var(--vscode-editor-background, var(--color-bg));
+  border: 1px solid var(--vscode-input-border, var(--color-border));
+  border-radius: 4px;
+}

package/src/layout/property/property-grid.css

@@ -0,0 +1,24 @@
+.ui-workbench-property-grid {
+  display: grid;
+  min-width: 0;
+}
+
+.ui-workbench-property-grid[data-columns='2'] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.ui-workbench-property-grid[data-columns='3'] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.ui-workbench-property-grid[data-gap='xs'] {
+  gap: 4px;
+}
+
+.ui-workbench-property-grid[data-gap='sm'] {
+  gap: 8px;
+}
+
+.ui-workbench-property-grid[data-gap='md'] {
+  gap: 10px;
+}

package/src/layout/property/property-hint.css

@@ -0,0 +1,4 @@
+.ui-workbench-property-hint {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 10px;
+}

package/src/layout/property/property-inline.css

@@ -0,0 +1,10 @@
+.ui-workbench-property-inline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ui-workbench-property-inline[data-justify='between'] {
+  justify-content: space-between;
+}

package/src/layout/property/property-key-value.css

@@ -0,0 +1,29 @@
+.ui-workbench-property-key-value {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 3px 8px;
+  background: var(--vscode-editor-background, var(--color-bg));
+  border: 1px solid var(--vscode-input-border, var(--color-border));
+  border-radius: 3px;
+  font-size: 11px;
+}
+
+.ui-workbench-property-key-value__name {
+  flex: 0 0 80px;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-property-key-value__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--vscode-foreground, var(--color-text));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/layout/property/property-override-label.css

@@ -0,0 +1,34 @@
+.ui-workbench-property-override-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.ui-workbench-property-override-label__main {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.ui-workbench-property-override-label__text {
+  color: var(--vscode-foreground, var(--color-text));
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-property-override-label__badge {
+  flex-shrink: 0;
+}
+
+.ui-workbench-property-override-label__reset {
+  flex-shrink: 0;
+}

package/src/layout/property/property-panel.css

@@ -0,0 +1,20 @@
+.ui-workbench-property-panel {
+  box-sizing: border-box;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-gutter: stable;
+  padding: 16px;
+  color: var(--vscode-sideBar-foreground, var(--color-text));
+  background: var(--vscode-sideBar-background, var(--color-surface));
+  font-family: var(--font-family, system-ui, sans-serif);
+  font-size: var(--font-size-sm);
+}
+
+.ui-workbench-property-panel--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}

package/src/layout/property/property-row.css

@@ -0,0 +1,17 @@
+.ui-workbench-property-row.ui-field {
+  margin: 0;
+  padding: 3px 12px;
+}
+
+.ui-workbench-property-row .ui-field__label {
+  margin-bottom: 2px;
+  color: var(--vscode-foreground, var(--color-text));
+  font-size: 11px;
+  font-weight: 500;
+  opacity: 0.78;
+}
+
+.ui-workbench-property-row.ui-field--inline {
+  justify-content: flex-start;
+  gap: 8px;
+}

package/src/layout/property/property-search.css

@@ -0,0 +1,43 @@
+.ui-workbench-property-search {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  margin: 0 0 12px;
+  padding: 8px 16px;
+  background: var(--vscode-sideBar-background, var(--color-surface));
+  border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border, var(--color-border));
+}
+
+/* WorkbenchPropertySearch composes FilterBar — reset FilterBar chrome so we do not
+   stack a second border/padding that can paint past pane dividers. */
+.ui-filter-bar.ui-workbench-property-search {
+  margin: 0 0 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border, var(--color-border));
+}
+
+/*
+ * Full-bleed sticky search without negative margins (those escaped bordered panes
+ * and made the search divider look like it pierced Stage | Details splits).
+ */
+.ui-workbench-property-panel:has(> .ui-workbench-property-search) {
+  padding-top: 0;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.ui-workbench-property-panel:has(> .ui-workbench-property-search)
+  > :not(.ui-workbench-property-search) {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.ui-workbench-property-panel:has(> .ui-workbench-property-search)
+  > :last-child:not(.ui-workbench-property-search) {
+  padding-bottom: 16px;
+}
+
+.ui-workbench-property-panel--empty .ui-workbench-property-search {
+  display: none;
+}

package/src/layout/property/property-section.css

@@ -0,0 +1,97 @@
+.ui-workbench-property-section {
+  min-width: 0;
+  margin: 0 0 20px;
+}
+
+.ui-workbench-property-section[data-level='group'] {
+  margin: 0 0 12px;
+}
+
+.ui-workbench-property-section__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin-bottom: 8px;
+}
+
+.ui-workbench-property-section[data-level='category'] > .ui-workbench-property-section__header {
+  padding-bottom: 4px;
+  border-bottom: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.08)));
+}
+
+.ui-workbench-property-section__header .ui-workbench-section-title {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  color: var(--vscode-sideBarSectionHeader-foreground, var(--color-text));
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.ui-workbench-property-section[data-level='group']
+  > .ui-workbench-property-section__header
+  .ui-workbench-section-title {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.ui-workbench-property-section__toggle {
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-workbench-property-section__toggle:hover {
+  color: var(--color-text);
+}
+
+.ui-workbench-property-section__toggle:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-accent));
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.ui-workbench-property-section__chevron {
+  width: 14px;
+  flex-shrink: 0;
+  color: var(--vscode-descriptionForeground, var(--color-text-subtle));
+  font-size: 12px;
+}
+
+.ui-workbench-property-section__actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.ui-workbench-property-section__body,
+.ui-workbench-property-stack {
+  display: grid;
+  min-width: 0;
+}
+
+.ui-workbench-property-section__body[hidden] {
+  display: none;
+}
+
+.ui-workbench-property-section__body,
+.ui-workbench-property-stack[data-gap='md'] {
+  gap: 10px;
+}

package/src/layout/property/property-stack.css

@@ -0,0 +1,11 @@
+.ui-workbench-property-stack[data-gap='xs'] {
+  gap: 4px;
+}
+
+.ui-workbench-property-stack[data-gap='sm'] {
+  gap: 8px;
+}
+
+.ui-workbench-property-stack[data-gap='lg'] {
+  gap: 12px;
+}

package/src/layout/property/property-toggle.css

@@ -0,0 +1,14 @@
+.ui-workbench-property-toggle.ui-button {
+  height: 24px;
+  min-height: 0;
+  padding: 0 8px;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  background: var(--vscode-input-background, var(--color-surface));
+  border-color: var(--vscode-input-border, var(--color-border));
+  font-size: 10px;
+}
+
+.ui-workbench-property-toggle.ui-button[data-active='true'] {
+  color: var(--vscode-button-foreground, var(--color-bg));
+  background: var(--vscode-button-background, var(--color-accent));
+}