@mcp-b/react-components 0.44.1 → 0.46.0

package/dist/styles/mcp-plugin-catalog.css

@@ -225,6 +225,10 @@
   gap: var(--sigvelo-spacing-3-5);
 }
 
+.mcp-plugin-details__identity :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .mcp-plugin-details__identity > .separator {
   block-size: var(--sigvelo-spacing-8);
   background-color: color-mix(in oklab, currentcolor, transparent 30%);

package/dist/styles/mcp-server-picker.css

@@ -55,6 +55,8 @@
   justify-content: center;
   inline-size: var(--sigvelo-control-icon-size-lg);
   block-size: var(--sigvelo-control-icon-size-lg);
+  /* Lucide and monochrome protocol marks tint from this. Hardcoded brand
+     fills ignore it; Discord sets its own color on the mark. */
   color: var(--sigvelo-color-text-muted);
 }
 

package/dist/styles/message-scroller.css

@@ -21,6 +21,11 @@
   contain: content;
 }
 
+.message-scroller__viewport:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
+}
+
 .message-scroller__viewport[data-scrollable~="end"] {
   --sigvelo-scroll-fade-end: var(--message-scroller-fade-size);
 }

package/dist/styles/prompt-input.css

@@ -212,14 +212,22 @@
   font-family: inherit;
   font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: var(--sigvelo-leading-normal);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
   resize: none;
   overflow-block: hidden;
 }
 
-.prompt-input__textarea::placeholder {
+.prompt-input__textarea::placeholder,
+.prompt-input__textarea[data-empty]::before {
   color: var(--sigvelo-control-placeholder-color);
 }
 
+.prompt-input__textarea[data-empty]::before {
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
 .prompt-input__textarea:focus,
 .prompt-input__textarea:focus-visible {
   border: none;
@@ -553,11 +561,15 @@
   flex: 0 0 auto;
 }
 
-.prompt-input__command-icon > svg {
+.prompt-input__command-icon > :is(svg, img, .app-icon) {
   inline-size: var(--sigvelo-density-compact-control-icon-size);
   block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
+.prompt-input__command-icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
 .prompt-input__command-copy {
   display: grid;
   grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
@@ -584,51 +596,6 @@
   overflow-wrap: anywhere;
 }
 
-.prompt-input__references {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sigvelo-spacing-1);
-}
-
-.prompt-input__reference {
-  position: relative;
-  gap: var(--sigvelo-spacing-1);
-  padding-inline: var(--sigvelo-spacing-1);
-  color: var(--sigvelo-color-primary-text);
-  font-weight: inherit;
-  font-size: var(--sigvelo-density-compact-control-font-size);
-}
-
-.prompt-input__reference-icon,
-.prompt-input__reference-remove {
-  display: inline-flex;
-  flex: 0 0 auto;
-}
-
-.prompt-input__reference-label {
-  max-inline-size: 18rem;
-}
-
-.prompt-input__reference-remove {
-  position: absolute;
-  inset-inline-end: calc(-1 * var(--sigvelo-spacing-3));
-  color: var(--sigvelo-color-text-muted);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.prompt-input__reference:hover .prompt-input__reference-remove,
-.prompt-input__reference:focus-visible .prompt-input__reference-remove {
-  opacity: 1;
-}
-
-/* Local wrap. Not --sigvelo-layout-break-compact. */
-@container prompt-input (inline-size < 28rem) {
-  .prompt-input__reference-label {
-    max-inline-size: 12rem;
-  }
-}
-
 .prompt-input__command-description,
 .prompt-input__context-description {
   color: var(--sigvelo-color-text-muted);
@@ -674,7 +641,6 @@
   .prompt-input__button,
   .prompt-input__attachment-remove,
   .prompt-input__recording-button,
-  .prompt-input__reference,
   .prompt-input__submit {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }
@@ -690,11 +656,6 @@
     min-block-size: var(--sigvelo-control-height-xl);
   }
 
-  .prompt-input__reference-remove {
-    position: static;
-    opacity: 1;
-  }
-
   .prompt-input__attachment[data-image] .prompt-input__attachment-remove {
     position: static;
   }

package/dist/styles/responsive-sidebar-shell.css

@@ -40,6 +40,26 @@
   overflow: hidden;
 }
 
+.responsive-sidebar-shell__sidebar-content {
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: hidden;
+}
+
+.responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"]
+  .responsive-sidebar-shell__sidebar {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.responsive-sidebar-shell__sidebar-leading {
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  display: flex;
+  align-items: center;
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+}
+
 .responsive-sidebar-shell__sidebar {
   grid-column: 1;
   grid-row: 1;
@@ -101,6 +121,15 @@
   display: none;
 }
 
+.responsive-sidebar-shell__toggle--sidebar-fallback {
+  display: none;
+}
+
+.responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"][data-sidebar-open="false"]
+  .responsive-sidebar-shell__toggle--sidebar-fallback {
+  display: inline-flex;
+}
+
 @media (forced-colors: active) {
   .responsive-sidebar-shell,
   .responsive-sidebar-shell__frame {
@@ -193,6 +222,20 @@
     display: none;
   }
 
+  /* The closed-sidebar fallback has a deliberately specific wide-layout
+     selector above. When the compact title owns drawer disclosure, beat that
+     selector explicitly so the bar never presents two controls for one action. */
+  .responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"][data-sidebar-open="false"]
+    [data-compact-leading]
+    .responsive-sidebar-shell__toggle--sidebar-fallback {
+    display: none;
+  }
+
+  .responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"]
+    .responsive-sidebar-shell__sidebar-leading {
+    display: none;
+  }
+
   .responsive-sidebar-shell__compact-leading {
     display: contents;
   }
@@ -211,6 +254,10 @@
     font-weight: var(--sigvelo-font-weight-semibold);
   }
 
+  .responsive-sidebar-shell__title-trigger:focus-visible {
+    box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
+  }
+
   .responsive-sidebar-shell__title-trigger span {
     min-inline-size: 0;
     overflow: hidden;

package/dist/styles/subagent-run.css

@@ -2,14 +2,39 @@
    --sigvelo-elevation-floating, not a border. Forced colors restores a real
    border at the end of this file. */
 .subagent-run__selector {
-  max-inline-size: 14rem;
+  max-inline-size: 18rem;
+  /* Two text lines (name over live status) inside a pill: the control's fixed
+     small height would clip the second, so let the content size it. */
+  block-size: auto;
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding-block: var(--sigvelo-spacing-1);
   justify-content: flex-start;
-  border-radius: var(--sigvelo-radius-full);
+  border-radius: var(--sigvelo-radius-lg);
   background-color: var(--sigvelo-color-surface-raised);
   box-shadow: var(--sigvelo-elevation-floating);
   text-align: start;
 }
 
+/* The run's name over its live status line. Shared by the selector chip and
+   the drill-in's top bar so one run reads the same in both. */
+.subagent-run__text {
+  display: grid;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.subagent-run__status {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+/* Scoped to the label, not the chip, so the drill-in bar tints the same. */
+.subagent-run__text[data-status="error"] .subagent-run__status {
+  color: var(--sigvelo-color-danger-text);
+}
+
 /* The ghost hover would swap the raised surface for a near-transparent tint;
    keep the surface and tint over it instead. */
 .subagent-run__selector:hover:not([data-disabled]) {
@@ -42,29 +67,14 @@
   margin-block-start: var(--sigvelo-spacing-2);
 }
 
-.subagent-run__tray {
-  display: grid;
-  gap: var(--sigvelo-spacing-1-5);
-  min-inline-size: 0;
-}
-
-.subagent-run__tray-label {
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-snug);
-}
-
+/* Size comes from the surrounding control — the selector's button recipe, the
+   top bar's title — so one label keeps each surface's own type scale. */
 .subagent-run__title {
   min-inline-size: 0;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
-.subagent-run__selector .subagent-run__title {
-  font-size: var(--sigvelo-text-compact);
-}
-
 .subagent-run__indicator {
   display: inline-flex;
   flex: 0 0 auto;

package/dist/styles/think-full-app.css

@@ -1,9 +1,68 @@
+.think-full-app-shell {
+  --think-full-app-panel-outline: color-mix(in srgb, var(--sigvelo-color-text) 14%, transparent);
+  --sigvelo-color-surface: light-dark(
+    var(--sigvelo-color-surface-light),
+    var(--sigvelo-color-surface-under-dark)
+  );
+  --sigvelo-color-surface-raised: light-dark(
+    var(--sigvelo-color-surface-raised-light),
+    var(--sigvelo-color-surface-under-dark)
+  );
+  --sigvelo-color-neutral-bg-subtle: light-dark(
+    var(--sigvelo-color-neutral-bg-subtle-light),
+    rgb(255 255 255 / 4%)
+  );
+  --responsive-sidebar-shell-sidebar-surface: light-dark(
+    var(--sigvelo-color-surface-raised),
+    var(--sigvelo-color-surface-under)
+  );
+
+  background: var(--sigvelo-color-surface-under);
+}
+
+.think-full-app-shell > .responsive-sidebar-shell__frame > .responsive-sidebar-shell__sidebar {
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.think-full-app-shell .responsive-sidebar-shell__main {
+  background: var(--sigvelo-color-surface);
+}
+
+/* The thread rail owns its wide-layout toggle. Seat it in the picker's header
+   instead of reserving a second row above the sidebar content. */
+.think-full-app-shell[data-sidebar-toggle-placement="sidebar"] .responsive-sidebar-shell__sidebar {
+  position: relative;
+  display: block;
+}
+
+.think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
+  .responsive-sidebar-shell__sidebar-content {
+  block-size: 100%;
+}
+
+.think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
+  .responsive-sidebar-shell__sidebar-leading {
+  position: absolute;
+  inset-block-start: var(--sigvelo-spacing-1);
+  inset-inline-end: var(--sigvelo-spacing-2);
+  z-index: var(--sigvelo-z-chrome);
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  padding: 0;
+}
+
+.think-full-app-shell[data-sidebar-toggle-placement="sidebar"] .think-thread-picker__header {
+  padding-inline-end: calc(
+    var(--sigvelo-layout-gutter) + var(--sigvelo-density-compact-control-height)
+  );
+}
+
 .think-full-app {
   position: relative;
   container: think-full-app / inline-size;
   display: grid;
   grid-template-rows: var(--sigvelo-layout-track-fill);
-  background: var(--sigvelo-color-surface);
+  background: transparent;
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
@@ -18,6 +77,7 @@
   grid-template-columns: auto var(--sigvelo-layout-track-fill);
   grid-template-rows: var(--sigvelo-layout-track-fill);
   margin: var(--sigvelo-layout-gutter);
+  overflow: visible;
 }
 
 .think-full-app__view-switch {
@@ -26,6 +86,10 @@
   background: transparent;
 }
 
+.think-full-app__compact-view-menu {
+  display: none;
+}
+
 .think-full-app__chat-surface {
   grid-column: 1;
   grid-row: 1;
@@ -66,6 +130,21 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   grid-template-rows: var(--sigvelo-layout-track-fill) auto;
 }
 
+/* The raised workbench establishes the desktop bottom gutter. Keep the
+   floating composer on that same baseline and give it the same quiet edge. */
+.think-full-app-shell .agent-chat__composer {
+  padding-block-end: max(var(--sigvelo-spacing-1), env(safe-area-inset-bottom, 0px));
+}
+
+.think-full-app-shell .agent-chat__composer > .prompt-input {
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--think-full-app-panel-outline);
+  background: light-dark(
+    var(--sigvelo-color-surface-raised-light),
+    var(--sigvelo-color-surface-raised-dark)
+  );
+}
+
 /* Transparent column: the aside positions the plane, it is not a material of
    its own. */
 .think-full-app__aside {
@@ -87,6 +166,16 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   translate: calc(var(--sigvelo-layout-gap) * 1.5) 0;
 }
 
+/* Keep the resize target generous without painting a full-height rule beside
+   the rounded panel. A short grip appears only on hover, focus, or drag. */
+.think-full-app__resizer::before {
+  inset-block: 50% auto;
+  block-size: calc(var(--sigvelo-spacing-6) * 2);
+  inline-size: 2px;
+  border-radius: var(--sigvelo-radius-full);
+  translate: -50% -50%;
+}
+
 .think-full-app__workbench-slot,
 .think-full-app__workbench,
 .think-full-app__workbench-panel {
@@ -100,9 +189,11 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
 
 /* The app's one raised plane. Panels fill it and never draw a second edge. */
 .think-full-app__workbench-slot {
-  border-radius: var(--sigvelo-radius-lg);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: var(--sigvelo-elevation-floating);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--think-full-app-panel-outline);
+  border-radius: var(--sigvelo-radius-xl);
+  background: light-dark(var(--sigvelo-color-surface-raised), var(--sigvelo-color-surface-under));
+  box-shadow: var(--sigvelo-elevation-bar);
 }
 
 /* The panel stands in for itself while its first read is in flight, so the
@@ -136,6 +227,7 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
     grid-template-columns: var(--sigvelo-layout-track-fill);
     margin: 0;
     overflow: hidden;
+    background: var(--sigvelo-color-surface);
   }
 
   .think-full-app__aside {
@@ -155,6 +247,7 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
      themselves raised are defined after this stylesheet. */
   .think-full-app__workbench-slot,
   .think-full-app .think-full-app__workbench {
+    border: 0;
     border-radius: 0;
     background: var(--sigvelo-color-surface);
     box-shadow: none;
@@ -197,6 +290,48 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   }
 }
 
+@container responsive-sidebar-shell (inline-size <= 56rem) {
+  .think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
+    .responsive-sidebar-shell__sidebar {
+    display: grid;
+  }
+
+  .think-full-app-shell > .responsive-sidebar-shell__frame > .responsive-sidebar-shell__sidebar {
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      color-mix(in srgb, var(--sigvelo-color-text) 24%, transparent);
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--sigvelo-color-surface) 36%, transparent),
+      var(--sigvelo-elevation-overlay);
+  }
+
+  .think-full-app__app-bar {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  .think-full-app__app-bar .app-top-bar__title {
+    inline-size: auto;
+    max-inline-size: min(20rem, 60vw);
+    justify-self: center;
+    text-align: center;
+  }
+
+  .think-full-app__view-switch {
+    display: none;
+  }
+
+  .think-full-app__compact-view-menu {
+    display: flex;
+  }
+
+  .think-full-app-shell .agent-chat__composer {
+    padding-block-end: max(var(--sigvelo-spacing-3), env(safe-area-inset-bottom, 0px));
+  }
+
+  .think-full-app-shell :is(.think-full-app__chat, .think-full-app__chat-inner) {
+    --agent-chat-column-inset: var(--sigvelo-spacing-4);
+  }
+}
+
 @media (forced-colors: active) {
   .think-full-app,
   .think-full-app__chat-surface,

package/dist/styles/think-sidepanel.css

@@ -44,11 +44,6 @@
   font: inherit;
 }
 
-.think-sidepanel__run-title > svg,
-.think-sidepanel__run-title > .nanite-mark {
-  flex: none;
-}
-
 .think-sidepanel__menu-switch-item {
   justify-content: space-between;
   gap: var(--sigvelo-spacing-3);
@@ -65,6 +60,15 @@
   color: var(--sigvelo-color-text-muted);
 }
 
+.think-sidepanel .app-icon-stack .app-icon :is(img, .app-icon__image) {
+  color: unset;
+}
+
+.think-sidepanel .button .app-icon-stack .app-icon :is(svg, img) {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 @media (forced-colors: active) {
   .think-sidepanel,
   .think-sidepanel__gate {

package/dist/styles/think-thread-picker.css

@@ -1,4 +1,5 @@
 .think-thread-picker {
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
   min-block-size: 0;
@@ -6,6 +7,7 @@
   grid-template-rows: auto auto var(--sigvelo-layout-track-fill) auto;
   overflow: hidden;
   border-inline-end: 0;
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   /* No material of its own: it fills whatever holds it — the shell's rail, the
      compact drawer, a host's own panel — and painting a colour here would
      cover the one that surface chose. */
@@ -28,17 +30,17 @@
   min-inline-size: 0;
   margin: 0;
   flex: 1 1 auto;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-density-compact-control-font-size);
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-tight);
+  line-height: var(--sigvelo-text-compact-leading);
 }
 
 .think-thread-picker__search {
   --sigvelo-recipe-control-height: var(--sigvelo-density-compact-control-height);
   --sigvelo-recipe-control-radius: var(--sigvelo-radius-sm);
 
-  padding: 0 var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
+  padding: 0 0 var(--sigvelo-spacing-2);
 }
 
 .think-thread-status-indicators {
@@ -92,7 +94,8 @@
 }
 
 .think-thread-picker__viewport {
-  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter) var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter);
+  padding-inline: 0;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
@@ -305,6 +308,7 @@
     block-size: auto;
     max-block-size: inherit;
     grid-template-rows: auto auto auto;
+    padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   }
 
   .think-thread-picker__header {
@@ -316,14 +320,11 @@
     --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
     --sigvelo-recipe-control-icon-size: var(--sigvelo-density-compact-control-icon-size);
 
-    padding: 0 var(--sigvelo-spacing-1);
-    border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-      var(--sigvelo-color-neutral-border-subtle);
+    padding: 0 0 var(--sigvelo-spacing-2);
   }
 
-  .think-thread-picker__search .field__control {
-    border-color: transparent;
-    background: transparent;
+  .think-thread-picker__search .field__control:focus-visible {
+    box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
   }
 
   .think-thread-picker__nav,
@@ -335,7 +336,7 @@
   }
 
   .think-thread-picker__viewport {
-    padding: var(--sigvelo-spacing-1);
+    padding: var(--sigvelo-spacing-1) 0;
   }
 }
 

package/dist/styles/workspace-mount-manager.css

@@ -22,25 +22,3 @@
 .workspace-mount-manager__path code {
   overflow-wrap: anywhere;
 }
-
-.workspace-mount-manager__permission {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-1);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-snug);
-}
-
-.workspace-mount-manager__permission > svg {
-  inline-size: var(--sigvelo-control-icon-size-sm);
-  block-size: var(--sigvelo-control-icon-size-sm);
-}
-
-.workspace-mount-manager__permission[data-permission="granted"] {
-  color: var(--sigvelo-color-success-text);
-}
-
-.workspace-mount-manager__permission[data-permission="denied"] {
-  color: var(--sigvelo-color-danger-text);
-}

package/dist/utils/composer-link.d.ts

@@ -0,0 +1,59 @@
+//#region src/utils/composer-link.d.ts
+declare const COMPOSER_LINK_ORIGIN = "https://composer.invalid";
+declare const COMPOSER_LINK_KINDS: readonly ["command", "mcp", "skill", "tab", "file"];
+type ComposerLinkKind = (typeof COMPOSER_LINK_KINDS)[number];
+declare const COMPOSER_CHROME_ICONS: readonly ["box"];
+type ComposerChromeIcon = (typeof COMPOSER_CHROME_ICONS)[number];
+interface ComposerLinkParts {
+  kind: ComposerLinkKind;
+  value: string;
+  label?: string;
+  iconSrc?: string;
+  chromeIcon?: ComposerChromeIcon;
+}
+interface ParsedComposerLink extends ComposerLinkParts {
+  href: string;
+  label: string;
+}
+type ComposerDraftSegment = {
+  type: "text";
+  value: string;
+} | {
+  type: "link";
+  href: string;
+  label: string;
+  parts: ParsedComposerLink;
+};
+declare function isComposerLinkKind(value: string): value is ComposerLinkKind;
+declare function isComposerChromeIcon(value: string): value is ComposerChromeIcon;
+declare function composerLinkHref(parts: ComposerLinkParts): string;
+declare function parseComposerHref(href: string | undefined): ParsedComposerLink | undefined;
+declare function escapeComposerLinkLabel(label: string): string;
+/** Brand hex from a Simple Icons URL, skipped when it would vanish as text. */
+declare function brandHexFromIconSrc(src: string | undefined): string | undefined;
+/** Most chromatic opaque pixel, skipped when the mark is charcoal, white, or gray. */
+declare function chromaticHexFromPixels(data: Uint8ClampedArray): string | undefined;
+declare function sampleImageAccent(image: HTMLImageElement): string | undefined;
+declare function serializeComposerLink(parts: ComposerLinkParts & {
+  label: string;
+}): string;
+declare function splitComposerDraft(text: string): ComposerDraftSegment[];
+declare function parseComposerLinks(text: string): ParsedComposerLink[];
+declare function composerTriggerMatch(text: string): {
+  trigger: "/" | "@";
+  query: string;
+  triggerIndex: number;
+} | undefined;
+declare function inferComposerLinkKind(command: {
+  id?: string;
+}, trigger: "/" | "@"): ComposerLinkKind;
+declare function replaceComposerTrigger(draft: string, command: {
+  id?: string;
+  value: string;
+  label: string;
+  href?: string;
+  iconSrc?: string;
+}, trigger: "/" | "@"): string;
+declare function composerDraftToPrompt(text: string): string;
+//#endregion
+export { COMPOSER_CHROME_ICONS, COMPOSER_LINK_KINDS, COMPOSER_LINK_ORIGIN, ComposerChromeIcon, ComposerDraftSegment, ComposerLinkKind, ComposerLinkParts, ParsedComposerLink, brandHexFromIconSrc, chromaticHexFromPixels, composerDraftToPrompt, composerLinkHref, composerTriggerMatch, escapeComposerLinkLabel, inferComposerLinkKind, isComposerChromeIcon, isComposerLinkKind, parseComposerHref, parseComposerLinks, replaceComposerTrigger, sampleImageAccent, serializeComposerLink, splitComposerDraft };