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

package/src/workbench/shell/activity-bar.css

@@ -0,0 +1,245 @@
+.ui-workbench-activity-bar {
+  flex-shrink: 0;
+  width: var(--workbench-activity-bar-item-size, 48px);
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  gap: 0;
+  user-select: none;
+}
+
+.ui-workbench-activity-bar--hidden {
+  display: none;
+  pointer-events: none;
+}
+
+.ide-body--activity-bar-hidden .ui-workbench-activity-bar {
+  display: none;
+  pointer-events: none;
+}
+
+.workbench-bottom-panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  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-activity-bar__item {
+  --ui-button-width: var(--workbench-activity-bar-item-size);
+  --ui-button-min-width: 0;
+  --ui-button-height: var(--workbench-activity-bar-item-size);
+  --ui-button-min-height: 0;
+  --ui-button-display: flex;
+  --ui-button-align-items: center;
+  --ui-button-justify-content: center;
+  --ui-button-padding: 0;
+  --ui-button-border: none;
+  --ui-button-border-radius: var(--radius-sm);
+  --ui-button-color: var(--color-text-subtle);
+  --ui-button-background: transparent;
+  --ui-button-font-family: inherit;
+  --ui-button-font-size: 0;
+  --ui-button-hover-color: var(--color-text-muted);
+  --ui-button-hover-background: transparent;
+  position: relative;
+  width: var(--workbench-activity-bar-item-size);
+  height: var(--workbench-activity-bar-item-size);
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-subtle);
+  background: transparent;
+  font-family: inherit;
+  font-size: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.1s;
+}
+
+.ui-workbench-activity-bar__item::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 12px;
+  bottom: 12px;
+  width: 2px;
+  border-radius: 0 2px 2px 0;
+  background: transparent;
+}
+
+.ui-workbench-activity-bar__item::before {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  transition: background 0.1s;
+}
+
+.ui-workbench-activity-bar__icon {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-activity-bar__icon .codicon[class*='codicon-'] {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  line-height: 32px;
+}
+
+.ui-workbench-activity-bar__item:hover {
+  color: var(--color-text-muted);
+}
+
+.ui-workbench-activity-bar__item:hover::before {
+  background: var(--color-surface-hover);
+}
+
+.ui-workbench-activity-bar__item--active {
+  --ui-button-color: var(--vscode-activityBar-activeForeground, var(--color-text));
+  --ui-button-hover-color: var(--vscode-activityBar-activeForeground, var(--color-text));
+  color: var(--vscode-activityBar-activeForeground, var(--color-text));
+}
+
+.ui-workbench-activity-bar__item--active::after {
+  background: var(
+    --vscode-activityBar-activeBorder,
+    var(--color-focus-border, var(--color-accent))
+  );
+}
+
+.ui-workbench-activity-bar__item--active::before {
+  background: color-mix(
+    in srgb,
+    var(--vscode-activityBar-activeBorder, var(--color-focus-border, var(--color-accent))) 16%,
+    var(--color-surface-hover)
+  );
+}
+
+.ui-workbench-activity-bar__item:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: -4px;
+}
+
+.ui-workbench-activity-bar__item--reorderable {
+  cursor: grab;
+}
+
+.ui-workbench-activity-bar__item--reorderable:active {
+  cursor: grabbing;
+}
+
+.ui-workbench-activity-bar__item--dragging {
+  opacity: 0.45;
+}
+
+.ui-workbench-activity-bar__item-host {
+  display: flex;
+  flex: 0 0 auto;
+}
+
+.ui-workbench-activity-bar__item-host--reorderable {
+  cursor: grab;
+}
+
+.ui-workbench-activity-bar__item-host--reorderable:active {
+  cursor: grabbing;
+}
+
+.ui-workbench-activity-bar__item-host--dragging {
+  opacity: 0.45;
+}
+
+.ui-workbench-activity-bar__drop-indicator {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  z-index: 2;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent, #2f81f7)));
+  pointer-events: none;
+}
+
+.ui-workbench-activity-bar__drop-indicator--before {
+  top: 0;
+  transform: translateY(-50%);
+}
+
+.ui-workbench-activity-bar__drop-indicator--after {
+  bottom: 0;
+  transform: translateY(50%);
+}
+
+.ui-workbench-activity-bar__spacer {
+  flex: 1;
+}
+
+.ui-workbench-activity-bar--horizontal {
+  width: 100%;
+  height: var(--workbench-activity-bar-item-size, 48px);
+  flex-direction: row;
+  align-items: stretch;
+  border-right: none;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.ui-workbench-activity-bar--horizontal .ui-workbench-activity-bar__item::after {
+  top: auto;
+  right: 12px;
+  bottom: 0;
+  left: 12px;
+  width: auto;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+}
+
+.ui-workbench-activity-bar--horizontal .ui-workbench-activity-bar__drop-indicator {
+  top: 10px;
+  bottom: 10px;
+  left: auto;
+  right: auto;
+  width: 2px;
+  height: auto;
+}
+
+.ui-workbench-activity-bar--horizontal .ui-workbench-activity-bar__drop-indicator--before {
+  left: 0;
+  top: 10px;
+  bottom: 10px;
+  transform: translateX(-50%);
+}
+
+.ui-workbench-activity-bar--horizontal .ui-workbench-activity-bar__drop-indicator--after {
+  right: 0;
+  left: auto;
+  top: 10px;
+  bottom: 10px;
+  transform: translateX(50%);
+}
+
+.ide-root--activity-bar-top .ui-workbench-activity-bar--hidden {
+  display: none;
+  pointer-events: none;
+}
+
+.ide-body--activity-bar-top {
+  flex: 1;
+  min-height: 0;
+}

package/src/workbench/shell/confirmation-flow.css

@@ -0,0 +1,87 @@
+.ui-workbench-confirmation-flow {
+  --ui-modal-width: 440px;
+}
+
+.ui-workbench-confirmation-flow__body {
+  padding: 20px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.ui-workbench-confirmation-flow__message {
+  margin: 0 0 12px;
+  line-height: 1.5;
+}
+
+.ui-workbench-confirmation-flow__detail,
+.ui-workbench-confirmation-flow__disabled-reason {
+  display: block;
+  padding: 8px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  text-overflow: ellipsis;
+}
+
+.ui-workbench-confirmation-flow__detail {
+  color: var(--color-text);
+  background: var(--color-surface);
+  white-space: nowrap;
+}
+
+.ui-workbench-confirmation-flow__disabled-reason {
+  margin-top: 10px;
+  color: var(--color-warning);
+  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
+  white-space: normal;
+}
+
+.ui-workbench-confirmation-flow__side-effect {
+  max-width: 150px;
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  overflow: hidden;
+  color: var(--color-text-subtle);
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-confirmation-flow__confirm[data-status='running'] {
+  cursor: wait;
+}
+
+.ui-workbench-confirmation-story {
+  min-height: 420px;
+  padding: 24px;
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+.ui-workbench-confirmation-story__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.workbench-delete-targets {
+  display: flex;
+  max-height: 160px;
+  flex-direction: column;
+  gap: 4px;
+  overflow: auto;
+  white-space: normal;
+}
+
+.workbench-delete-targets code {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/workbench/shell/index.css

@@ -0,0 +1,5 @@
+/* workbench/shell feature styles */
+@import './activity-bar.css';
+@import './confirmation-flow.css';
+@import './split-view.css';
+@import './status-bar.css';

package/src/workbench/shell/split-view.css

@@ -0,0 +1,188 @@
+.ui-workbench-split-view {
+  display: grid;
+  grid-template-columns: var(--ui-workbench-split-primary-size, 40%) 1px minmax(0, 1fr);
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Secondary track is fixed in px; primary absorbs the remainder from first paint. */
+.ui-workbench-split-view[data-layout-mode='secondary-fixed'] {
+  grid-template-columns:
+    minmax(var(--ui-workbench-split-min-primary-size, 200px), 1fr)
+    1px
+    var(--ui-workbench-split-secondary-size, 260px);
+}
+
+.ui-workbench-split-view[data-layout-mode='secondary-fixed'][data-orientation='vertical'] {
+  grid-template-columns: none;
+  grid-template-rows:
+    minmax(var(--ui-workbench-split-min-primary-size, 200px), 1fr)
+    1px
+    var(--ui-workbench-split-secondary-size, 260px);
+}
+
+.ui-workbench-split-view--primary-collapsed {
+  grid-template-columns: minmax(0, 1fr) !important;
+}
+
+.ui-workbench-split-view--primary-collapsed > .ui-workbench-split-view__primary {
+  display: none;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view--primary-collapsed > .ui-workbench-split-view__separator {
+  display: none;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view--primary-collapsed > .ui-workbench-split-view__secondary {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ui-workbench-split-view--primary-collapsed[data-orientation='vertical'] {
+  grid-template-columns: none !important;
+  grid-template-rows: minmax(0, 1fr) !important;
+}
+
+.ui-workbench-split-view--secondary-collapsed {
+  grid-template-columns: minmax(0, 1fr) !important;
+}
+
+.ui-workbench-split-view--secondary-collapsed > .ui-workbench-split-view__secondary {
+  display: none;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view--secondary-collapsed > .ui-workbench-split-view__separator {
+  display: none;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view--secondary-collapsed > .ui-workbench-split-view__primary {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ui-workbench-split-view--secondary-collapsed[data-orientation='vertical'] {
+  grid-template-columns: none !important;
+  grid-template-rows: minmax(0, 1fr) !important;
+}
+
+.ui-workbench-split-view--secondary-collapsed[data-orientation='vertical']
+  > .ui-workbench-split-view__primary {
+  min-height: 0;
+  height: 100%;
+}
+
+.ui-workbench-split-view[data-orientation='vertical'] {
+  grid-template-columns: none;
+  grid-template-rows: var(--ui-workbench-split-primary-size, 40%) 1px 1fr;
+}
+
+.ui-workbench-split-view__primary,
+.ui-workbench-split-view__secondary {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-workbench-split-view__primary > *:last-child,
+.ui-workbench-split-view__secondary > *:last-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-workbench-split-view.is-dragging .ui-workbench-split-view__primary,
+.ui-workbench-split-view.is-dragging .ui-workbench-split-view__secondary {
+  pointer-events: none;
+  user-select: none;
+}
+
+html.ui-workbench-split-view-resizing,
+html.ui-workbench-split-view-resizing * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+/* Preview canvases ease transform for zoom; freeze that while a split is dragged
+ * so fitScale updates do not read as a brief close-up flash. */
+html.ui-workbench-split-view-resizing .ui-workbench-preview-canvas__stage,
+html.ui-workbench-split-view-resizing--vertical .ui-workbench-preview-canvas__stage {
+  transition: none !important;
+}
+
+html.ui-workbench-split-view-resizing--vertical,
+html.ui-workbench-split-view-resizing--vertical * {
+  cursor: row-resize !important;
+}
+
+.ui-workbench-split-view__separator {
+  cursor: col-resize;
+  background: var(--color-border);
+  position: relative;
+  transition: background 0.15s;
+  touch-action: none;
+  user-select: none;
+}
+
+.ui-workbench-split-view[data-orientation='vertical'] .ui-workbench-split-view__separator {
+  cursor: row-resize;
+}
+
+.ui-workbench-split-view__separator::after {
+  content: '';
+  position: absolute;
+  inset: 0 -8px;
+}
+
+.ui-workbench-split-view[data-orientation='vertical'] .ui-workbench-split-view__separator::after {
+  inset: -8px 0;
+}
+
+.ui-workbench-split-view__separator:hover,
+.ui-workbench-split-view__separator.is-dragging {
+  background: var(--color-text-subtle);
+}
+
+.ui-workbench-split-view__separator:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
+}
+
+.ui-workbench-split-view__handle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 3px;
+  height: 24px;
+  border-radius: 2px;
+  background: var(--color-text-muted);
+  opacity: 0;
+  transition: opacity 0.15s;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view[data-orientation='vertical'] .ui-workbench-split-view__handle {
+  width: 24px;
+  height: 3px;
+}
+
+.ui-workbench-split-view__separator:hover .ui-workbench-split-view__handle,
+.ui-workbench-split-view__separator.is-dragging .ui-workbench-split-view__handle {
+  opacity: 1;
+}

package/src/workbench/shell/status-bar.css

@@ -0,0 +1,141 @@
+.ui-workbench-status-bar {
+  flex-shrink: 0;
+  min-height: var(--workbench-statusbar-height);
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  padding: 0 8px;
+  color: var(--color-statusbar-text, var(--color-text));
+  background: var(--color-statusbar-bg, var(--color-surface));
+  border-top: 1px solid var(--color-statusbar-border, var(--color-border));
+  font-size: 12px;
+  user-select: none;
+}
+
+.ui-workbench-status-bar--compact {
+  min-height: var(--workbench-statusbar-height-compact, var(--workbench-statusbar-height));
+}
+
+.ui-workbench-status-bar__section {
+  min-width: 0;
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.ui-workbench-status-bar__section--end {
+  margin-left: auto;
+}
+
+.ui-workbench-status-bar__item {
+  --ui-button-min-width: 0;
+  --ui-button-min-height: inherit;
+  --ui-button-height: auto;
+  --ui-button-display: inline-flex;
+  --ui-button-align-items: center;
+  --ui-button-gap: 5px;
+  --ui-button-padding: 0 8px;
+  --ui-button-border: 0;
+  --ui-button-border-radius: 0;
+  --ui-button-color: var(--color-text-muted);
+  --ui-button-background: transparent;
+  --ui-button-font-family: inherit;
+  --ui-button-font-size: inherit;
+  --ui-button-font-weight: 400;
+  --ui-button-hover-color: var(--color-text);
+  --ui-button-hover-background: var(--color-surface-hover);
+  --ui-button-disabled-color: var(--color-text-subtle);
+  --ui-button-disabled-background: transparent;
+  min-width: 0;
+  min-height: inherit;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 0;
+  color: var(--color-text-muted);
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+.ui-workbench-status-bar__item:hover,
+.ui-workbench-status-bar__item:focus-visible,
+.ui-workbench-status-bar__item--active {
+  --ui-button-color: var(--color-text);
+  --ui-button-background: var(--color-surface-hover);
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}
+
+.ui-workbench-status-bar__item:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
+}
+
+.ui-workbench-status-bar__item:disabled {
+  color: var(--color-text-subtle);
+  background: transparent;
+  cursor: default;
+}
+
+.ui-workbench-status-bar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-status-bar__icon .codicon {
+  font-size: 13px;
+}
+
+.ui-workbench-status-bar__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-status-bar__status {
+  width: 12px;
+  min-width: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-status-bar__status-dot {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-text-subtle) 45%, transparent);
+}
+
+.ui-workbench-status-bar__item[data-status='running'] .ui-workbench-status-bar__status-dot {
+  background: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
+}
+
+.ui-workbench-status-bar__item[data-status='completed'] .ui-workbench-status-bar__status-dot {
+  background: #5fbf72;
+}
+
+.ui-workbench-status-bar__item[data-status='failed'] .ui-workbench-status-bar__status-dot {
+  background: var(--color-danger);
+}
+
+.ui-workbench-status-bar__item[data-status='warning'] .ui-workbench-status-bar__status-dot {
+  background: var(--color-warning);
+}
+
+.ui-workbench-status-bar__item[data-status='waiting'] .ui-workbench-status-bar__status-dot {
+  background: #d6aa37;
+}
+
+.ui-workbench-status-bar__item[data-status='cancelled'] .ui-workbench-status-bar__status-dot,
+.ui-workbench-status-bar__item[data-status='disabled'] .ui-workbench-status-bar__status-dot,
+.ui-workbench-status-bar__item[data-status='unavailable'] .ui-workbench-status-bar__status-dot {
+  background: color-mix(in srgb, var(--color-text-subtle) 36%, transparent);
+}