@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/assets/asset-library/utils/uploadCollectionAsset.ts

@@ -1,52 +1,52 @@
-import { basename } from './pathBasename.js'
-import { DEFAULT_COLLECTION_FIGURES_DIR } from '../../../../bridge/collectionAssets.mjs'
-import {
-  createPlatformFolder,
-  readPlatformFileBinary,
-  writePlatformFileBinary,
-} from '../../../../bridge/fs.mjs'
-import { openPlatformImageDialog } from '../../../../bridge/dialog.mjs'
-import { sanitizeUploadFileName } from './sanitizeUploadFileName.js'
-
-/** @deprecated Use `DEFAULT_COLLECTION_FIGURES_DIR` from `@purescience/platform-ui/bridge/collectionAssets`. */
-export const DEFAULT_UPLOAD_RELATIVE_DIR = DEFAULT_COLLECTION_FIGURES_DIR
-
-export async function ensureCollectionSubdirs(
-  collectionPath: string,
-  relativeDir: string,
-): Promise<void> {
-  const root = collectionPath.replace(/\/+$/, '')
-  const parts = relativeDir.split('/').filter(Boolean)
-  let parent = root
-  for (const part of parts) {
-    try {
-      const created = await createPlatformFolder(parent, part)
-      parent = created.path
-    } catch {
-      parent = `${parent}/${part}`
-    }
-  }
-}
-
-export async function uploadCollectionAssetFromDialog(input: {
-  collectionPath: string
-  uploadRelativeDir?: string
-}): Promise<string | null> {
-  const picked = await openPlatformImageDialog()
-  if (!picked) return null
-
-  const uploadRelativeDir =
-    input.uploadRelativeDir ?? DEFAULT_COLLECTION_FIGURES_DIR
-  const binary = await readPlatformFileBinary(picked)
-  const fileName = sanitizeUploadFileName(basename(picked))
-  const relativePath = `${uploadRelativeDir.replace(/\/+$/, '')}/${fileName}`
-  const absolutePath = `${input.collectionPath.replace(
-    /\/+$/,
-    '',
-  )}/${relativePath}`
-
-  await ensureCollectionSubdirs(input.collectionPath, uploadRelativeDir)
-  await writePlatformFileBinary(absolutePath, binary.base64)
-
-  return relativePath
-}
+import { basename } from './pathBasename.js'
+import { DEFAULT_COLLECTION_FIGURES_DIR } from '../../../../bridge/collectionAssets.mjs'
+import {
+  createPlatformFolder,
+  readPlatformFileBinary,
+  writePlatformFileBinary,
+} from '../../../../bridge/fs.mjs'
+import { openPlatformImageDialog } from '../../../../bridge/dialog.mjs'
+import { sanitizeUploadFileName } from './sanitizeUploadFileName.js'
+
+/** @deprecated Use `DEFAULT_COLLECTION_FIGURES_DIR` from `@purescience/platform-ui/bridge/collectionAssets`. */
+export const DEFAULT_UPLOAD_RELATIVE_DIR = DEFAULT_COLLECTION_FIGURES_DIR
+
+export async function ensureCollectionSubdirs(
+  collectionPath: string,
+  relativeDir: string,
+): Promise<void> {
+  const root = collectionPath.replace(/\/+$/, '')
+  const parts = relativeDir.split('/').filter(Boolean)
+  let parent = root
+  for (const part of parts) {
+    try {
+      const created = await createPlatformFolder(parent, part)
+      parent = created.path
+    } catch {
+      parent = `${parent}/${part}`
+    }
+  }
+}
+
+export async function uploadCollectionAssetFromDialog(input: {
+  collectionPath: string
+  uploadRelativeDir?: string
+}): Promise<string | null> {
+  const picked = await openPlatformImageDialog()
+  if (!picked) return null
+
+  const uploadRelativeDir =
+    input.uploadRelativeDir ?? DEFAULT_COLLECTION_FIGURES_DIR
+  const binary = await readPlatformFileBinary(picked)
+  const fileName = sanitizeUploadFileName(basename(picked))
+  const relativePath = `${uploadRelativeDir.replace(/\/+$/, '')}/${fileName}`
+  const absolutePath = `${input.collectionPath.replace(
+    /\/+$/,
+    '',
+  )}/${relativePath}`
+
+  await ensureCollectionSubdirs(input.collectionPath, uploadRelativeDir)
+  await writePlatformFileBinary(absolutePath, binary.base64)
+
+  return relativePath
+}

package/src/components/chrome/OverlayActionCapsule.test.tsx

@@ -1,82 +1,82 @@
-import { act } from 'react'
-import { createRoot, type Root } from 'react-dom/client'
-import { styled } from 'styled-components'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { PlatformIcon } from './PlatformIcon.js'
-import { X } from 'lucide-react'
-import {
-  OverlayActionCapsule,
-  OverlayActionCapsuleButton,
-  OverlayActionCapsuleCloseButton,
-} from './OverlayActionCapsule.js'
-import { ShellWindowControls } from './ShellWindowControls.js'
-
-const StyledCapsuleHost = styled.div`
-  display: flex;
-  align-items: stretch;
-  height: 38px;
-`
-
-const StyledTitlebarHost = styled.div`
-  display: flex;
-  align-items: stretch;
-  height: 30px;
-`
-
-function render(ui: React.ReactElement): {
-  container: HTMLDivElement
-  root: Root
-} {
-  const container = document.createElement('div')
-  document.body.appendChild(container)
-  const root = createRoot(container)
-  act(() => {
-    root.render(ui)
-  })
-  return { container, root }
-}
-
-afterEach(() => {
-  document.body.innerHTML = ''
-})
-
-describe('OverlayActionCapsule', () => {
-  it('renders custom actions and close control in one capsule', () => {
-    const onClose = vi.fn()
-    const { container } = render(
-      <StyledCapsuleHost>
-        <OverlayActionCapsule>
-          <OverlayActionCapsuleButton>Link</OverlayActionCapsuleButton>
-          <OverlayActionCapsuleCloseButton aria-label="Close" onClick={onClose}>
-            <PlatformIcon icon={X} size={14} strokeWidth={2} />
-          </OverlayActionCapsuleCloseButton>
-        </OverlayActionCapsule>
-      </StyledCapsuleHost>,
-    )
-
-    expect(container.querySelector('button')?.textContent).toContain('Link')
-    container
-      .querySelector('[aria-label="Close"]')
-      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-    expect(onClose).toHaveBeenCalledOnce()
-  })
-})
-
-describe('ShellWindowControls', () => {
-  it('exposes minimize, maximize, and close inside a capsule', () => {
-    const { container } = render(
-      <StyledTitlebarHost>
-        <ShellWindowControls
-          onMinimize={() => undefined}
-          onMaximize={() => undefined}
-          onClose={() => undefined}
-        />
-      </StyledTitlebarHost>,
-    )
-
-    expect(container.querySelectorAll('button')).toHaveLength(3)
-    expect(container.querySelector('[aria-label="Minimize"]')).not.toBeNull()
-    expect(container.querySelector('[aria-label="Maximize"]')).not.toBeNull()
-    expect(container.querySelector('[aria-label="Close"]')).not.toBeNull()
-  })
-})
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { styled } from 'styled-components'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { PlatformIcon } from './PlatformIcon.js'
+import { X } from 'lucide-react'
+import {
+  OverlayActionCapsule,
+  OverlayActionCapsuleButton,
+  OverlayActionCapsuleCloseButton,
+} from './OverlayActionCapsule.js'
+import { ShellWindowControls } from './ShellWindowControls.js'
+
+const StyledCapsuleHost = styled.div`
+  display: flex;
+  align-items: stretch;
+  height: 38px;
+`
+
+const StyledTitlebarHost = styled.div`
+  display: flex;
+  align-items: stretch;
+  height: 30px;
+`
+
+function render(ui: React.ReactElement): {
+  container: HTMLDivElement
+  root: Root
+} {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  act(() => {
+    root.render(ui)
+  })
+  return { container, root }
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('OverlayActionCapsule', () => {
+  it('renders custom actions and close control in one capsule', () => {
+    const onClose = vi.fn()
+    const { container } = render(
+      <StyledCapsuleHost>
+        <OverlayActionCapsule>
+          <OverlayActionCapsuleButton>Link</OverlayActionCapsuleButton>
+          <OverlayActionCapsuleCloseButton aria-label="Close" onClick={onClose}>
+            <PlatformIcon icon={X} size={14} strokeWidth={2} />
+          </OverlayActionCapsuleCloseButton>
+        </OverlayActionCapsule>
+      </StyledCapsuleHost>,
+    )
+
+    expect(container.querySelector('button')?.textContent).toContain('Link')
+    container
+      .querySelector('[aria-label="Close"]')
+      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+})
+
+describe('ShellWindowControls', () => {
+  it('exposes minimize, maximize, and close inside a capsule', () => {
+    const { container } = render(
+      <StyledTitlebarHost>
+        <ShellWindowControls
+          onMinimize={() => undefined}
+          onMaximize={() => undefined}
+          onClose={() => undefined}
+        />
+      </StyledTitlebarHost>,
+    )
+
+    expect(container.querySelectorAll('button')).toHaveLength(3)
+    expect(container.querySelector('[aria-label="Minimize"]')).not.toBeNull()
+    expect(container.querySelector('[aria-label="Maximize"]')).not.toBeNull()
+    expect(container.querySelector('[aria-label="Close"]')).not.toBeNull()
+  })
+})

package/src/components/chrome/OverlayActionCapsule.tsx

@@ -1,90 +1,90 @@
-import type { ComponentPropsWithoutRef } from 'react'
-import { styled } from 'styled-components'
-import { CleanButton } from '../common/buttons/CleanButton.js'
-
-export type OverlayActionCapsuleProps = ComponentPropsWithoutRef<'div'>
-export type OverlayActionCapsuleButtonProps = ComponentPropsWithoutRef<
-  typeof StyledOverlayActionCapsuleButton
->
-export type OverlayActionCapsuleIconButtonProps = ComponentPropsWithoutRef<
-  typeof StyledOverlayActionCapsuleIconButton
->
-export type OverlayActionCapsuleCloseButtonProps = ComponentPropsWithoutRef<
-  typeof StyledOverlayActionCapsuleCloseButton
->
-
-const capsuleButtonBase = styled(CleanButton)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375em;
-  height: 100%;
-  min-height: 0;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--platform-colors-text-secondary);
-  font: inherit;
-  font-size: inherit;
-  line-height: 1;
-  cursor: pointer;
-  transition: background var(--platform-transition-fast),
-    color var(--platform-transition-fast);
-
-  &:hover:not(:disabled) {
-    background: var(--platform-colors-elevated);
-    color: var(--platform-colors-text);
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-`
-
-export const StyledOverlayActionCapsule = styled.div`
-  display: inline-flex;
-  align-items: stretch;
-  height: 100%;
-  box-sizing: border-box;
-  gap: 0.1875em;
-  padding: 0.1875em;
-  border: 1px solid var(--platform-colors-border);
-  border-radius: 999px;
-  background: var(--platform-colors-surface);
-  box-shadow: var(--platform-shadow-sm);
-  width: fit-content;
-  font-size: var(--platform-typography-font-size-sm);
-  line-height: 1;
-`
-
-export const StyledOverlayActionCapsuleButton = styled(capsuleButtonBase)`
-  min-width: 2.125em;
-  padding: 0 0.625em;
-`
-
-export const StyledOverlayActionCapsuleIconButton = styled(capsuleButtonBase)`
-  aspect-ratio: 1;
-  width: auto;
-  min-width: 0;
-  padding: 0;
-`
-
-export const StyledOverlayActionCapsuleCloseButton = styled(
-  StyledOverlayActionCapsuleIconButton,
-)`
-  background: var(--platform-colors-accent-hover);
-  color: var(--platform-colors-text-inverse);
-
-  &:hover:not(:disabled) {
-    background: var(--platform-colors-danger);
-    color: var(--platform-colors-text-inverse);
-  }
-`
-
-export const OverlayActionCapsule = StyledOverlayActionCapsule
-export const OverlayActionCapsuleButton = StyledOverlayActionCapsuleButton
-export const OverlayActionCapsuleIconButton =
-  StyledOverlayActionCapsuleIconButton
-export const OverlayActionCapsuleCloseButton =
-  StyledOverlayActionCapsuleCloseButton
+import type { ComponentPropsWithoutRef } from 'react'
+import { styled } from 'styled-components'
+import { CleanButton } from '../common/buttons/CleanButton.js'
+
+export type OverlayActionCapsuleProps = ComponentPropsWithoutRef<'div'>
+export type OverlayActionCapsuleButtonProps = ComponentPropsWithoutRef<
+  typeof StyledOverlayActionCapsuleButton
+>
+export type OverlayActionCapsuleIconButtonProps = ComponentPropsWithoutRef<
+  typeof StyledOverlayActionCapsuleIconButton
+>
+export type OverlayActionCapsuleCloseButtonProps = ComponentPropsWithoutRef<
+  typeof StyledOverlayActionCapsuleCloseButton
+>
+
+const capsuleButtonBase = styled(CleanButton)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375em;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  font: inherit;
+  font-size: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--platform-transition-fast),
+    color var(--platform-transition-fast);
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-elevated);
+    color: var(--platform-colors-text);
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+`
+
+export const StyledOverlayActionCapsule = styled.div`
+  display: inline-flex;
+  align-items: stretch;
+  height: 100%;
+  box-sizing: border-box;
+  gap: 0.1875em;
+  padding: 0.1875em;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 999px;
+  background: var(--platform-colors-surface);
+  box-shadow: var(--platform-shadow-sm);
+  width: fit-content;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1;
+`
+
+export const StyledOverlayActionCapsuleButton = styled(capsuleButtonBase)`
+  min-width: 2.125em;
+  padding: 0 0.625em;
+`
+
+export const StyledOverlayActionCapsuleIconButton = styled(capsuleButtonBase)`
+  aspect-ratio: 1;
+  width: auto;
+  min-width: 0;
+  padding: 0;
+`
+
+export const StyledOverlayActionCapsuleCloseButton = styled(
+  StyledOverlayActionCapsuleIconButton,
+)`
+  background: var(--platform-colors-accent-hover);
+  color: var(--platform-colors-text-inverse);
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-danger);
+    color: var(--platform-colors-text-inverse);
+  }
+`
+
+export const OverlayActionCapsule = StyledOverlayActionCapsule
+export const OverlayActionCapsuleButton = StyledOverlayActionCapsuleButton
+export const OverlayActionCapsuleIconButton =
+  StyledOverlayActionCapsuleIconButton
+export const OverlayActionCapsuleCloseButton =
+  StyledOverlayActionCapsuleCloseButton

package/src/components/chrome/PanelTabStrip.tsx

@@ -1,113 +1,113 @@
-import { styled } from 'styled-components'
-
-export interface PanelTabItem<T extends string = string> {
-  id: T
-  label: React.ReactNode
-}
-
-export interface PanelTabStripProps<T extends string = string> {
-  items: readonly PanelTabItem<T>[]
-  activeId: T
-  onSelect: (id: T) => void
-  className?: string
-  'data-mode-count'?: number | string
-  'aria-label'?: string
-}
-
-const StyledStrip = styled.nav`
-  display: flex;
-  align-items: flex-end;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`
-
-const StyledTab = styled.button`
-  position: relative;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 112px;
-  max-width: 240px;
-  height: 31px;
-  margin-bottom: -1px;
-  padding: 0 12px;
-  border: 1px solid transparent;
-  border-bottom-color: transparent;
-  border-radius: 11px 11px 0 0;
-  background: transparent;
-  color: var(--platform-colors-text-secondary);
-  font: inherit;
-  font-size: var(--platform-typography-font-size-xs, 13px);
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-
-  &[aria-selected='true'] {
-    border-color: var(--platform-colors-border);
-    border-bottom-color: var(
-      --platform-panel-tab-surface,
-      var(--platform-colors-surface)
-    );
-    background: var(
-      --platform-panel-tab-surface,
-      var(--platform-colors-surface)
-    );
-    color: var(--platform-colors-text);
-    font-weight: 600;
-    box-shadow: 0 -1px 0 rgb(255 255 255 / 70%);
-  }
-
-  &:hover:not([aria-selected='true']) {
-    border-color: var(--platform-colors-border-soft);
-    background: var(--platform-colors-surface-hover);
-    color: var(--platform-colors-text);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--platform-colors-focus-ring);
-    outline-offset: 2px;
-  }
-`
-
-/** Compact local tab strip using the same visual scale as workspace tabs. */
-export function PanelTabStrip<T extends string = string>({
-  items,
-  activeId,
-  onSelect,
-  className,
-  'data-mode-count': dataModeCount,
-  'aria-label': ariaLabel,
-}: PanelTabStripProps<T>): React.ReactElement {
-  return (
-    <StyledStrip
-      className={className}
-      role="tablist"
-      aria-label={ariaLabel}
-      data-mode-count={dataModeCount}
-    >
-      {items.map(item => {
-        const active = item.id === activeId
-        return (
-          <StyledTab
-            key={item.id}
-            type="button"
-            role="tab"
-            tabIndex={active ? 0 : -1}
-            aria-selected={active}
-            onClick={() => onSelect(item.id)}
-          >
-            {item.label}
-          </StyledTab>
-        )
-      })}
-    </StyledStrip>
-  )
-}
+import { styled } from 'styled-components'
+
+export interface PanelTabItem<T extends string = string> {
+  id: T
+  label: React.ReactNode
+}
+
+export interface PanelTabStripProps<T extends string = string> {
+  items: readonly PanelTabItem<T>[]
+  activeId: T
+  onSelect: (id: T) => void
+  className?: string
+  'data-mode-count'?: number | string
+  'aria-label'?: string
+}
+
+const StyledStrip = styled.nav`
+  display: flex;
+  align-items: flex-end;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+const StyledTab = styled.button`
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 112px;
+  max-width: 240px;
+  height: 31px;
+  margin-bottom: -1px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-bottom-color: transparent;
+  border-radius: 11px 11px 0 0;
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-xs, 13px);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &[aria-selected='true'] {
+    border-color: var(--platform-colors-border);
+    border-bottom-color: var(
+      --platform-panel-tab-surface,
+      var(--platform-colors-surface)
+    );
+    background: var(
+      --platform-panel-tab-surface,
+      var(--platform-colors-surface)
+    );
+    color: var(--platform-colors-text);
+    font-weight: 600;
+    box-shadow: 0 -1px 0 rgb(255 255 255 / 70%);
+  }
+
+  &:hover:not([aria-selected='true']) {
+    border-color: var(--platform-colors-border-soft);
+    background: var(--platform-colors-surface-hover);
+    color: var(--platform-colors-text);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--platform-colors-focus-ring);
+    outline-offset: 2px;
+  }
+`
+
+/** Compact local tab strip using the same visual scale as workspace tabs. */
+export function PanelTabStrip<T extends string = string>({
+  items,
+  activeId,
+  onSelect,
+  className,
+  'data-mode-count': dataModeCount,
+  'aria-label': ariaLabel,
+}: PanelTabStripProps<T>): React.ReactElement {
+  return (
+    <StyledStrip
+      className={className}
+      role="tablist"
+      aria-label={ariaLabel}
+      data-mode-count={dataModeCount}
+    >
+      {items.map(item => {
+        const active = item.id === activeId
+        return (
+          <StyledTab
+            key={item.id}
+            type="button"
+            role="tab"
+            tabIndex={active ? 0 : -1}
+            aria-selected={active}
+            onClick={() => onSelect(item.id)}
+          >
+            {item.label}
+          </StyledTab>
+        )
+      })}
+    </StyledStrip>
+  )
+}