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

package/src/workbench/settings/sectionedPanelScrollSpy.ts

@@ -1,5 +1,34 @@
 export const WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET = 24;
+export const WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_ACTIVE_LINE_BIAS = 20;
 export const WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD = 2;
+/** Fixed-duration programmatic section scroll (smooth tab/nav clicks). */
+export const WORKBENCH_SECTIONED_PANEL_PROGRAMMATIC_SCROLL_SETTLE_MS_SMOOTH = 700;
+export const WORKBENCH_SECTIONED_PANEL_PROGRAMMATIC_SCROLL_SETTLE_MS_INSTANT = 0;
+
+export function resolveWorkbenchSectionedPanelProgrammaticScrollSettleMs(
+  behavior: ScrollBehavior = 'smooth',
+): number {
+  return behavior === 'smooth'
+    ? WORKBENCH_SECTIONED_PANEL_PROGRAMMATIC_SCROLL_SETTLE_MS_SMOOTH
+    : WORKBENCH_SECTIONED_PANEL_PROGRAMMATIC_SCROLL_SETTLE_MS_INSTANT;
+}
+
+export function resolveWorkbenchSectionedPanelClampedScrollTarget({
+  clientSize,
+  scrollSize,
+  targetScrollPosition,
+}: {
+  clientSize: number;
+  scrollSize: number;
+  targetScrollPosition: number;
+}): number {
+  const maxScroll = Math.max(0, scrollSize - clientSize);
+  return Math.min(Math.max(0, targetScrollPosition), maxScroll);
+}
+
+export const WORKBENCH_SECTIONED_PANEL_INTERSECTION_THRESHOLDS = [0, 0.25, 0.5, 0.75, 1] as const;
+
+export type WorkbenchSectionedPanelScrollSpyAxis = 'vertical' | 'horizontal';
 
 export interface WorkbenchSectionedPanelIntersectionEntry {
   intersectionRatio: number;
@@ -9,43 +38,108 @@ export interface WorkbenchSectionedPanelIntersectionEntry {
 
 export interface WorkbenchSectionedPanelScrollPosition {
   anchorId: string;
-  top: number;
+  /** Section start along the active scroll axis (top or left). */
+  start: number;
+  /** Section end along the active scroll axis (bottom or right). */
+  end: number;
+}
+
+export interface WorkbenchSectionedPanelScrollMetrics {
+  clientSize: number;
+  scrollPosition: number;
+  scrollSize: number;
+}
+
+export function readWorkbenchSectionedPanelScrollMetrics(
+  element: HTMLElement,
+  axis: WorkbenchSectionedPanelScrollSpyAxis = 'vertical',
+): WorkbenchSectionedPanelScrollMetrics {
+  if (axis === 'horizontal') {
+    return {
+      clientSize: element.clientWidth,
+      scrollSize: element.scrollWidth,
+      scrollPosition: element.scrollLeft,
+    };
+  }
+
+  return {
+    clientSize: element.clientHeight,
+    scrollSize: element.scrollHeight,
+    scrollPosition: element.scrollTop,
+  };
 }
 
 export function isWorkbenchSectionedPanelScrollable({
-  clientHeight,
-  scrollHeight,
+  axis = 'vertical',
+  clientSize,
+  scrollSize,
   threshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
 }: {
-  clientHeight: number;
-  scrollHeight: number;
-  threshold?: number;
+  axis?: WorkbenchSectionedPanelScrollSpyAxis | undefined;
+  clientSize: number;
+  scrollSize: number;
+  threshold?: number | undefined;
 }): boolean {
-  return scrollHeight > clientHeight + threshold;
+  void axis;
+  return scrollSize > clientSize + threshold;
 }
 
+export function isWorkbenchSectionedPanelAtScrollStart({
+  scrollPosition,
+  startThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
+}: {
+  scrollPosition: number;
+  startThreshold?: number | undefined;
+}): boolean {
+  return scrollPosition <= startThreshold;
+}
+
+export function isWorkbenchSectionedPanelAtScrollEnd({
+  bottomThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
+  clientSize,
+  scrollPosition,
+  scrollSize,
+}: {
+  bottomThreshold?: number | undefined;
+  clientSize: number;
+  scrollPosition: number;
+  scrollSize: number;
+}): boolean {
+  return scrollPosition + clientSize >= scrollSize - bottomThreshold;
+}
+
+/** @deprecated Use `isWorkbenchSectionedPanelAtScrollStart`. */
 export function isWorkbenchSectionedPanelAtScrollTop({
   scrollTop,
   topThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
 }: {
   scrollTop: number;
-  topThreshold?: number;
+  topThreshold?: number | undefined;
 }): boolean {
-  return scrollTop <= topThreshold;
+  return isWorkbenchSectionedPanelAtScrollStart({
+    scrollPosition: scrollTop,
+    startThreshold: topThreshold,
+  });
 }
 
+/** @deprecated Use `isWorkbenchSectionedPanelAtScrollEnd`. */
 export function isWorkbenchSectionedPanelAtScrollBottom({
   bottomThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
   clientHeight,
   scrollHeight,
   scrollTop,
 }: {
-  bottomThreshold?: number;
+  bottomThreshold?: number | undefined;
   clientHeight: number;
   scrollHeight: number;
   scrollTop: number;
 }): boolean {
-  return scrollTop + clientHeight >= scrollHeight - bottomThreshold;
+  return isWorkbenchSectionedPanelAtScrollEnd({
+    bottomThreshold,
+    clientSize: clientHeight,
+    scrollPosition: scrollTop,
+    scrollSize: scrollHeight,
+  });
 }
 
 export function resolveWorkbenchSectionedPanelActiveAnchorFromIntersection({
@@ -79,20 +173,22 @@ export function resolveWorkbenchSectionedPanelActiveAnchorFromIntersection({
 }
 
 export function resolveWorkbenchSectionedPanelActiveAnchorFromScroll({
+  activeLineBias = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_ACTIVE_LINE_BIAS,
   anchorOrder,
-  clientHeight,
+  clientSize,
   fallbackAnchorId,
   offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
-  scrollHeight,
-  scrollTop,
+  scrollPosition,
+  scrollSize,
   sectionPositions,
 }: {
+  activeLineBias?: number | undefined;
   anchorOrder: readonly string[];
-  clientHeight: number;
+  clientSize: number;
   fallbackAnchorId?: string | undefined;
-  offset?: number;
-  scrollHeight: number;
-  scrollTop: number;
+  offset?: number | undefined;
+  scrollPosition: number;
+  scrollSize: number;
   sectionPositions: readonly WorkbenchSectionedPanelScrollPosition[];
 }): string | undefined {
   if (sectionPositions.length === 0) return fallbackAnchorId;
@@ -100,25 +196,25 @@ export function resolveWorkbenchSectionedPanelActiveAnchorFromScroll({
   const firstAnchorId = anchorOrder[0];
   const lastAnchorId = anchorOrder[anchorOrder.length - 1];
 
-  if (isWorkbenchSectionedPanelAtScrollTop({ scrollTop })) {
+  if (isWorkbenchSectionedPanelAtScrollStart({ scrollPosition })) {
     return firstAnchorId ?? fallbackAnchorId;
   }
 
   if (
-    isWorkbenchSectionedPanelAtScrollBottom({
-      clientHeight,
-      scrollHeight,
-      scrollTop,
+    isWorkbenchSectionedPanelAtScrollEnd({
+      clientSize,
+      scrollPosition,
+      scrollSize,
     })
   ) {
     return lastAnchorId ?? fallbackAnchorId;
   }
 
-  const activeLine = scrollTop + offset;
-  let nextActive = fallbackAnchorId;
+  const activeLine = scrollPosition + offset + activeLineBias;
+  let nextActive = sectionPositions[0]?.anchorId ?? fallbackAnchorId;
 
   for (const section of sectionPositions) {
-    if (section.top <= activeLine) {
+    if (section.start <= activeLine) {
       nextActive = section.anchorId;
     }
   }
@@ -126,18 +222,52 @@ export function resolveWorkbenchSectionedPanelActiveAnchorFromScroll({
   return nextActive ?? fallbackAnchorId;
 }
 
+export function shouldPreserveNavClickActiveAnchor({
+  pinnedScrollPosition,
+  pinnedScrollSize,
+  scrollPosition,
+  scrollSize,
+  threshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
+}: {
+  pinnedScrollPosition: number;
+  pinnedScrollSize: number;
+  scrollPosition: number;
+  scrollSize: number;
+  threshold?: number | undefined;
+}): boolean {
+  return (
+    Math.abs(scrollPosition - pinnedScrollPosition) <= threshold && scrollSize === pinnedScrollSize
+  );
+}
+
+export function resolveWorkbenchSectionedPanelScrollTarget({
+  offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
+  sectionStart,
+}: {
+  offset?: number | undefined;
+  sectionStart: number;
+}): number {
+  return Math.max(0, sectionStart - offset);
+}
+
+/** @deprecated Use `resolveWorkbenchSectionedPanelScrollTarget`. */
 export function resolveWorkbenchSectionedPanelScrollTop({
   offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
   sectionTop,
 }: {
-  offset?: number;
+  offset?: number | undefined;
   sectionTop: number;
 }): number {
-  return Math.max(0, sectionTop - offset);
+  return resolveWorkbenchSectionedPanelScrollTarget({ offset, sectionStart: sectionTop });
 }
 
 export function createWorkbenchSectionedPanelIntersectionRootMargin(
   offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
+  axis: WorkbenchSectionedPanelScrollSpyAxis = 'vertical',
 ) {
+  if (axis === 'horizontal') {
+    return `0px -55% 0px -${offset}px`;
+  }
+
   return `-${offset}px 0px -55% 0px`;
 }

package/src/workbench/settings/settings-responsive.css

@@ -0,0 +1,58 @@
+@media (max-width: 760px) {
+  .workbench-settings-modal {
+    --ui-modal-max-width: 100vw;
+    --ui-modal-max-height: 100vh;
+  }
+
+  .ui-workbench-navigation-panel,
+  .ui-workbench-navigation-panel[data-has-nav='true'] {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .ui-workbench-navigation-panel__nav {
+    height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .ui-workbench-navigation-panel__nav-scroll.ui-scroll-area--vertical {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .workbench-settings-sidebar {
+    flex-direction: row;
+    padding: 8px 12px;
+    border-bottom: 0;
+  }
+
+  .workbench-settings-nav-item {
+    width: auto;
+    flex: 0 0 auto;
+  }
+
+  .workbench-settings-content > .ui-workbench-navigation-panel__content-scroll > * {
+    padding-inline: var(--workbench-panel-padding-inline-compact);
+  }
+
+  .ui-workbench-sectioned-panel__nav {
+    display: flex;
+    padding: 8px 0;
+  }
+
+  .ui-workbench-section-tab-panel__scroll,
+  .ui-workbench-sectioned-panel__scroll {
+    padding-left: var(--workbench-panel-padding-inline-compact);
+  }
+
+  .ui-workbench-structured-data-form__section {
+    max-width: none;
+    padding: var(--workbench-panel-padding-block-start)
+      var(--workbench-panel-padding-inline-compact) var(--workbench-panel-padding-block-end);
+  }
+
+  .ui-workbench-structured-data-form__actions {
+    padding-inline: 12px;
+  }
+}

package/src/workbench/settings/settings.css

@@ -0,0 +1,11 @@
+/* workbench/settings feature styles — Plan A import hub */
+@import './navigation-panel.css';
+@import './sectioned-panel.css';
+@import './section-tab-panel.css';
+@import './structured-data-schema-panel.css';
+@import './structured-data-table-view.css';
+@import './panel-region.css';
+@import './schema-form.css';
+@import './structured-data-form.css';
+@import './workbench-settings-modal.css';
+@import './settings-responsive.css';

package/src/workbench/settings/settingsCommit.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+/**
+ * How settings edits are committed from {@link WorkbenchSettingsModal}.
+ *
+ * - `explicit` (default): host footer Apply/Cancel (or form actions) remain; commit on submit.
+ * - `immediate`: hide the modal footer; emit {@link WorkbenchSettingsPreferenceChange} on each edit
+ *   (VS Code–style apply-on-change). Category content should persist via `onPreferenceChange`
+ *   or {@link useWorkbenchSettingsCommit}.
+ */
+export type WorkbenchSettingsCommitMode = 'explicit' | 'immediate';
+
+export interface WorkbenchSettingsPreferenceChange {
+  /** Active settings category id when the change was emitted. */
+  categoryId: string;
+  /** Preference or field key. */
+  key: string;
+  /** New value for the key. */
+  value: unknown;
+  /** Active scope id when the modal exposes scopes. */
+  scopeId?: string;
+}
+
+export interface WorkbenchSettingsCommitContextValue {
+  categoryId: string;
+  commitMode: WorkbenchSettingsCommitMode;
+  onPreferenceChange?: ((change: WorkbenchSettingsPreferenceChange) => void) | undefined;
+  scopeId: string;
+}
+
+const WorkbenchSettingsCommitContext = createContext<WorkbenchSettingsCommitContextValue | null>(
+  null,
+);
+
+export function WorkbenchSettingsCommitProvider({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: WorkbenchSettingsCommitContextValue;
+}) {
+  return (
+    <WorkbenchSettingsCommitContext.Provider value={value}>
+      {children}
+    </WorkbenchSettingsCommitContext.Provider>
+  );
+}
+
+/**
+ * Reads the active settings commit contract from {@link WorkbenchSettingsModal}.
+ * Returns `null` when rendered outside the modal.
+ */
+export function useWorkbenchSettingsCommit(): WorkbenchSettingsCommitContextValue | null {
+  return useContext(WorkbenchSettingsCommitContext);
+}

package/src/workbench/settings/structured-data-form.css

@@ -0,0 +1,114 @@
+.ui-workbench-structured-data-form {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.ui-workbench-structured-data-form__panel {
+  min-height: 0;
+}
+
+.ui-workbench-structured-data-form__section {
+  max-width: 860px;
+  padding: var(--workbench-panel-padding-block-start) var(--workbench-panel-padding-inline)
+    var(--workbench-panel-padding-block-end) 0;
+}
+
+.ui-workbench-structured-data-form__section + .ui-workbench-structured-data-form__section {
+  border-top: 1px solid var(--color-border);
+}
+
+.ui-workbench-structured-data-form__section h2 {
+  margin: 0;
+  color: var(--color-text);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.ui-workbench-structured-data-form__section h2 {
+  font-size: 1.2rem;
+  line-height: 1.25;
+}
+
+.ui-workbench-structured-data-form__section > p {
+  max-width: 680px;
+  margin: 8px 0 18px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+}
+
+.ui-workbench-structured-data-form__fields {
+  max-width: 680px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ui-workbench-structured-data-form__field .ui-field {
+  margin-bottom: 14px;
+}
+
+.ui-workbench-structured-data-form__field[data-field-type='checkbox'] .ui-field {
+  margin-bottom: 10px;
+}
+
+.ui-workbench-structured-data-form__array-field.ui-field {
+  margin-bottom: 14px;
+}
+
+.ui-workbench-structured-data-form__array {
+  display: grid;
+  gap: 8px;
+}
+
+.ui-workbench-structured-data-form__array-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.ui-workbench-structured-data-form__array-empty {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.ui-workbench-structured-data-form__error {
+  margin: -8px 0 14px;
+  color: var(--color-danger);
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+}
+
+.ui-workbench-structured-data-form__warning {
+  margin: -8px 0 14px;
+  color: var(--color-warning);
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+}
+
+.ui-workbench-structured-data-schema-field-input--invalid :is(.ui-input, .ui-select, .ui-textarea) {
+  border-color: var(--color-warning);
+}
+
+.ui-workbench-structured-data-form__table-section {
+  margin-top: 24px;
+}
+
+.ui-workbench-structured-data-form__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-bg);
+}
+
+.ui-workbench-structured-data-form[data-readonly='true']
+  .ui-workbench-structured-data-form__actions {
+  opacity: 0.82;
+}

package/src/workbench/settings/structured-data-schema-panel.css

@@ -104,19 +104,19 @@
   gap: 6px;
 }
 
-.ui-workbench-sectioned-panel.ui-workbench-structured-data-schema-panel--fill {
+.ui-workbench-structured-data-schema-panel--fill {
   min-height: 0;
   height: 100%;
 }
 
 .ui-workbench-sectioned-panel.ui-workbench-structured-data-schema-panel--fill
   .ui-workbench-sectioned-panel__nav-links {
-  padding-top: 12px;
+  padding-top: 0;
 }
 
-.ui-workbench-sectioned-panel.ui-workbench-structured-data-schema-panel--fill
+.ui-workbench-structured-data-schema-panel--fill
   .ui-workbench-structured-data-schema-panel__section:first-child {
-  padding-top: 12px;
+  padding-top: 30px;
 }
 
 .ui-workbench-structured-data-schema-panel__section {
@@ -126,13 +126,15 @@
   scroll-margin-top: 12px;
 }
 
-.ui-workbench-sectioned-panel__scroll
+.ui-workbench-structured-data-schema-panel
+  :is(.ui-workbench-section-tab-panel__scroll, .ui-workbench-sectioned-panel__scroll)
   .ui-workbench-structured-data-schema-panel__section
   + .ui-workbench-structured-data-schema-panel__section {
   border-top: 1px solid var(--color-border);
 }
 
-.ui-workbench-sectioned-panel__scroll
+.ui-workbench-structured-data-schema-panel
+  :is(.ui-workbench-section-tab-panel__scroll, .ui-workbench-sectioned-panel__scroll)
   .ui-workbench-structured-data-schema-panel__section:last-child {
   padding-bottom: 16px;
 }
@@ -229,20 +231,18 @@
   line-height: 1.45;
 }
 
-.ui-workbench-sectioned-panel.ui-workbench-structured-data-schema-panel[data-readonly='true']
+.ui-workbench-structured-data-schema-panel[data-readonly='true']
   :is(.ui-input, .ui-select, .ui-textarea),
-.ui-workbench-sectioned-panel.ui-workbench-structured-data-schema-panel
+.ui-workbench-structured-data-schema-panel
   :is(.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled),
-.ui-workbench-sectioned-panel.ui-workbench-structured-data-schema-panel
-  :is(.ui-input[readonly], .ui-textarea[readonly]) {
+.ui-workbench-structured-data-schema-panel :is(.ui-input[readonly], .ui-textarea[readonly]) {
   color: var(--color-text-muted);
   background: var(--color-surface);
 }
 
-.ui-workbench-sectioned-panel.ui-workbench-structured-data-schema-panel[data-readonly='true']
+.ui-workbench-structured-data-schema-panel[data-readonly='true']
   :is(.ui-input, .ui-select, .ui-textarea):focus,
-.ui-workbench-sectioned-panel.ui-workbench-structured-data-schema-panel
-  :is(.ui-input[readonly], .ui-textarea[readonly]):focus {
+.ui-workbench-structured-data-schema-panel :is(.ui-input[readonly], .ui-textarea[readonly]):focus {
   border-color: var(--color-border);
   outline: none;
 }
@@ -269,13 +269,12 @@
   display: grid;
   grid-auto-columns: minmax(124px, 1fr);
   grid-auto-flow: column;
-  align-items: start;
-  border-bottom: 1px solid var(--color-border);
+  align-items: stretch;
   color: var(--color-text-muted);
   font-size: 12px;
 }
 
-.ui-workbench-structured-data-schema-panel__table-row:last-child {
+.ui-workbench-structured-data-schema-panel__table-row:last-child > span {
   border-bottom: 0;
 }
 
@@ -286,19 +285,25 @@
   color: var(--color-text);
   background: var(--color-surface);
   font-weight: 600;
-  box-shadow: 0 1px 0 var(--color-border);
 }
 
 .ui-workbench-structured-data-schema-panel__table-row--head > span {
+  min-height: 36px;
+  align-content: center;
   color: var(--color-text-subtle);
 }
 
 .ui-workbench-structured-data-schema-panel__table-row > span {
+  box-sizing: border-box;
   min-width: 0;
-  display: flex;
-  align-items: center;
+  min-height: 44px;
+  display: grid;
+  align-content: start;
+  gap: 5px;
   padding: 8px;
   border-right: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+  overflow-wrap: anywhere;
 }
 
 .ui-workbench-structured-data-schema-panel__table-row > span:last-child {
@@ -308,10 +313,19 @@
 .ui-workbench-structured-data-schema-panel__table-row
   > span
   :is(.ui-input, .ui-select, .ui-textarea) {
+  width: 100%;
   min-height: 26px;
   font-size: 12px;
 }
 
+.ui-workbench-structured-data-schema-panel__table-row
+  > span
+  :is(.ui-workbench-structured-data-form__error, .ui-workbench-structured-data-form__warning) {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
 .ui-workbench-structured-data-schema-panel__table-actions {
   display: flex;
   justify-content: center;