@puredesktop/puredesktop-ui-bridge 2.1.3 → 2.1.6

package/src/components/agents/agentToolDisplay.ts

@@ -66,7 +66,10 @@ export function formatAgentToolRowSummary(call: AgentUiToolCall): string {
 export function agentToolResultDetails(result: string): string[] | undefined {
   const trimmed = result.trim()
   if (!trimmed) return undefined
-  const lines = trimmed.split('\n').map(line => line.trim()).filter(Boolean)
+  const lines = trimmed
+    .split('\n')
+    .map(line => line.trim())
+    .filter(Boolean)
   if (lines.length > 1) return lines
   if (trimmed.length > 80) return [trimmed]
   return undefined

package/src/components/assets/asset-library/AssetLibraryDialog.tsx

@@ -14,6 +14,7 @@ export function AssetLibraryDialog({
   insertTargetLabel = 'document',
   inlineAssetScope = 'all',
   uploadRelativeDir,
+  flushDocument,
   onDocumentSourceSaved,
 }: AssetLibraryDialogProps): React.ReactElement | null {
   return (
@@ -36,6 +37,7 @@ export function AssetLibraryDialog({
         insertTargetLabel={insertTargetLabel}
         inlineAssetScope={inlineAssetScope}
         uploadRelativeDir={uploadRelativeDir}
+        flushDocument={flushDocument}
         onDocumentSourceSaved={onDocumentSourceSaved}
       />
     </Modal>

package/src/components/assets/asset-library/AssetLibraryWorkspace.tsx

@@ -15,6 +15,7 @@ export function AssetLibraryWorkspace({
   insertTargetLabel = 'document',
   inlineAssetScope = 'all',
   uploadRelativeDir,
+  flushDocument,
   onDocumentSourceSaved,
   fill = false,
 }: AssetLibraryWorkspaceProps): React.ReactElement {
@@ -28,6 +29,7 @@ export function AssetLibraryWorkspace({
     insertTargetLabel,
     uploadRelativeDir,
     documentAdapter,
+    flushDocument,
     onDocumentSourceSaved,
   })
 

package/src/components/assets/asset-library/detail/AssetLibraryDetailHeader.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { PlatformAssetSummary } from '../../../../bridge/types.js'
+import { AssetLibraryDetailHeader } from './AssetLibraryDetailHeader.js'
+
+const asset = {
+  id: 'asset_1',
+  label: 'Sample',
+  kind: 'image',
+  fileName: 'sample.png',
+  relativePath: 'assets/figures/sample.png',
+  absolutePath: '/ws/assets/figures/sample.png',
+  byteLength: 49834,
+  modifiedAt: Date.now(),
+  usedIn: [],
+} as unknown as PlatformAssetSummary
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('AssetLibraryDetailHeader', () => {
+  it('renders the meta/path inline without leaking styled props to the DOM', () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const html = renderToStaticMarkup(<AssetLibraryDetailHeader asset={asset} />)
+
+    // The forwardedAs="span" fix means size/tone are consumed by Text, not
+    // forwarded to the <span> — so no "unknown prop" warning is emitted.
+    const unknownProp = errorSpy.mock.calls
+      .map(args => String(args[0]))
+      .find(message => /unknown prop|shouldForwardProp/i.test(message))
+    expect(unknownProp).toBeUndefined()
+
+    expect(html).toContain('<span')
+    expect(html).toContain('assets/figures/sample.png')
+  })
+})

package/src/components/assets/asset-library/detail/AssetLibraryDetailHeader.tsx

@@ -29,7 +29,11 @@ const StyledAssetTitle = styled.h2`
 
 const StyledPath = styled(Text)`
   overflow-wrap: anywhere;
-  font-family: var(--platform-typography-font-family-mono, ui-monospace, monospace);
+  font-family: var(
+    --platform-typography-font-family-mono,
+    ui-monospace,
+    monospace
+  );
   font-size: var(--platform-typography-font-size-xs, 12px);
   line-height: 1.35;
 `
@@ -44,11 +48,11 @@ export function AssetLibraryDetailHeader({
   return (
     <StyledDetailHeader>
       <StyledAssetTitle>{asset.label}</StyledAssetTitle>
-      <StyledMeta as="span" size="sm" tone="secondary">
+      <StyledMeta forwardedAs="span" size="sm" tone="secondary">
         {kindLabel(asset.kind)} · {formatAssetBytes(asset.byteLength)} ·{' '}
         {formatAssetTimeAgo(asset.modifiedAt)}
       </StyledMeta>
-      <StyledPath as="span" size="sm" tone="secondary">
+      <StyledPath forwardedAs="span" size="sm" tone="secondary">
         {asset.relativePath}
       </StyledPath>
     </StyledDetailHeader>

package/src/components/assets/asset-library/detail/AssetLibraryDetailPreview.tsx

@@ -21,18 +21,18 @@ const StyledDetailBody = styled.div`
   min-width: 0;
   overflow: hidden;
   padding: clamp(18px, 2vw, 32px);
-  background:
-    linear-gradient(
-      180deg,
-      rgb(from var(--platform-colors-surface) r g b / 0.48),
-      var(--platform-colors-app-viewport, var(--platform-colors-bg))
-    );
+  background: linear-gradient(
+    180deg,
+    rgb(from var(--platform-colors-surface) r g b / 0.48),
+    var(--platform-colors-app-viewport, var(--platform-colors-bg))
+  );
 
   > * {
     width: min(100%, 860px);
     max-height: min(680px, 72vh);
-    border-radius: 8px;
-    box-shadow: 0 12px 34px rgb(15 23 42 / 0.08);
+    border-radius: var(--platform-radius-md, 0px);
+    box-shadow: 0 12px 34px
+      color-mix(in srgb, var(--platform-colors-text, #1c1a17) 8%, transparent);
   }
 `
 

package/src/components/assets/asset-library/hooks/useAssetLibraryDialog.ts

@@ -38,6 +38,12 @@ export interface UseAssetLibraryDialogOptions {
   insertTargetLabel?: string
   uploadRelativeDir?: string
   documentAdapter?: CollectionAssetDocumentAdapter
+  /**
+   * Persist the host document before the library scans it (on open and after
+   * insert) so inline document assets (tables/math/mermaid) and `usedIn` reflect
+   * the live editor content rather than the last autosave. Optional.
+   */
+  flushDocument?: () => Promise<void> | void
   onDocumentSourceSaved?: (info: {
     sourceDocumentPath?: string
     relativePath: string
@@ -62,6 +68,7 @@ export function useAssetLibraryDialog({
   insertTargetLabel = 'document',
   uploadRelativeDir,
   documentAdapter,
+  flushDocument,
   onDocumentSourceSaved,
 }: UseAssetLibraryDialogOptions): UseAssetLibraryDialogResult {
   const insertAssetHandler = documentAdapter?.insertAsset
@@ -109,7 +116,10 @@ export function useAssetLibraryDialog({
     setLoading(true)
     setStatus(null)
 
-    void refreshAssets()
+    void (async () => {
+      await flushDocument?.()
+      await refreshAssets()
+    })()
       .catch(error => {
         if (!cancelled) {
           setStatus({ tone: 'error', message: messageForError(error) })
@@ -122,7 +132,7 @@ export function useAssetLibraryDialog({
     return () => {
       cancelled = true
     }
-  }, [open, refreshAssets])
+  }, [flushDocument, open, refreshAssets])
 
   const filteredAssets = useMemo(() => {
     const matching = filterCollectionAssets(assets, {
@@ -179,6 +189,7 @@ export function useAssetLibraryDialog({
     insertTargetLabel,
     uploadRelativeDir,
     insertAssetHandler,
+    flushDocument,
     onDocumentSourceSaved,
     selectedAsset,
     draft,

package/src/components/assets/asset-library/hooks/useAssetLibraryMutations.ts

@@ -32,6 +32,11 @@ export interface UseAssetLibraryMutationsOptions {
   insertTargetLabel: string
   uploadRelativeDir?: string
   insertAssetHandler?: (asset: PlatformAssetSummary) => Promise<void>
+  /**
+   * Persist the host document to disk. Called after an insert so the on-disk
+   * scan that computes `usedIn` sees the new reference. Optional.
+   */
+  flushDocument?: () => Promise<void> | void
   selectedAsset: PlatformAssetSummary | null
   draft: UseAssetDetailDraftResult
   refreshAssets: (preferredId?: string | null) => Promise<void>
@@ -49,6 +54,7 @@ export function useAssetLibraryMutations({
   insertTargetLabel,
   uploadRelativeDir,
   insertAssetHandler,
+  flushDocument,
   selectedAsset,
   draft,
   refreshAssets,
@@ -221,6 +227,10 @@ export function useAssetLibraryMutations({
       setStatus(null)
       try {
         await insertAssetHandler(asset)
+        // Persist so the on-disk usage scan reflects the new reference, then
+        // refresh so the "used in this workspace" state updates immediately.
+        await flushDocument?.()
+        await refreshAssets(asset.id)
         setStatus({
           tone: 'success',
           message: `Inserted ${asset.label} into the current ${insertTargetLabel}.`,
@@ -231,7 +241,14 @@ export function useAssetLibraryMutations({
         setBusy(null)
       }
     },
-    [canInsertAsset, insertAssetHandler, insertTargetLabel, setStatus],
+    [
+      canInsertAsset,
+      flushDocument,
+      insertAssetHandler,
+      insertTargetLabel,
+      refreshAssets,
+      setStatus,
+    ],
   )
 
   const insertSelected = useCallback(async (): Promise<void> => {

package/src/components/assets/asset-library/sidebar/AssetLibraryListRow.tsx

@@ -1,8 +1,6 @@
 import { styled } from 'styled-components'
 import type { PlatformAssetSummary } from '../../../../bridge/types.js'
-import {
-  kindLabel,
-} from '../utils/assetLibraryUtils.js'
+import { kindLabel } from '../utils/assetLibraryUtils.js'
 import { AssetListThumbnail } from './AssetListThumbnail.js'
 
 export interface AssetLibraryListRowProps {
@@ -25,7 +23,7 @@ const StyledRow = styled.button<{ $active: boolean }>`
       $active
         ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
         : 'transparent'};
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: ${({ $active }) =>
     $active
       ? 'var(--platform-colors-surface-hover)'
@@ -68,7 +66,10 @@ const StyledUsage = styled.span`
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: var(--platform-typography-font-size-xs);
-  color: var(--platform-colors-text-tertiary, var(--platform-colors-text-secondary));
+  color: var(
+    --platform-colors-text-tertiary,
+    var(--platform-colors-text-secondary)
+  );
 `
 
 export function AssetLibraryListRow({
@@ -90,7 +91,9 @@ export function AssetLibraryListRow({
         <StyledRowMeta>{kindLabel(asset.kind)}</StyledRowMeta>
         <StyledUsage>
           {asset.usedIn.length > 0
-            ? `${asset.usedIn.length} placement${asset.usedIn.length === 1 ? '' : 's'}`
+            ? `${asset.usedIn.length} placement${
+                asset.usedIn.length === 1 ? '' : 's'
+              }`
             : `Not placed in this ${insertTargetLabel}`}
         </StyledUsage>
       </StyledRowBody>

package/src/components/assets/asset-library/sidebar/AssetLibrarySidebarToolbar.tsx

@@ -58,7 +58,9 @@ export function AssetLibrarySidebarToolbar({
     <StyledToolbar>
       <StyledHeading as="h3">{collectionLabel} assets</StyledHeading>
       {hasDocumentScope ? (
-        <StyledHint as="p">This document first, then the wider library.</StyledHint>
+        <StyledHint as="p">
+          This document first, then the wider library.
+        </StyledHint>
       ) : null}
       <SearchField
         value={list.query}

package/src/components/assets/asset-library/sidebar/AssetListThumbnail.tsx

@@ -15,7 +15,7 @@ const StyledThumb = styled.div`
   width: 72px;
   height: 54px;
   border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.72);
-  border-radius: 6px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: var(--platform-colors-app-viewport, var(--platform-colors-bg));
   overflow: hidden;
 

package/src/components/assets/asset-library/types.ts

@@ -27,6 +27,12 @@ export interface AssetLibraryDialogProps {
   inlineAssetScope?: 'all' | 'current-document'
   /** Relative path under `collectionPath` for uploads. Default `assets/figures`. */
   uploadRelativeDir?: string
+  /**
+   * Persist the host document to disk before the library scans it (on open and
+   * after insert) so inline assets (tables/math/mermaid) and `usedIn` reflect the
+   * live editor content, not the last autosave.
+   */
+  flushDocument?: () => Promise<void> | void
   /** Called after inline source is saved to disk (mermaid/table/math). */
   onDocumentSourceSaved?: (info: {
     sourceDocumentPath?: string

package/src/components/chrome/OverlayActionCapsule.tsx

@@ -21,7 +21,7 @@ const capsuleButtonBase = styled(CleanButton)`
   height: 100%;
   min-height: 0;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: transparent;
   color: var(--platform-colors-text-secondary);
   font: inherit;
@@ -50,7 +50,7 @@ export const StyledOverlayActionCapsule = styled.div`
   gap: 0.1875em;
   padding: 0.1875em;
   border: 1px solid var(--platform-colors-border);
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface);
   box-shadow: var(--platform-shadow-sm);
   width: fit-content;

package/src/components/chrome/PanelTabStrip.tsx

@@ -40,7 +40,7 @@ const StyledTab = styled.button`
   padding: 0 12px;
   border: 1px solid transparent;
   border-bottom-color: transparent;
-  border-radius: 11px 11px 0 0;
+  border-radius: var(--platform-radius-sm) var(--platform-radius-sm) 0 0;
   background: transparent;
   color: var(--platform-colors-text-secondary);
   font: inherit;
@@ -62,7 +62,8 @@ const StyledTab = styled.button`
     );
     color: var(--platform-colors-text);
     font-weight: 600;
-    box-shadow: 0 -1px 0 rgb(255 255 255 / 70%);
+    box-shadow: 0 -1px 0 rgb(255 255 255 / 70%),
+      inset 0 -2px 0 0 var(--app-acc, var(--platform-colors-text));
   }
 
   &:hover:not([aria-selected='true']) {

package/src/components/chrome/PureAppWordmark.tsx

@@ -21,9 +21,9 @@ const sizeStyles = {
 const StyledWordmark = styled.span<{
   $size: keyof typeof sizeStyles
 }>`
-  --wm-font: 'Geist', system-ui, sans-serif;
-  --wm-prefix: #68717c;
-  --wm-name: #2e3338;
+  --wm-font: var(--platform-typography-font-family);
+  --wm-prefix: var(--platform-colors-text-tertiary, #8f897f);
+  --wm-name: var(--platform-colors-text, #1c1a17);
 
   display: inline;
   min-width: 0;
@@ -36,8 +36,8 @@ const StyledWordmark = styled.span<{
   white-space: nowrap;
 
   html[data-platform-theme='dark'] & {
-    --wm-prefix: #858c96;
-    --wm-name: #f4f4f2;
+    --wm-prefix: var(--platform-colors-text-tertiary, #8f897f);
+    --wm-name: var(--platform-colors-text, #f4f2ee);
   }
 `
 
@@ -47,24 +47,20 @@ const StyledWordmark = styled.span<{
  */
 const StyledPrefix = styled.span`
   color: var(--wm-prefix);
-  font-weight: 300;
-  letter-spacing: 0.01em;
+  font-weight: 400;
+  letter-spacing: 0;
 `
 
 const StyledName = styled.span<{ $accent: boolean }>`
   min-width: 0;
   overflow: hidden;
   color: ${({ $accent }) =>
-    $accent
-      ? 'color-mix(in srgb, var(--platform-colors-accent, var(--wm-name)) 54%, var(--wm-name) 46%)'
-      : 'var(--wm-name)'};
+    $accent ? 'var(--app-acc, var(--wm-name))' : 'var(--wm-name)'};
   text-overflow: ellipsis;
 
   html[data-platform-theme='dark'] & {
     color: ${({ $accent }) =>
-      $accent
-        ? 'color-mix(in srgb, var(--platform-colors-accent, var(--wm-name)) 46%, var(--platform-colors-text, #f4f4f2) 54%)'
-        : 'var(--wm-name)'};
+      $accent ? 'var(--app-acc, var(--wm-name))' : 'var(--wm-name)'};
   }
 `
 
@@ -87,8 +83,12 @@ export function PureAppWordmark({
 
   return (
     <StyledWordmark {...wordmarkProps} $size={size}>
-      <StyledPrefix>{normalizedPrefix}</StyledPrefix>{' '}
-      <StyledName $accent={accentName}>{normalizedName}</StyledName>
+      <StyledPrefix className="pure-wordmark__prefix">
+        {normalizedPrefix}
+      </StyledPrefix>
+      <StyledName className="pure-wordmark__name" $accent={accentName}>
+        {normalizedName}
+      </StyledName>
     </StyledWordmark>
   )
 }

package/src/components/chrome/WorkspaceTabStrip.tsx

@@ -12,8 +12,12 @@ const StyledStrip = styled.div`
   min-height: 36px;
   width: 100%;
   min-width: 0;
-  background: var(--platform-colors-chrome-tab-strip);
-  border-bottom: 1px solid var(--platform-colors-border);
+  background: var(
+    --pure-chrome-os-strip,
+    #ececef
+  );
+  border-bottom: 1px solid
+    var(--pure-chrome-hairline, var(--platform-colors-divider));
   -webkit-app-region: no-drag;
   user-select: none;
 `
@@ -48,7 +52,7 @@ const StyledTab = styled.button<{
   border-radius: 11px 11px 0 0;
   font-size: var(--platform-typography-font-size-xs, 13px);
   font-weight: 500;
-  color: var(--platform-colors-text-secondary);
+  color: var(--pure-chrome-tertiary, #8a857c);
   background: transparent;
   cursor: pointer;
   flex-shrink: 0;
@@ -56,17 +60,17 @@ const StyledTab = styled.button<{
     box-shadow 150ms ease;
 
   &[data-active='true'] {
-    border-color: var(--platform-colors-border);
+    border-color: var(--pure-chrome-hairline, var(--platform-colors-border));
     border-bottom-color: var(--platform-colors-surface);
     background: var(--platform-colors-surface);
-    color: var(--platform-colors-text);
-    box-shadow: 0 -1px 0 rgb(255 255 255 / 70%);
+    color: var(--pure-chrome-ink, var(--platform-colors-text));
+    box-shadow: inset 0 -2px 0 0 var(--app-acc, var(--platform-colors-text));
   }
 
   &:hover:not([data-active='true']) {
-    border-color: var(--platform-colors-border-soft);
+    border-color: var(--pure-chrome-hairline, var(--platform-colors-divider));
     background: var(--platform-colors-surface-hover);
-    color: var(--platform-colors-text);
+    color: var(--pure-chrome-ink, var(--platform-colors-text));
   }
 
   &:focus-visible {
@@ -128,12 +132,12 @@ const StyledTabWordmark = styled(PureAppWordmark)`
  * The canonical lockup at tab scale: "pure word", lowercase, one size.
  * The prefix is the quiet family constant — light weight, muted grey,
  * never resized (a size jump breaks the lockup's line). The app word
- * carries identity: medium weight, accent only when active.
+ * carries identity by weight. R37 reserves accent for the active tab marker.
  */
 const StyledWordPrefix = styled.span`
   font-weight: 300;
   text-transform: lowercase;
-  color: var(--platform-colors-text-secondary);
+  color: var(--pure-chrome-tertiary, #8a857c);
   letter-spacing: 0.01em;
 
   [data-platform-theme='dark'] & {
@@ -145,12 +149,12 @@ const StyledWord = styled.span<{ $active: boolean }>`
   font-weight: ${({ $active }) => ($active ? 600 : 500)};
   text-transform: lowercase;
   color: ${({ $active }) =>
-    $active ? 'var(--platform-colors-accent)' : 'inherit'};
+    $active ? 'var(--app-acc, var(--pure-chrome-ink, var(--platform-colors-text)))' : 'inherit'};
 
   [data-platform-theme='dark'] & {
     color: ${({ $active }) =>
       $active
-        ? 'color-mix(in srgb, var(--platform-colors-accent) 46%, var(--platform-colors-text) 54%)'
+        ? 'var(--app-acc, var(--pure-chrome-ink, var(--platform-colors-text)))'
         : 'inherit'};
   }
 `
@@ -162,7 +166,7 @@ const StyledDocName = styled.span`
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 400;
-  color: var(--platform-colors-text-secondary);
+  color: var(--pure-chrome-tertiary, #8a857c);
 `
 
 const StyledClose = styled(X)`
@@ -232,6 +236,7 @@ export function WorkspaceTabStrip({
               tabIndex={active ? 0 : -1}
               aria-selected={active}
               data-active={active}
+              data-app={tab.appSlug}
               title={tab.label}
               draggable={Boolean(onReorder)}
               $dropBefore={dropTarget?.tabId === tab.id && !dropTarget.after}
@@ -289,7 +294,7 @@ export function WorkspaceTabStrip({
               <StyledLabel>
                 {tab.brand ? (
                   <>
-                    <StyledWordPrefix>pure</StyledWordPrefix>{' '}
+                    <StyledWordPrefix>pure</StyledWordPrefix>
                     <StyledWord $active={active}>
                       {tab.appName ?? tab.label.replace(/^pure\s*/i, '')}
                     </StyledWord>

package/src/components/chrome/documentChromePolicy.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { shouldUseTitleOnlyWorkspaceTab } from './documentChromePolicy.js'
+
+describe('shouldUseTitleOnlyWorkspaceTab', () => {
+  it('uses title-only shell tabs for writing document resources', () => {
+    expect(
+      shouldUseTitleOnlyWorkspaceTab({
+        appKind: 'writer',
+        hasResource: true,
+      }),
+    ).toBe(true)
+    expect(
+      shouldUseTitleOnlyWorkspaceTab({
+        appKind: 'book',
+        hasResource: true,
+      }),
+    ).toBe(true)
+  })
+
+  it('keeps app identity in shell tabs outside document resources', () => {
+    expect(
+      shouldUseTitleOnlyWorkspaceTab({
+        appKind: 'writer',
+        hasResource: false,
+      }),
+    ).toBe(false)
+    expect(
+      shouldUseTitleOnlyWorkspaceTab({
+        appKind: 'tasks',
+        hasResource: true,
+      }),
+    ).toBe(false)
+  })
+})

package/src/components/chrome/documentChromePolicy.ts

@@ -0,0 +1,15 @@
+export interface WorkspaceTabDocumentChromeInput {
+  appKind?: string | null
+  hasResource?: boolean
+}
+
+const IN_APP_DOCUMENT_WORDMARK_KINDS = new Set(['book', 'writer'])
+
+export function shouldUseTitleOnlyWorkspaceTab({
+  appKind,
+  hasResource,
+}: WorkspaceTabDocumentChromeInput): boolean {
+  return Boolean(
+    hasResource && appKind && IN_APP_DOCUMENT_WORDMARK_KINDS.has(appKind),
+  )
+}

package/src/components/chrome/index.ts

@@ -29,3 +29,7 @@ export {
   PureAppWordmark,
   type PureAppWordmarkProps,
 } from './PureAppWordmark.js'
+export {
+  shouldUseTitleOnlyWorkspaceTab,
+  type WorkspaceTabDocumentChromeInput,
+} from './documentChromePolicy.js'

package/src/components/chrome/workspaceTabTypes.ts

@@ -2,6 +2,8 @@
 export interface WorkspaceTabItem {
   id: string
   label: string
+  /** App slug used for app identity chrome tokens. */
+  appSlug?: string
   /** Optional short app name shown before the label (e.g. "Writer"). */
   kindLabel?: string
   /** Product name rendered by the shared chrome wordmark (e.g. "files"). */