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

package/src/layout/canvas/canvas-resize-handle.css

@@ -0,0 +1,74 @@
+.ui-workbench-canvas-resize-handle {
+  position: absolute;
+  z-index: 120;
+  width: var(--ui-workbench-canvas-resize-handle-size, 8px);
+  height: var(--ui-workbench-canvas-resize-handle-size, 8px);
+  box-sizing: border-box;
+  padding: 0;
+  background: var(--ui-workbench-canvas-resize-handle-bg, #fff);
+  border: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  cursor: var(--ui-workbench-canvas-resize-handle-cursor, se-resize);
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.ui-workbench-canvas-resize-handle[data-position='n'] {
+  top: 0;
+  left: 50%;
+  --ui-workbench-canvas-resize-handle-cursor: ns-resize;
+  transform: translate(-50%, -50%);
+}
+
+.ui-workbench-canvas-resize-handle[data-position='ne'] {
+  top: 0;
+  right: 0;
+  --ui-workbench-canvas-resize-handle-cursor: nesw-resize;
+  transform: translate(50%, -50%);
+}
+
+.ui-workbench-canvas-resize-handle[data-position='e'] {
+  top: 50%;
+  right: 0;
+  --ui-workbench-canvas-resize-handle-cursor: ew-resize;
+  transform: translate(50%, -50%);
+}
+
+.ui-workbench-canvas-resize-handle[data-position='se'] {
+  right: 0;
+  bottom: 0;
+  --ui-workbench-canvas-resize-handle-cursor: nwse-resize;
+  transform: translate(50%, 50%);
+}
+
+.ui-workbench-canvas-resize-handle[data-position='s'] {
+  bottom: 0;
+  left: 50%;
+  --ui-workbench-canvas-resize-handle-cursor: ns-resize;
+  transform: translate(-50%, 50%);
+}
+
+.ui-workbench-canvas-resize-handle[data-position='sw'] {
+  bottom: 0;
+  left: 0;
+  --ui-workbench-canvas-resize-handle-cursor: nesw-resize;
+  transform: translate(-50%, 50%);
+}
+
+.ui-workbench-canvas-resize-handle[data-position='w'] {
+  top: 50%;
+  left: 0;
+  --ui-workbench-canvas-resize-handle-cursor: ew-resize;
+  transform: translate(-50%, -50%);
+}
+
+.ui-workbench-canvas-resize-handle[data-position='nw'] {
+  top: 0;
+  left: 0;
+  --ui-workbench-canvas-resize-handle-cursor: nwse-resize;
+  transform: translate(-50%, -50%);
+}
+
+.ui-workbench-canvas-resize-handle:focus-visible {
+  outline: 1px solid var(--vscode-editor-background, var(--color-bg));
+  outline-offset: -2px;
+}

package/src/layout/canvas/canvas-resize-preview.css

@@ -0,0 +1,11 @@
+.ui-workbench-canvas-resize-preview {
+  box-sizing: border-box;
+  position: fixed;
+  left: var(--ui-workbench-canvas-resize-preview-x, 0);
+  top: var(--ui-workbench-canvas-resize-preview-y, 0);
+  z-index: var(--ui-workbench-canvas-resize-preview-z-index, 2000);
+  width: var(--ui-workbench-canvas-resize-preview-width, auto);
+  height: var(--ui-workbench-canvas-resize-preview-height, auto);
+  border: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
+  pointer-events: none;
+}

package/src/layout/canvas/canvas-selection-marquee.css

@@ -0,0 +1,14 @@
+.ui-workbench-canvas-selection-marquee {
+  position: absolute;
+  left: var(--ui-workbench-canvas-selection-marquee-x, 0);
+  top: var(--ui-workbench-canvas-selection-marquee-y, 0);
+  width: var(--ui-workbench-canvas-selection-marquee-width, auto);
+  height: var(--ui-workbench-canvas-selection-marquee-height, auto);
+  background: color-mix(
+    in srgb,
+    var(--vscode-focusBorder, var(--color-focus-border)) 12%,
+    transparent
+  );
+  border: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  pointer-events: none;
+}

package/src/layout/canvas/canvas-viewport.css

@@ -0,0 +1,18 @@
+.ui-workbench-canvas-viewport {
+  position: relative;
+  width: var(--ui-workbench-canvas-viewport-width, auto);
+  height: var(--ui-workbench-canvas-viewport-height, auto);
+  overflow: hidden;
+  background-color: var(--vscode-editor-background, var(--color-bg));
+  user-select: none;
+}
+
+.ui-workbench-canvas-viewport[data-grid='true'] {
+  background-image: radial-gradient(
+    circle at 1px 1px,
+    var(--ui-workbench-canvas-grid-dot, rgba(255, 255, 255, 0.08)) 1px,
+    transparent 0
+  );
+  background-size: var(--ui-workbench-canvas-viewport-grid-size, 20px)
+    var(--ui-workbench-canvas-viewport-grid-size, 20px);
+}

package/src/layout/canvas/index.css

@@ -0,0 +1,19 @@
+/* layout/canvas feature styles */
+@import './canvas-drag-ghost.css';
+@import './canvas-drag-preview-frame.css';
+@import './canvas-drop-indicator.css';
+@import './canvas-frame-handle.css';
+@import './canvas-frame-surface.css';
+@import './canvas-guide-block.css';
+@import './canvas-guide-layer.css';
+@import './canvas-guide-line.css';
+@import './canvas-item-badge.css';
+@import './canvas-item-frame.css';
+@import './canvas-pane-surface.css';
+@import './canvas-placeholder.css';
+@import './canvas-resize-frame.css';
+@import './canvas-resize-handle.css';
+@import './canvas-resize-preview.css';
+@import './canvas-selection-marquee.css';
+@import './canvas-viewport.css';
+@import './preview-canvas.css';

package/src/layout/canvas/preview-canvas.css

@@ -0,0 +1,144 @@
+.ui-workbench-preview-canvas {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+  touch-action: none;
+  cursor: grab;
+  background-color: var(--vscode-editor-background, var(--color-bg));
+  background-image: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--color-text) 8%, transparent) 1px,
+    transparent 1px
+  );
+  background-size: 20px 20px;
+}
+
+.ui-workbench-preview-canvas[data-panning='true'] {
+  cursor: grabbing;
+}
+
+.ui-workbench-preview-canvas__reset.ui-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
+  border-color: var(--vscode-panel-border, var(--color-border));
+  backdrop-filter: blur(4px);
+}
+
+.ui-workbench-preview-canvas__stage {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  transform-origin: center center;
+}
+
+.ui-workbench-preview-canvas__stage[data-panning='true'] {
+  pointer-events: none;
+}
+
+.ui-workbench-preview-canvas__stage[data-panning='false'] {
+  transition: transform 0.15s ease-out;
+}
+
+.ui-workbench-preview-canvas__frame {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  overflow: hidden;
+  background: var(--color-bg);
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+}
+
+.ui-workbench-preview-canvas__titlebar {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 14px;
+  user-select: none;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-workbench-preview-canvas__window-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ui-workbench-preview-canvas__dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.ui-workbench-preview-canvas__dot[data-tone='close'] {
+  background: #ff5f57;
+}
+
+.ui-workbench-preview-canvas__dot[data-tone='minimize'] {
+  background: #febc2e;
+}
+
+.ui-workbench-preview-canvas__dot[data-tone='maximize'] {
+  background: #28c840;
+}
+
+.ui-workbench-preview-canvas__title {
+  flex: 1;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  text-align: center;
+}
+
+.ui-workbench-preview-canvas__viewport {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-workbench-preview-canvas__viewport[data-grid='true'] {
+  background-color: var(--vscode-editor-background, var(--color-bg));
+  background-image:
+    linear-gradient(
+      to right,
+      color-mix(in srgb, var(--ui-workbench-canvas-selection-color, #0d99ff) 10%, transparent) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--ui-workbench-canvas-selection-color, #0d99ff) 10%, transparent) 1px,
+      transparent 1px
+    );
+  background-size: var(--ui-workbench-preview-viewport-grid-size, 8px)
+    var(--ui-workbench-preview-viewport-grid-size, 8px);
+}
+
+.ui-workbench-preview-canvas__help {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  z-index: 10;
+  padding: 3px 7px;
+  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
+  border-radius: var(--radius-sm);
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+  font-size: 10px;
+  pointer-events: none;
+}

package/src/layout/editor/editor-body.css

@@ -0,0 +1,9 @@
+.ui-workbench-editor-body {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}

package/src/layout/editor/editor-bottom-panel.css

@@ -0,0 +1,44 @@
+.ui-workbench-editor-bottom-panel {
+  box-sizing: border-box;
+  z-index: 10;
+  display: flex;
+  flex: 0 0 var(--ui-workbench-editor-bottom-panel-height, 120px);
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--vscode-panel-background, var(--color-surface));
+  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-workbench-editor-bottom-panel__header {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  min-height: 26px;
+  padding: 0 6px 0 10px;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  background: var(--vscode-sideBar-background, var(--color-surface));
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-workbench-editor-bottom-panel__title {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.ui-workbench-editor-bottom-panel__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}

package/src/layout/editor/editor-frame.css

@@ -0,0 +1,14 @@
+.ui-workbench-editor-frame {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--vscode-foreground, var(--color-text));
+  background: var(--vscode-editor-background, var(--color-bg));
+  font-family: var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+}

package/src/layout/editor/editor-viewport.css

@@ -0,0 +1,7 @@
+.ui-workbench-editor-viewport {
+  position: absolute;
+  inset: 0;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}

package/src/layout/editor/floating-menu.css

@@ -0,0 +1,91 @@
+.ui-workbench-floating-menu {
+  position: absolute;
+  z-index: var(--ui-floating-menu-z-index, 120);
+  display: grid;
+  min-width: var(--ui-workbench-floating-menu-width, 180px);
+  max-width: min(320px, calc(100% - 16px));
+  gap: 2px;
+  padding: 4px;
+  color: var(--vscode-menu-foreground, var(--color-text));
+  background: var(--vscode-menu-background, var(--color-surface));
+  border: 1px solid var(--vscode-menu-border, var(--color-border));
+  border-radius: var(--radius-sm);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.ui-workbench-floating-menu[data-placement='top'] {
+  bottom: var(--ui-workbench-floating-menu-offset, 28px);
+}
+
+.ui-workbench-floating-menu[data-placement='bottom'] {
+  top: var(--ui-workbench-floating-menu-offset, 28px);
+}
+
+.ui-workbench-floating-menu[data-align='start'] {
+  left: var(--ui-workbench-floating-menu-inset, 8px);
+}
+
+.ui-workbench-floating-menu[data-align='end'] {
+  right: var(--ui-workbench-floating-menu-inset, 8px);
+}
+
+.ui-workbench-floating-menu__item {
+  box-sizing: border-box;
+  display: grid;
+  min-height: 26px;
+  grid-template-columns: 20px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+  padding: 0 8px;
+  color: var(--vscode-menu-foreground, var(--color-text-muted));
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-workbench-floating-menu__item:hover,
+.ui-workbench-floating-menu__item:focus-visible {
+  color: var(--vscode-menu-selectionForeground, var(--color-text));
+  background: var(--vscode-menu-selectionBackground, var(--color-surface-hover));
+  outline: none;
+}
+
+.ui-workbench-floating-menu__item:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: -1px;
+}
+
+.ui-workbench-floating-menu__item[data-selected='true'] {
+  color: var(--vscode-list-activeSelectionForeground, var(--color-text));
+  background: var(--vscode-list-activeSelectionBackground, var(--color-surface-hover));
+  font-weight: 600;
+}
+
+.ui-workbench-floating-menu__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.ui-workbench-floating-menu__icon .codicon {
+  font-size: 14px;
+}
+
+.ui-workbench-floating-menu__label,
+.ui-workbench-floating-menu__meta {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-floating-menu__meta {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 11px;
+  font-weight: 400;
+}

package/src/layout/editor/index.css

@@ -0,0 +1,10 @@
+/* layout/editor feature styles */
+@import './editor-body.css';
+@import './editor-bottom-panel.css';
+@import './editor-frame.css';
+@import './editor-viewport.css';
+@import './floating-menu.css';
+@import './parse-error.css';
+@import './problem-item.css';
+@import './problem-list.css';
+@import './render-surface.css';

package/src/layout/editor/parse-error.css

@@ -0,0 +1,9 @@
+.ui-workbench-parse-error {
+  flex-shrink: 0;
+  padding: 6px 14px;
+  color: var(--vscode-errorForeground, var(--color-error));
+  background: color-mix(in srgb, var(--color-error) 12%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--color-error) 28%, transparent);
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+  font-size: var(--font-size-xs);
+}

package/src/layout/editor/problem-item.css

@@ -0,0 +1,52 @@
+.ui-workbench-problem-item {
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+  min-height: 24px;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 12px;
+  color: var(--vscode-editorError-foreground, var(--color-danger));
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  font-size: 11px;
+  line-height: 1.35;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-workbench-problem-item[data-severity='warning'] {
+  color: var(--vscode-editorWarning-foreground, var(--color-warning));
+}
+
+.ui-workbench-problem-item[data-severity='info'] {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.ui-workbench-problem-item:hover,
+.ui-workbench-problem-item:focus-visible {
+  background: var(--vscode-list-hoverBackground, var(--color-surface-hover));
+  outline: none;
+}
+
+.ui-workbench-problem-item:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: -1px;
+}
+
+.ui-workbench-problem-item__location {
+  flex: 0 0 auto;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.ui-workbench-problem-item__message {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: inherit;
+}

package/src/layout/editor/problem-list.css

@@ -0,0 +1,7 @@
+.ui-workbench-problem-list {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 4px 0;
+}

package/src/layout/editor/render-surface.css

@@ -0,0 +1,13 @@
+.ui-workbench-render-surface {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--vscode-editor-background, var(--color-bg));
+}
+
+.ui-workbench-render-surface[data-transparent='true'] {
+  background: transparent;
+}

package/src/layout/fillScrollContract.ts

@@ -0,0 +1,49 @@
+/**
+ * Editor-in-pane fill/scroll ownership contract.
+ *
+ * Flex parents in an editor pane mark themselves as `fill` (clip, no document
+ * scroll). Only named `scroll` owners may overflow. Hosts keep product-specific
+ * owner id lists; the kit owns the role vocabulary, DOM marker, and helpers.
+ */
+
+export const WORKBENCH_FILL_SCROLL_ROLE_ATTR = 'data-ui-fill-scroll-role' as const;
+
+export type WorkbenchFillScrollRole = 'fill' | 'scroll';
+
+export type WorkbenchFillScrollRoleProps = {
+  readonly [WORKBENCH_FILL_SCROLL_ROLE_ATTR]: WorkbenchFillScrollRole;
+};
+
+export interface WorkbenchFillScrollOwnerRegistry {
+  readonly fillOwners: readonly string[];
+  readonly scrollOwners: readonly string[];
+}
+
+/** Spread onto host-owned elements that participate in a fill/scroll chain. */
+export function workbenchFillScrollRoleProps(
+  role: WorkbenchFillScrollRole,
+): WorkbenchFillScrollRoleProps {
+  return { [WORKBENCH_FILL_SCROLL_ROLE_ATTR]: role };
+}
+
+export function isWorkbenchScrollOwner(owner: string, scrollOwners: readonly string[]): boolean {
+  return scrollOwners.includes(owner);
+}
+
+export function isWorkbenchFillOwner(owner: string, fillOwners: readonly string[]): boolean {
+  return fillOwners.includes(owner);
+}
+
+/**
+ * Resolve fill vs scroll for a host-registered owner id.
+ * Scroll owners win when an id appears in both lists (hosts should avoid overlap).
+ */
+export function resolveWorkbenchFillScrollRole(
+  owner: string,
+  registry: WorkbenchFillScrollOwnerRegistry,
+): WorkbenchFillScrollRole {
+  if (isWorkbenchScrollOwner(owner, registry.scrollOwners)) {
+    return 'scroll';
+  }
+  return 'fill';
+}

package/src/layout/fullscreen/fullscreen-backdrop.css

@@ -0,0 +1,31 @@
+.ui-workbench-fullscreen-backdrop {
+  position: absolute;
+  inset: 0;
+}
+
+.ui-workbench-fullscreen-backdrop__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.46;
+  filter: saturate(0.92);
+}
+
+.ui-workbench-fullscreen-backdrop__scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--vscode-editor-background, #111312) 94%, transparent),
+      color-mix(in srgb, var(--vscode-editor-background, #111312) 56%, transparent) 48%,
+      color-mix(in srgb, var(--vscode-editor-background, #111312) 90%, transparent)
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--vscode-editor-background, #111312) 35%, transparent),
+      var(--vscode-editor-background, #111312) 82%
+    );
+}

package/src/layout/fullscreen/fullscreen-button.css

@@ -0,0 +1,44 @@
+.ui-workbench-fullscreen-button {
+  box-sizing: border-box;
+  min-width: 84px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 0 12px;
+  color: #f8fafc;
+  background: rgba(28, 29, 25, 0.68);
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.ui-workbench-fullscreen-button:hover,
+.ui-workbench-fullscreen-button:focus-visible {
+  background: rgba(51, 55, 48, 0.74);
+}
+
+.ui-workbench-fullscreen-button:focus-visible {
+  outline: 2px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: 2px;
+}
+
+.ui-workbench-fullscreen-button[data-prominent='true'] {
+  min-width: 148px;
+  height: 46px;
+  gap: 9px;
+  padding: 0 20px;
+  color: #052e16;
+  background: #22c55e;
+  border-color: rgba(255, 255, 255, 0.2);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.ui-workbench-fullscreen-button[data-prominent='true']:hover,
+.ui-workbench-fullscreen-button[data-prominent='true']:focus-visible {
+  background: #4ade80;
+}