@workbench-kit/react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

package/src/layout/panel/index.ts

@@ -1,70 +1,70 @@
-export {
-  FilterBar,
-  FilterBarActiveChips,
-  FilterBarRow,
-  FilterChip,
-  HelpText,
-  Panel,
-  PanelBody,
-  PanelFooter,
-  PanelHeader,
-  PreviewPane,
-  PreviewPaneContent,
-  PreviewPaneDetails,
-  PreviewPaneText,
-  PreviewPaneTitle,
-  PreviewPaneViewport,
-} from './Panel';
-export type {
-  FilterBarActiveChipsProps,
-  FilterBarProps,
-  FilterBarRowProps,
-  FilterChipProps,
-  HelpTextProps,
-  PanelBodyProps,
-  PanelFooterProps,
-  PanelHeaderProps,
-  PanelProps,
-  PreviewPaneContentProps,
-  PreviewPaneDetailsProps,
-  PreviewPaneProps,
-  PreviewPaneTextProps,
-  PreviewPaneTitleProps,
-  PreviewPaneViewportProps,
-} from './Panel';
-export { WorkbenchLabeledPane } from './WorkbenchLabeledPane';
-export type {
-  WorkbenchLabeledPaneChrome,
-  WorkbenchLabeledPaneProps,
-  WorkbenchLabeledPaneTone,
-} from './WorkbenchLabeledPane';
-export {
-  WorkbenchAuthoringShell,
-  WorkbenchPlainTextSource,
-  WorkbenchSurfaceMeta,
-  WorkbenchSurfaceToolbar,
-} from './WorkbenchAuthoringShell';
-export type {
-  WorkbenchAuthoringShellProps,
-  WorkbenchPlainTextSourceProps,
-  WorkbenchSurfaceMetaProps,
-  WorkbenchSurfaceToolbarProps,
-} from './WorkbenchAuthoringShell';
-export { WorkbenchSidebarStack } from './WorkbenchSidebarStack';
-export type { WorkbenchSidebarStackProps } from './WorkbenchSidebarStack';
-export {
-  SourceManagerNavItem,
-  TemplateGallery,
-  TemplateGalleryCard,
-  TemplateGalleryFooter,
-  TemplateGalleryGrid,
-  TemplateGalleryHeader,
-} from './TemplateGallery';
-export type {
-  SourceManagerNavItemProps,
-  TemplateGalleryCardProps,
-  TemplateGalleryFooterProps,
-  TemplateGalleryGridProps,
-  TemplateGalleryHeaderProps,
-  TemplateGalleryProps,
-} from './TemplateGallery';
+export {
+  FilterBar,
+  FilterBarActiveChips,
+  FilterBarRow,
+  FilterChip,
+  HelpText,
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader,
+  PreviewPane,
+  PreviewPaneContent,
+  PreviewPaneDetails,
+  PreviewPaneText,
+  PreviewPaneTitle,
+  PreviewPaneViewport,
+} from './Panel';
+export type {
+  FilterBarActiveChipsProps,
+  FilterBarProps,
+  FilterBarRowProps,
+  FilterChipProps,
+  HelpTextProps,
+  PanelBodyProps,
+  PanelFooterProps,
+  PanelHeaderProps,
+  PanelProps,
+  PreviewPaneContentProps,
+  PreviewPaneDetailsProps,
+  PreviewPaneProps,
+  PreviewPaneTextProps,
+  PreviewPaneTitleProps,
+  PreviewPaneViewportProps,
+} from './Panel';
+export { WorkbenchLabeledPane } from './WorkbenchLabeledPane';
+export type {
+  WorkbenchLabeledPaneChrome,
+  WorkbenchLabeledPaneProps,
+  WorkbenchLabeledPaneTone,
+} from './WorkbenchLabeledPane';
+export {
+  WorkbenchAuthoringShell,
+  WorkbenchPlainTextSource,
+  WorkbenchSurfaceMeta,
+  WorkbenchSurfaceToolbar,
+} from './WorkbenchAuthoringShell';
+export type {
+  WorkbenchAuthoringShellProps,
+  WorkbenchPlainTextSourceProps,
+  WorkbenchSurfaceMetaProps,
+  WorkbenchSurfaceToolbarProps,
+} from './WorkbenchAuthoringShell';
+export { WorkbenchSidebarStack } from './WorkbenchSidebarStack';
+export type { WorkbenchSidebarStackProps } from './WorkbenchSidebarStack';
+export {
+  SourceManagerNavItem,
+  TemplateGallery,
+  TemplateGalleryCard,
+  TemplateGalleryFooter,
+  TemplateGalleryGrid,
+  TemplateGalleryHeader,
+} from './TemplateGallery';
+export type {
+  SourceManagerNavItemProps,
+  TemplateGalleryCardProps,
+  TemplateGalleryFooterProps,
+  TemplateGalleryGridProps,
+  TemplateGalleryHeaderProps,
+  TemplateGalleryProps,
+} from './TemplateGallery';

package/src/layout/panel/preview-pane.css

@@ -1,63 +1,63 @@
-.ui-help-text,
-.ui-workbench-help-text {
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-  font-size: var(--font-size-xs);
-  line-height: 1.45;
-}
-
-.ui-help-text--error,
-.ui-workbench-help-text--error {
-  color: var(--vscode-errorForeground, var(--color-error));
-}
-
-.ui-preview-pane {
-  box-sizing: border-box;
-  flex: 0 0 174px;
-  min-height: 0;
-  padding: 10px;
-  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
-}
-
-.ui-preview-pane__content {
-  display: grid;
-  min-width: 0;
-  gap: 10px;
-  grid-template-columns: 96px minmax(0, 1fr);
-}
-
-.ui-preview-pane__viewport {
-  position: relative;
-  width: 96px;
-  height: 72px;
-  overflow: hidden;
-  background: var(--vscode-editor-background, var(--color-bg));
-  border: 1px solid var(--vscode-panel-border, var(--color-border));
-}
-
-.ui-preview-pane__details {
-  min-width: 0;
-}
-
-.ui-preview-pane__title {
-  overflow: hidden;
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ui-preview-pane__text {
-  overflow: hidden;
-  margin-top: 4px;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-  font-size: var(--font-size-xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ui-preview-pane__text--error {
-  color: var(--vscode-errorForeground, var(--color-error));
-  font-size: 11px;
-  white-space: normal;
-  word-break: break-word;
-}
+.ui-help-text,
+.ui-workbench-help-text {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: var(--font-size-xs);
+  line-height: 1.45;
+}
+
+.ui-help-text--error,
+.ui-workbench-help-text--error {
+  color: var(--vscode-errorForeground, var(--color-error));
+}
+
+.ui-preview-pane {
+  box-sizing: border-box;
+  flex: 0 0 174px;
+  min-height: 0;
+  padding: 10px;
+  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-preview-pane__content {
+  display: grid;
+  min-width: 0;
+  gap: 10px;
+  grid-template-columns: 96px minmax(0, 1fr);
+}
+
+.ui-preview-pane__viewport {
+  position: relative;
+  width: 96px;
+  height: 72px;
+  overflow: hidden;
+  background: var(--vscode-editor-background, var(--color-bg));
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-preview-pane__details {
+  min-width: 0;
+}
+
+.ui-preview-pane__title {
+  overflow: hidden;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-preview-pane__text {
+  overflow: hidden;
+  margin-top: 4px;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-preview-pane__text--error {
+  color: var(--vscode-errorForeground, var(--color-error));
+  font-size: 11px;
+  white-space: normal;
+  word-break: break-word;
+}

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

@@ -1,131 +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;
-}
+.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

@@ -1,48 +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;
-}
+.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;
+}