@mcp-b/react-components 0.14.1 → 0.16.0

package/dist/styles/workspace-explorer.css

@@ -1,115 +1,161 @@
+@import "yet-another-react-lightbox/styles.css";
+
 .workspace-explorer {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  inline-size: 100%;
   min-height: 0;
   height: 100%;
+  overflow: hidden;
   font-family: inherit;
   color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-xl);
+  box-shadow: var(--sigvelo-shadow-xs);
+  container-type: inline-size;
 }
 
-/* Compact masthead, sized to the pre-design-system nanites workbench. */
 .workspace-explorer__header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-height: 2.5rem;
-  padding: 0.25rem var(--sigvelo-spacing-2-5);
+  flex: 0 0 auto;
+  min-block-size: var(--sigvelo-control-height-sm);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-1-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-.workspace-explorer__title {
+.workspace-explorer__header .app-top-bar__button {
+  inline-size: var(--sigvelo-control-height-xs);
+  min-inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding: var(--sigvelo-spacing-1-5);
+}
+
+.workspace-explorer__header .app-top-bar__button svg {
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
+}
+
+.workspace-explorer__heading {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sigvelo-spacing-1);
   font-size: var(--sigvelo-text-compact);
-  font-weight: 550;
 }
 
 .workspace-explorer__count {
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-normal);
   color: var(--sigvelo-color-text-muted);
 }
 
 .workspace-explorer__path {
-  flex: 1;
-  min-width: 0;
+  display: block;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--sigvelo-text-xs);
   font-family: var(--sigvelo-font-mono);
-  color: var(--sigvelo-color-text-muted);
-}
-
-.workspace-explorer__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-inline-start: auto;
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-normal);
+  text-overflow: ellipsis;
 }
 
 .workspace-explorer__body {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-1-5);
   min-height: 0;
   flex: 1;
-  padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2-5);
   overflow: auto;
 }
 
 .workspace-explorer__filter {
-  display: flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-1-5);
-  min-height: 2rem;
-  padding-inline: 0.5rem;
+  inline-size: auto;
+  gap: 0;
+  margin-block: var(--sigvelo-spacing-1);
+  margin-inline: var(--sigvelo-spacing-2);
+}
+
+.workspace-explorer__filter-label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.workspace-explorer__filter-control {
+  position: relative;
+}
+
+.workspace-explorer__filter-control > svg {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--sigvelo-spacing-1-5);
+  z-index: 1;
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
+  translate: 0 -50%;
   color: var(--sigvelo-color-text-muted);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
+  pointer-events: none;
 }
 
-.workspace-explorer__filter:focus-within {
-  border-color: var(--sigvelo-color-focus);
+.workspace-explorer__filter-control > [data-slot="field-control"] {
+  block-size: var(--sigvelo-control-height-xs);
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-inline-start: calc(var(--sigvelo-spacing-1-5) + 1rem + var(--sigvelo-spacing-1));
+  font-size: var(--sigvelo-control-text-sm);
 }
 
-.workspace-explorer__filter-input.input {
+.workspace-explorer__tree {
   flex: 1;
-  min-width: 0;
-  height: auto;
-  padding-block: 0.25rem;
-  padding-inline: 0;
-  border: none;
+  min-block-size: 0;
+  border: 0;
   border-radius: 0;
   background: transparent;
-  color: var(--sigvelo-color-text);
-  font-family: inherit;
-  font-size: var(--sigvelo-text-xs);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-1-5);
 }
 
-.workspace-explorer__filter-input.input:focus-visible {
-  outline: var(--sigvelo-focus-width) solid var(--sigvelo-color-focus);
-  outline-offset: var(--sigvelo-focus-offset);
+.workspace-explorer__tree .file-tree__node {
+  min-block-size: var(--sigvelo-control-height-xs);
+  gap: var(--sigvelo-spacing-1);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline-end: var(--sigvelo-spacing-1-5);
+  border-radius: var(--sigvelo-radius-sm);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-snug);
 }
 
-.workspace-explorer__tree {
-  border: none;
-  background: transparent;
-  padding-block: 0;
+.workspace-explorer__tree :is(.file-tree__chevron, .file-tree__icon) svg {
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
 }
 
-/* Rows hug their label — hover reads as a pill around the name, not a
-   full-width bar (carried over from the original nanites workbench). */
-.workspace-explorer__tree .file-tree__node {
-  inline-size: fit-content;
-  max-inline-size: 100%;
-  gap: 0.5rem;
-  padding-block: 0.3125rem;
-  border-radius: var(--sigvelo-radius-md);
+.workspace-explorer__tree .file-tree__chevron {
+  inline-size: var(--sigvelo-text-sm);
+}
+
+.workspace-explorer__tree .file-tree__node--folder .file-tree__icon {
+  color: currentColor;
 }
 
-.workspace-explorer__tree .file-tree__name {
-  flex: 0 1 auto;
-  line-height: 1.4;
+.workspace-explorer__tree .file-tree__node[data-selected] {
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-normal);
+}
+
+.workspace-explorer__tree .file-tree__node:is([data-focused], :focus-visible) {
+  outline: none;
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-muted);
 }
 
 .workspace-explorer__empty {
@@ -134,11 +180,412 @@
 
 .workspace-explorer__code {
   flex: 1;
+  min-block-size: 100%;
   border-radius: 0;
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__markdown-scroll {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__markdown {
+  box-sizing: border-box;
+  inline-size: min(100%, 80ch);
+  margin-inline: auto;
+  padding-block: var(--sigvelo-spacing-8) var(--sigvelo-spacing-12);
+  padding-inline: var(--sigvelo-spacing-6);
+  font-size: var(--sigvelo-text-fluid-base);
+  line-height: var(--sigvelo-leading-relaxed);
+}
+
+.workspace-explorer__markdown-content > :first-child {
+  margin-block-start: 0;
+}
+
+.workspace-explorer__markdown-content > :last-child {
+  margin-block-end: 0;
+}
+
+.workspace-explorer__markdown-content [data-workspace-fragment] {
+  scroll-margin-block-start: var(--sigvelo-spacing-6);
+}
+
+.workspace-explorer__markdown-content [data-workspace-fragment]:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: var(--sigvelo-focus-offset);
+  border-radius: var(--sigvelo-radius-xs);
+}
+
+.workspace-link__external-mark,
+.workspace-link__invalid-mark {
+  margin-inline-start: 0.2em;
+  font-size: 0.8em;
+  text-decoration: none;
+}
+
+.workspace-link--invalid {
+  color: var(--sigvelo-color-text-muted);
+  text-decoration: underline dotted;
+  cursor: not-allowed;
+}
+
+.workspace-link__visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.workspace-explorer__markdown-content
+  :is(
+    [data-streamdown="code-block"],
+    [data-streamdown="mermaid-block"],
+    [data-streamdown="code-block-actions"],
+    [data-streamdown="mermaid-block-actions"]
+  ) {
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__markdown-content [data-streamdown="heading-1"] {
+  margin-block: var(--sigvelo-spacing-8) var(--sigvelo-spacing-3);
+  font-size: var(--sigvelo-text-fluid-2xl);
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.workspace-explorer__markdown-content [data-streamdown="heading-2"] {
+  margin-block: var(--sigvelo-spacing-8) var(--sigvelo-spacing-2);
+  font-size: var(--sigvelo-text-fluid-lg);
+  font-weight: var(--sigvelo-font-weight-bold);
+}
+
+.workspace-explorer__markdown-content
+  :is([data-streamdown="heading-3"], [data-streamdown="heading-4"]) {
+  margin-block: var(--sigvelo-spacing-6) var(--sigvelo-spacing-2);
+  font-size: var(--sigvelo-text-lg);
+}
+
+.workspace-explorer__skill {
+  margin-block-end: var(--sigvelo-spacing-8);
+  padding-block-end: var(--sigvelo-spacing-6);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.workspace-explorer__skill-kicker {
+  margin-block-end: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: var(--sigvelo-tracking-wider);
+  text-transform: uppercase;
+}
+
+.workspace-explorer__skill-name {
+  margin: 0;
+  font-size: var(--sigvelo-text-xl);
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.workspace-explorer__skill-description {
+  margin-block: var(--sigvelo-spacing-2) 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.workspace-explorer__skill-metadata {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--sigvelo-spacing-1) var(--sigvelo-spacing-3);
+  margin-block: var(--sigvelo-spacing-4) 0;
+  font-size: var(--sigvelo-text-sm);
+}
+
+.workspace-explorer__skill-metadata dt {
+  color: var(--sigvelo-color-text-muted);
 }
 
-/* File contents read at gutter scale, like the original workbench preview. */
-.workspace-explorer__code :is(.code-block__content, .code-block__content pre) {
+.workspace-explorer__skill-metadata dd {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--sigvelo-font-mono);
+}
+
+.workspace-explorer__skill-status {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1-5);
+  margin-block-start: var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-success-text);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.workspace-explorer__skill-status[data-invalid] {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.workspace-explorer__skill-errors {
+  margin-block: var(--sigvelo-spacing-2) 0;
+  padding-inline-start: var(--sigvelo-spacing-6);
+  color: var(--sigvelo-color-warning-text);
+  font-size: var(--sigvelo-text-sm);
+}
+
+.workspace-explorer__media-scroll {
+  display: flex;
+  min-block-size: 0;
+  flex: 1;
+  overflow: auto;
+  color-scheme: inherit;
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__media-scroll:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: calc(-1 * var(--sigvelo-focus-offset));
+}
+
+.workspace-explorer__media-figure {
+  display: grid;
+  grid-template-rows: minmax(18rem, 1fr) auto;
+  inline-size: 100%;
+  min-block-size: 100%;
+  margin: 0;
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__media-stage {
+  display: flex;
+  min-inline-size: 0;
+  min-block-size: 18rem;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: var(--sigvelo-spacing-6);
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__image-trigger {
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: 16rem;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sigvelo-spacing-2);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  color: inherit;
+  background-color: transparent;
+  cursor: zoom-in;
+}
+
+.workspace-explorer__image-trigger:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: var(--sigvelo-focus-offset);
+}
+
+.workspace-explorer__image-trigger[aria-disabled="true"] {
+  cursor: default;
+}
+
+.workspace-explorer__image {
+  display: block;
+  max-inline-size: 100%;
+  max-block-size: 100%;
+  inline-size: auto;
+  block-size: auto;
+  object-fit: contain;
+}
+
+.workspace-explorer__pdf {
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: 28rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__audio {
+  inline-size: min(100%, 42rem);
+}
+
+.workspace-explorer__video {
+  display: block;
+  max-inline-size: 100%;
+  max-block-size: 100%;
+  inline-size: auto;
+  block-size: auto;
+  border-radius: var(--sigvelo-radius-md);
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__media-caption {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-4);
+  padding-block: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-spacing-4);
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background-color: var(--sigvelo-color-surface);
+}
+
+.workspace-explorer__media-details {
+  display: flex;
+  min-inline-size: 0;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2) var(--sigvelo-spacing-4);
+  margin: 0;
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.6;
+}
+
+.workspace-explorer__media-details > div {
+  display: flex;
+  min-inline-size: 0;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.workspace-explorer__media-details dt {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.workspace-explorer__media-details dd {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--sigvelo-font-mono);
+}
+
+.workspace-explorer__media-transcript,
+.workspace-explorer__media-fallback a {
+  color: var(--sigvelo-color-primary-text);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.workspace-explorer__media-transcript {
+  flex: 0 0 auto;
+  font-size: var(--sigvelo-text-sm);
+}
+
+.workspace-explorer__media-fallback,
+.workspace-explorer__media-error {
+  max-inline-size: 42rem;
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  text-align: center;
+}
+
+.workspace-explorer__media-error:empty {
+  display: none;
+}
+
+.workspace-explorer__visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.workspace-media-lightbox {
+  --yarl__color_backdrop: var(--sigvelo-color-surface);
+  --yarl__color_button: var(--sigvelo-color-text-muted);
+  --yarl__color_button_active: var(--sigvelo-color-text);
+  --yarl__color_button_disabled: var(--sigvelo-color-text-muted);
+  --yarl__button_background_color: var(--sigvelo-color-surface);
+  --yarl__button_border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  --yarl__button_filter: none;
+  --yarl__button_margin: var(--sigvelo-spacing-1);
+  --yarl__button_padding: var(--sigvelo-spacing-2);
+  --yarl__icon_size: 1.25rem;
+  --yarl__toolbar_padding: var(--sigvelo-spacing-2);
+}
+
+.workspace-media-lightbox .yarl__button {
+  min-inline-size: 2.75rem;
+  min-block-size: 2.75rem;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.workspace-media-lightbox .yarl__button:focus-visible {
+  outline: var(--sigvelo-focus-ring);
+  outline-offset: var(--sigvelo-focus-offset);
+}
+
+@media (forced-colors: active) {
+  .workspace-explorer__tree .file-tree__node:is([data-focused], :focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+    background-color: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  .workspace-explorer__image-trigger,
+  .workspace-explorer__pdf,
+  .workspace-media-lightbox .yarl__button {
+    border-color: ButtonText;
+  }
+
+  .workspace-media-lightbox .yarl__button:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+@container (inline-size < 24rem) {
+  .workspace-explorer__heading {
+    max-inline-size: 34cqi;
+  }
+
+  .workspace-explorer__filter {
+    margin-inline: var(--sigvelo-spacing-1-5);
+  }
+
+  .workspace-explorer__markdown {
+    padding-block-start: var(--sigvelo-spacing-6);
+    padding-inline: var(--sigvelo-spacing-4);
+  }
+
+  .workspace-explorer__skill-metadata {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
+  .workspace-explorer__skill-metadata dd + dt {
+    margin-block-start: var(--sigvelo-spacing-2);
+  }
+
+  .workspace-explorer__media-stage {
+    padding: var(--sigvelo-spacing-3);
+  }
+
+  .workspace-explorer__media-caption {
+    align-items: flex-start;
+    flex-direction: column;
+    padding-inline: var(--sigvelo-spacing-3);
+  }
 }

package/dist/utils/codex-model-catalog.d.ts

@@ -78,7 +78,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("text" | "image")[];
+  readonly inputModalities: ("image" | "text")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -98,7 +98,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("text" | "image")[];
+  readonly inputModalities: ("image" | "text")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -115,7 +115,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("text" | "image")[];
+  readonly inputModalities: ("image" | "text")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -132,7 +132,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("text" | "image")[];
+  readonly inputModalities: ("image" | "text")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];