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

package/src/layout/sidebar/sidebar-view.css

@@ -0,0 +1,290 @@
+.ui-sidebar-view__body > .ui-empty-state.ui-empty-state--compact:only-child,
+.ui-panel-body > .ui-empty-state.ui-empty-state--compact:only-child {
+  flex: 1 1 auto;
+  min-height: 100%;
+  height: auto;
+}
+
+.workbench-commands-sidebar > .ui-sidebar-view__body > .workbench-commands-sidebar__list {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 2px 0;
+}
+
+.workbench-commands-sidebar .ui-sidebar-view__footer--overlay {
+  border-top: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  backdrop-filter: blur(6px);
+}
+
+.workbench-extensions-sidebar .ui-sidebar-view__footer--overlay {
+  border-top: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  backdrop-filter: blur(6px);
+}
+
+.ui-sidebar-view__body--dock-sections.ui-scroll-area--both {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Docked section layouts own scroll inside the sidebar body; default views use PanelBody scroll. */
+.ui-sidebar-view__body--dock-sections .workbench-commands-sidebar__list,
+.ui-sidebar-view__body--dock-sections .ui-workbench-sidebar-section-stack__expanded,
+.ui-sidebar-view__body--dock-sections .ui-workbench-sidebar-section__content:not([hidden]) {
+  overflow: auto;
+}
+
+.ui-sidebar-view .panel-header {
+  box-sizing: border-box;
+  height: var(--panel-header-height, var(--workbench-header-height));
+  min-height: var(--workbench-header-height);
+  border-bottom: 0;
+  padding: 0 var(--ui-sidebar-inline-padding);
+}
+
+.ui-sidebar-view {
+  --ui-sidebar-footer-gap: var(--shell-spacing-block);
+  --ui-sidebar-footer-height: 0px;
+  --ui-sidebar-inline-padding: var(--shell-spacing-side-bar-inline);
+  --ui-sidebar-row-block-padding: var(--shell-spacing-side-bar-block);
+  --ui-sidebar-tree-indent-step: 10px;
+}
+
+.ui-sidebar-view__header-addon {
+  flex-shrink: 0;
+  background: var(--panel-bg, var(--color-bg));
+}
+
+.ui-sidebar-header-control {
+  flex-shrink: 0;
+  padding: 0 var(--ui-sidebar-inline-padding) 6px;
+}
+
+.ui-sidebar-view__body {
+  flex: 1;
+  min-height: 0;
+}
+
+.ui-sidebar-view__footer--overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background: transparent;
+  pointer-events: none;
+}
+
+.ui-sidebar-view__footer--overlay > * {
+  pointer-events: auto;
+}
+
+.ui-sidebar-scroll-spacer {
+  flex-shrink: 0;
+  height: calc(var(--ui-sidebar-footer-height) + var(--ui-sidebar-footer-gap));
+  pointer-events: none;
+}
+
+.ui-sidebar-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ui-sidebar-list--fill {
+  min-height: 100%;
+}
+
+.ui-sidebar-list--drop-target {
+  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
+}
+
+/*
+ * SideBarListItem renders `after` as a sibling of the row button inside this
+ * entry. Match SideBarRow: primary content grows left, trailing actions stay
+ * on the same horizontal row.
+ */
+.ui-sidebar-list-entry {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-sidebar-row {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.ui-sidebar-list-item {
+  --depth: 0;
+  --ui-sidebar-tree-indent-offset: calc(
+    var(--ui-sidebar-inline-padding, 8px) +
+      (var(--depth) * var(--ui-sidebar-tree-indent-step, 14px))
+  );
+  width: 100%;
+  min-width: 0;
+  min-height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 var(--ui-sidebar-inline-padding, 8px) 0 var(--ui-sidebar-tree-indent-offset);
+  border: 0;
+  border-radius: 0;
+  color: var(--color-text-muted);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.ui-sidebar-list-item:hover,
+.ui-sidebar-row:hover,
+.ui-sidebar-list-entry:hover {
+  background: var(--color-surface-hover);
+}
+
+.ui-sidebar-row .ui-sidebar-list-item,
+.ui-sidebar-list-entry .ui-sidebar-list-item {
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ui-sidebar-row .ui-sidebar-list-item:hover,
+.ui-sidebar-list-entry .ui-sidebar-list-item:hover {
+  background: transparent;
+}
+
+.ui-sidebar-list-item--active {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}
+
+.ui-sidebar-list-item--selected {
+  color: var(--color-text);
+  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
+}
+
+.ui-sidebar-list-item--selected:hover {
+  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
+}
+
+.ui-sidebar-list-item--active.ui-sidebar-list-item--selected {
+  background: color-mix(in srgb, var(--color-accent) 28%, var(--color-surface-hover));
+}
+
+.ui-sidebar-list-item--drop-target,
+.ui-sidebar-list-item--drop-target:hover {
+  color: var(--color-text);
+  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
+}
+
+/*
+ * `after` renders as a sibling of the row button inside the entry. Paint
+ * selection / active / drop chrome on the entry so trailing slots share the
+ * highlight instead of leaving a partial strip beside the button.
+ */
+.ui-sidebar-list-entry:has(> .ui-sidebar-list-item--active) {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}
+
+.ui-sidebar-list-entry:has(> .ui-sidebar-list-item--selected) {
+  color: var(--color-text);
+  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
+}
+
+.ui-sidebar-list-entry:has(> .ui-sidebar-list-item--selected):hover {
+  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
+}
+
+.ui-sidebar-list-entry:has(> .ui-sidebar-list-item--active.ui-sidebar-list-item--selected) {
+  background: color-mix(in srgb, var(--color-accent) 28%, var(--color-surface-hover));
+}
+
+.ui-sidebar-list-entry:has(> .ui-sidebar-list-item--drop-target) {
+  color: var(--color-text);
+  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
+}
+
+.ui-sidebar-list-entry:has(
+    > .ui-sidebar-list-item--active,
+    > .ui-sidebar-list-item--selected,
+    > .ui-sidebar-list-item--drop-target
+  )
+  > .ui-sidebar-list-item {
+  background: transparent;
+  outline: none;
+}
+
+.ui-sidebar-inline-edit {
+  --depth: 0;
+  --ui-sidebar-tree-indent-offset: calc(
+    var(--ui-sidebar-inline-padding, 8px) +
+      (var(--depth) * var(--ui-sidebar-tree-indent-step, 14px))
+  );
+  min-height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px var(--ui-sidebar-inline-padding, 8px) 2px var(--ui-sidebar-tree-indent-offset);
+}
+
+.ui-sidebar-inline-edit__input {
+  --ui-input-width: 100%;
+  --ui-input-min-width: 0;
+  --ui-input-height: var(--workbench-inline-edit-height);
+  --ui-input-padding: 0 6px;
+  --ui-input-border: 1px solid var(--color-accent);
+  --ui-input-border-radius: 2px;
+  --ui-input-color: var(--color-text);
+  --ui-input-background: var(--color-surface);
+  --ui-input-font-family: inherit;
+  --ui-input-font-size: inherit;
+  --ui-input-line-height: normal;
+  --ui-input-focus-border-color: var(--color-accent);
+  width: 100%;
+  min-width: 0;
+  height: var(--workbench-inline-edit-height);
+  padding: 0 6px;
+  border: 1px solid var(--color-accent);
+  border-radius: 2px;
+  color: var(--color-text);
+  background: var(--color-surface);
+  font: inherit;
+  outline: none;
+}
+
+.ui-sidebar-inline-edit__error {
+  --depth: 0;
+  --ui-sidebar-tree-indent-offset: calc(
+    var(--ui-sidebar-inline-padding, 8px) +
+      (var(--depth) * var(--ui-sidebar-tree-indent-step, 14px))
+  );
+  padding: 1px var(--ui-sidebar-inline-padding, 8px) 4px
+    calc(var(--ui-sidebar-tree-indent-offset) + 19px);
+  color: var(--color-danger);
+  font-size: var(--font-size-xs);
+  line-height: 1.35;
+}
+
+.ui-sidebar-list-item--stacked {
+  min-height: 54px;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 4px;
+}

package/src/layout/tree/drag-preview.css

@@ -0,0 +1,25 @@
+.ui-workbench-drag-preview {
+  box-sizing: border-box;
+  position: fixed;
+  top: calc(var(--ui-workbench-drag-preview-y) + var(--ui-workbench-drag-preview-offset, 8px));
+  left: calc(var(--ui-workbench-drag-preview-x) + var(--ui-workbench-drag-preview-offset, 8px));
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  max-width: var(--ui-workbench-drag-preview-max-width, 160px);
+  height: 28px;
+  padding: 0 8px;
+  pointer-events: none;
+  color: var(--vscode-list-activeSelectionForeground, #fff);
+  background: var(--vscode-list-activeSelectionBackground, var(--color-accent));
+  border: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
+  font: var(--font-size-sm) var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+}
+
+.ui-workbench-drag-preview__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/layout/tree/index.css

@@ -0,0 +1,10 @@
+/* layout/tree feature styles */
+@import './drag-preview.css';
+@import './template-glyph.css';
+@import './tree-action.css';
+@import './tree-drag-overlay.css';
+@import './tree-drop-line.css';
+@import './tree-drop-zone.css';
+@import './tree-expander.css';
+@import './tree-item.css';
+@import './tree.css';

package/src/layout/tree/template-glyph.css

@@ -0,0 +1,96 @@
+.ui-workbench-template-glyph {
+  position: relative;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  color: var(--ui-workbench-template-glyph-accent, var(--color-accent));
+  background: color-mix(in srgb, currentColor 18%, transparent);
+  border: 1px solid color-mix(in srgb, currentColor 64%, transparent);
+  border-radius: 4px;
+}
+
+.ui-workbench-template-glyph[data-icon='grid'] {
+  background-image:
+    linear-gradient(currentColor 1px, transparent 1px),
+    linear-gradient(90deg, currentColor 1px, transparent 1px);
+  background-size: 8px 8px;
+}
+
+.ui-workbench-template-glyph__text {
+  position: absolute;
+  top: 0;
+  left: 5px;
+  color: currentColor;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+}
+
+.ui-workbench-template-glyph__list-line {
+  position: absolute;
+  right: 4px;
+  left: 4px;
+  height: 1px;
+  background: currentColor;
+  border-radius: 1px;
+}
+
+.ui-workbench-template-glyph__list-line:nth-child(1) {
+  top: 4px;
+}
+
+.ui-workbench-template-glyph__list-line:nth-child(2) {
+  top: 8px;
+}
+
+.ui-workbench-template-glyph__list-line:nth-child(3) {
+  top: 12px;
+}
+
+.ui-workbench-template-glyph__flex-bar {
+  position: absolute;
+  width: 3px;
+  background: currentColor;
+  border-radius: 1px;
+}
+
+.ui-workbench-template-glyph__flex-bar:nth-child(1) {
+  top: 6px;
+  left: 3px;
+  height: 7px;
+}
+
+.ui-workbench-template-glyph__flex-bar:nth-child(2) {
+  top: 4px;
+  left: 8px;
+  height: 10px;
+}
+
+.ui-workbench-template-glyph__flex-bar:nth-child(3) {
+  top: 6px;
+  left: 13px;
+  height: 7px;
+}
+
+.ui-workbench-template-glyph__image-mark {
+  position: absolute;
+  bottom: 3px;
+  left: 3px;
+  width: 0;
+  height: 0;
+  border-right: 5px solid transparent;
+  border-bottom: 6px solid currentColor;
+  border-left: 5px solid transparent;
+}
+
+.ui-workbench-template-glyph__badge-mark {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 7px;
+  height: 7px;
+  background: currentColor;
+  border-radius: 999px;
+}

package/src/layout/tree/tree-action.css

@@ -0,0 +1,20 @@
+.ui-workbench-tree-action.ui-icon-button {
+  width: 18px;
+  height: 18px;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ui-workbench-tree-action.ui-icon-button .codicon {
+  font-size: 12px;
+}
+
+.ui-workbench-tree-action[data-tone='warning'][data-active='true'] {
+  color: var(--vscode-editorWarning-foreground, var(--color-warning));
+}
+
+.ui-workbench-tree-action[data-tone='muted'],
+.ui-workbench-tree-action[data-active='false'] {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}

package/src/layout/tree/tree-drag-overlay.css

@@ -0,0 +1,13 @@
+.ui-workbench-tree-drag-overlay {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--ui-workbench-tree-row-height, 22px);
+  padding: 0 8px;
+  color: var(--vscode-sideBar-foreground, var(--color-text));
+  background: var(--vscode-list-hoverBackground, var(--color-surface-hover));
+  border: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  font: var(--font-size-sm) var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+  opacity: 0.95;
+}

package/src/layout/tree/tree-drop-line.css

@@ -0,0 +1,17 @@
+.ui-workbench-tree-drop-line {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: 2px;
+  pointer-events: none;
+  background: var(--vscode-focusBorder, var(--color-focus-border));
+}
+
+.ui-workbench-tree-drop-line[data-position='above'] {
+  top: 0;
+}
+
+.ui-workbench-tree-drop-line[data-position='below'] {
+  bottom: 0;
+}

package/src/layout/tree/tree-drop-zone.css

@@ -0,0 +1,13 @@
+.ui-workbench-tree-drop-zone {
+  box-sizing: border-box;
+  margin-left: var(--ui-workbench-tree-indent-offset, 8px);
+  outline-offset: -2px;
+}
+
+.ui-workbench-tree-drop-zone[data-empty='true'] {
+  min-height: var(--ui-workbench-tree-row-height);
+}
+
+.ui-workbench-tree-drop-zone[data-highlighted='true'] {
+  outline: 2px solid var(--vscode-focusBorder, var(--color-focus-border));
+}

package/src/layout/tree/tree-expander.css

@@ -0,0 +1,23 @@
+.ui-workbench-tree-expander {
+  width: 14px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.ui-workbench-tree-expander[data-visible='false'] {
+  opacity: 0;
+  pointer-events: none;
+  cursor: default;
+}
+
+.ui-workbench-tree-expander .codicon {
+  font-size: 12px;
+}

package/src/layout/tree/tree-item.css

@@ -0,0 +1,93 @@
+.ui-workbench-tree-item {
+  box-sizing: border-box;
+  position: relative;
+  display: grid;
+  grid-template-columns: 14px 16px minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 6px;
+  height: var(--ui-workbench-tree-row-height);
+  min-width: 0;
+  padding: 0 8px 0 var(--ui-workbench-tree-indent-offset, 8px);
+  color: var(--vscode-sideBar-foreground, var(--color-text));
+  background: transparent;
+  outline: none;
+  user-select: none;
+  touch-action: none;
+  cursor: pointer;
+}
+
+.ui-workbench-tree-item:hover,
+.ui-workbench-tree-item:focus-visible {
+  color: var(--vscode-list-hoverForeground, var(--color-text));
+  background: var(--vscode-list-hoverBackground, var(--color-surface-hover));
+}
+
+.ui-workbench-tree-item:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: -1px;
+}
+
+.ui-workbench-tree-item[data-selected='true'] {
+  color: var(--vscode-list-activeSelectionForeground, #fff);
+  background: var(--vscode-list-activeSelectionBackground, var(--color-accent));
+}
+
+.ui-workbench-tree-item[data-interaction='draggable'] {
+  cursor: grab;
+}
+
+.ui-workbench-tree-item[data-interaction='dragging'] {
+  opacity: 0;
+  cursor: grabbing;
+}
+
+.ui-workbench-tree-item__control,
+.ui-workbench-tree-item__icon,
+.ui-workbench-tree-item__meta,
+.ui-workbench-tree-item__actions {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.ui-workbench-tree-item__control,
+.ui-workbench-tree-item__icon {
+  justify-content: center;
+  color: var(--vscode-icon-foreground, var(--color-icon));
+}
+
+.ui-workbench-tree-item__label,
+.ui-workbench-tree-item__meta {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-tree-item__label {
+  color: inherit;
+}
+
+.ui-workbench-tree-item__meta {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 10px;
+}
+
+.ui-workbench-tree-item[data-selected='true'] .ui-workbench-tree-item__meta {
+  color: inherit;
+  opacity: 0.78;
+}
+
+.ui-workbench-tree-item__actions {
+  justify-content: flex-end;
+  gap: 2px;
+  margin-left: auto;
+}
+
+.ui-workbench-tree-item:hover .ui-workbench-tree-action,
+.ui-workbench-tree-item:focus-within .ui-workbench-tree-action,
+.ui-workbench-tree-item[data-selected='true'] .ui-workbench-tree-action,
+.ui-workbench-tree-action[data-visible='true'] {
+  opacity: 1;
+  pointer-events: auto;
+}

package/src/layout/tree/tree.css

@@ -0,0 +1,49 @@
+.ui-workbench-tree {
+  --ui-workbench-tree-row-height: 22px;
+  --ui-workbench-tree-indent-size: 14px;
+  box-sizing: border-box;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 0;
+  color: var(--vscode-sideBar-foreground, var(--color-text));
+  background: var(--vscode-sideBar-background, var(--color-surface));
+  font-family: var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+  font-size: var(--font-size-sm);
+}
+
+.workbench-tree-prefix,
+.workbench-editor-title,
+.ui-sidebar-list-item strong {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.workbench-tree-prefix {
+  flex-shrink: 0;
+}
+
+.workbench-tree-chevron,
+.workbench-tree-spacer {
+  width: 14px;
+  flex-shrink: 0;
+  color: var(--color-text-subtle);
+  font-size: 12px;
+}
+
+.workbench-tree-spacer {
+  display: inline-block;
+}
+
+.workbench-tree-label,
+.workbench-editor-title,
+.ui-sidebar-list-item strong,
+.ui-sidebar-list-item span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}