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

package/src/components/common/media/ImageReferencePicker.tsx

@@ -1,242 +1,242 @@
-import { useRef, useState, type ClipboardEvent } from 'react'
-import { styled } from 'styled-components'
-import { QuietAction } from '../buttons/QuietAction.js'
-
-export interface ImageReference {
-  id: string
-  title: string
-  dataUrl: string
-  mimeType: string
-}
-
-export interface ImageReferencePickerProps {
-  label?: string
-  description?: string
-  variant?: 'standalone' | 'embedded'
-  references: ImageReference[]
-  onChange: (references: ImageReference[]) => void
-}
-
-const Wrap = styled.div<{ $variant: 'standalone' | 'embedded' }>`
-  display: grid;
-  gap: 10px;
-  padding-top: ${({ $variant }) => ($variant === 'embedded' ? '0' : '14px')};
-  border-top: ${({ $variant }) =>
-    $variant === 'embedded' ? '0' : '1px solid rgb(127 127 127 / 16%)'};
-  outline: none;
-
-  &:focus-within {
-    border-top-color: rgb(127 127 127 / 34%);
-  }
-`
-
-const Head = styled.div<{ $variant: 'standalone' | 'embedded' }>`
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 14px;
-  padding-top: ${({ $variant }) => ($variant === 'embedded' ? '10px' : '0')};
-  border-top: ${({ $variant }) =>
-    $variant === 'embedded' ? '1px solid rgb(127 127 127 / 12%)' : '0'};
-`
-
-const Label = styled.div`
-  color: rgb(104 112 123);
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-`
-
-const Description = styled.p`
-  margin: 0;
-  max-width: 560px;
-  color: rgb(104 112 123);
-  font-size: 12.5px;
-  line-height: 1.45;
-`
-
-const Input = styled.input`
-  position: fixed;
-  inset: auto auto 0 0;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-`
-
-const Grid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
-  gap: 10px;
-`
-
-const PasteTarget = styled.div`
-  min-height: 58px;
-  padding: 11px 13px;
-  border: 1px dashed rgb(127 127 127 / 28%);
-  border-radius: 7px;
-  color: rgb(104 112 123);
-  font-size: 13px;
-  line-height: 1.45;
-  background: rgb(255 255 255 / 26%);
-
-  &:focus {
-    border-color: rgb(127 127 127 / 48%);
-    outline: none;
-  }
-`
-
-const Tile = styled.figure`
-  display: grid;
-  gap: 7px;
-  margin: 0;
-`
-
-const Thumb = styled.img`
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 10;
-  object-fit: cover;
-  border: 1px solid rgb(127 127 127 / 18%);
-  border-radius: 3px;
-  background: rgb(127 127 127 / 8%);
-`
-
-const Caption = styled.figcaption`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  color: rgb(79 88 100);
-  font-size: 12px;
-  line-height: 1.25;
-
-  span {
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
-`
-
-function createReferenceId(): string {
-  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
-    return `image_ref_${crypto.randomUUID()}`
-  }
-  return `image_ref_${Math.random().toString(36).slice(2, 10)}`
-}
-
-function readImageFile(file: File): Promise<ImageReference> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => {
-      const dataUrl = typeof reader.result === 'string' ? reader.result : ''
-      if (!dataUrl) {
-        reject(new Error(`Could not read ${file.name}`))
-        return
-      }
-      resolve({
-        id: createReferenceId(),
-        title: file.name || 'Theme reference',
-        dataUrl,
-        mimeType: file.type || 'image/*',
-      })
-    }
-    reader.onerror = () => reject(reader.error ?? new Error('Read failed'))
-    reader.readAsDataURL(file)
-  })
-}
-
-export function ImageReferencePicker({
-  label = 'Theme references',
-  description = 'Attach images for typography, color, spacing, and design cues. They guide the look; they do not become slides unless you add them later.',
-  variant = 'standalone',
-  references,
-  onChange,
-}: ImageReferencePickerProps): React.ReactElement {
-  const inputRef = useRef<HTMLInputElement | null>(null)
-  const [error, setError] = useState<string | null>(null)
-
-  const chooseImages = (): void => {
-    setError(null)
-    inputRef.current?.click()
-  }
-
-  const addFiles = async (files: FileList | null): Promise<void> => {
-    if (!files?.length) return
-    const images = Array.from(files).filter(file =>
-      file.type.startsWith('image/'),
-    )
-    if (!images.length) {
-      setError('Choose image files.')
-      return
-    }
-    try {
-      const next = await Promise.all(images.map(readImageFile))
-      onChange([...references, ...next])
-    } catch (readError) {
-      setError(readError instanceof Error ? readError.message : 'Read failed')
-    } finally {
-      if (inputRef.current) inputRef.current.value = ''
-    }
-  }
-
-  const pasteImages = (event: ClipboardEvent): void => {
-    const files = event.clipboardData.files
-    if (!files.length) return
-    const hasImage = Array.from(files).some(file =>
-      file.type.startsWith('image/'),
-    )
-    if (!hasImage) return
-    event.preventDefault()
-    void addFiles(files)
-  }
-
-  return (
-    <Wrap $variant={variant} onPaste={pasteImages}>
-      <Head $variant={variant}>
-        <div>
-          <Label>{label}</Label>
-          <Description>{description}</Description>
-        </div>
-        <QuietAction type="button" onClick={chooseImages}>
-          attach images
-        </QuietAction>
-      </Head>
-      <PasteTarget tabIndex={0}>
-        Paste images here, or attach them. They are used as visual references,
-        not slide content.
-      </PasteTarget>
-      <Input
-        ref={inputRef}
-        aria-label={label}
-        type="file"
-        accept="image/*"
-        multiple
-        onChange={event => void addFiles(event.currentTarget.files)}
-      />
-      {references.length ? (
-        <Grid>
-          {references.map(reference => (
-            <Tile key={reference.id}>
-              <Thumb src={reference.dataUrl} alt="" />
-              <Caption>
-                <span>{reference.title}</span>
-                <QuietAction
-                  type="button"
-                  onClick={() =>
-                    onChange(
-                      references.filter(item => item.id !== reference.id),
-                    )
-                  }
-                >
-                  remove
-                </QuietAction>
-              </Caption>
-            </Tile>
-          ))}
-        </Grid>
-      ) : null}
-      {error ? <Description>{error}</Description> : null}
-    </Wrap>
-  )
-}
+import { useRef, useState, type ClipboardEvent } from 'react'
+import { styled } from 'styled-components'
+import { QuietAction } from '../buttons/QuietAction.js'
+
+export interface ImageReference {
+  id: string
+  title: string
+  dataUrl: string
+  mimeType: string
+}
+
+export interface ImageReferencePickerProps {
+  label?: string
+  description?: string
+  variant?: 'standalone' | 'embedded'
+  references: ImageReference[]
+  onChange: (references: ImageReference[]) => void
+}
+
+const Wrap = styled.div<{ $variant: 'standalone' | 'embedded' }>`
+  display: grid;
+  gap: 10px;
+  padding-top: ${({ $variant }) => ($variant === 'embedded' ? '0' : '14px')};
+  border-top: ${({ $variant }) =>
+    $variant === 'embedded' ? '0' : '1px solid rgb(127 127 127 / 16%)'};
+  outline: none;
+
+  &:focus-within {
+    border-top-color: rgb(127 127 127 / 34%);
+  }
+`
+
+const Head = styled.div<{ $variant: 'standalone' | 'embedded' }>`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 14px;
+  padding-top: ${({ $variant }) => ($variant === 'embedded' ? '10px' : '0')};
+  border-top: ${({ $variant }) =>
+    $variant === 'embedded' ? '1px solid rgb(127 127 127 / 12%)' : '0'};
+`
+
+const Label = styled.div`
+  color: rgb(104 112 123);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+`
+
+const Description = styled.p`
+  margin: 0;
+  max-width: 560px;
+  color: rgb(104 112 123);
+  font-size: 12.5px;
+  line-height: 1.45;
+`
+
+const Input = styled.input`
+  position: fixed;
+  inset: auto auto 0 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+`
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+  gap: 10px;
+`
+
+const PasteTarget = styled.div`
+  min-height: 58px;
+  padding: 11px 13px;
+  border: 1px dashed rgb(127 127 127 / 28%);
+  border-radius: 7px;
+  color: rgb(104 112 123);
+  font-size: 13px;
+  line-height: 1.45;
+  background: rgb(255 255 255 / 26%);
+
+  &:focus {
+    border-color: rgb(127 127 127 / 48%);
+    outline: none;
+  }
+`
+
+const Tile = styled.figure`
+  display: grid;
+  gap: 7px;
+  margin: 0;
+`
+
+const Thumb = styled.img`
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+  border: 1px solid rgb(127 127 127 / 18%);
+  border-radius: 3px;
+  background: rgb(127 127 127 / 8%);
+`
+
+const Caption = styled.figcaption`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: rgb(79 88 100);
+  font-size: 12px;
+  line-height: 1.25;
+
+  span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+`
+
+function createReferenceId(): string {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return `image_ref_${crypto.randomUUID()}`
+  }
+  return `image_ref_${Math.random().toString(36).slice(2, 10)}`
+}
+
+function readImageFile(file: File): Promise<ImageReference> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const dataUrl = typeof reader.result === 'string' ? reader.result : ''
+      if (!dataUrl) {
+        reject(new Error(`Could not read ${file.name}`))
+        return
+      }
+      resolve({
+        id: createReferenceId(),
+        title: file.name || 'Theme reference',
+        dataUrl,
+        mimeType: file.type || 'image/*',
+      })
+    }
+    reader.onerror = () => reject(reader.error ?? new Error('Read failed'))
+    reader.readAsDataURL(file)
+  })
+}
+
+export function ImageReferencePicker({
+  label = 'Theme references',
+  description = 'Attach images for typography, color, spacing, and design cues. They guide the look; they do not become slides unless you add them later.',
+  variant = 'standalone',
+  references,
+  onChange,
+}: ImageReferencePickerProps): React.ReactElement {
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const chooseImages = (): void => {
+    setError(null)
+    inputRef.current?.click()
+  }
+
+  const addFiles = async (files: FileList | null): Promise<void> => {
+    if (!files?.length) return
+    const images = Array.from(files).filter(file =>
+      file.type.startsWith('image/'),
+    )
+    if (!images.length) {
+      setError('Choose image files.')
+      return
+    }
+    try {
+      const next = await Promise.all(images.map(readImageFile))
+      onChange([...references, ...next])
+    } catch (readError) {
+      setError(readError instanceof Error ? readError.message : 'Read failed')
+    } finally {
+      if (inputRef.current) inputRef.current.value = ''
+    }
+  }
+
+  const pasteImages = (event: ClipboardEvent): void => {
+    const files = event.clipboardData.files
+    if (!files.length) return
+    const hasImage = Array.from(files).some(file =>
+      file.type.startsWith('image/'),
+    )
+    if (!hasImage) return
+    event.preventDefault()
+    void addFiles(files)
+  }
+
+  return (
+    <Wrap $variant={variant} onPaste={pasteImages}>
+      <Head $variant={variant}>
+        <div>
+          <Label>{label}</Label>
+          <Description>{description}</Description>
+        </div>
+        <QuietAction type="button" onClick={chooseImages}>
+          attach images
+        </QuietAction>
+      </Head>
+      <PasteTarget tabIndex={0}>
+        Paste images here, or attach them. They are used as visual references,
+        not slide content.
+      </PasteTarget>
+      <Input
+        ref={inputRef}
+        aria-label={label}
+        type="file"
+        accept="image/*"
+        multiple
+        onChange={event => void addFiles(event.currentTarget.files)}
+      />
+      {references.length ? (
+        <Grid>
+          {references.map(reference => (
+            <Tile key={reference.id}>
+              <Thumb src={reference.dataUrl} alt="" />
+              <Caption>
+                <span>{reference.title}</span>
+                <QuietAction
+                  type="button"
+                  onClick={() =>
+                    onChange(
+                      references.filter(item => item.id !== reference.id),
+                    )
+                  }
+                >
+                  remove
+                </QuietAction>
+              </Caption>
+            </Tile>
+          ))}
+        </Grid>
+      ) : null}
+      {error ? <Description>{error}</Description> : null}
+    </Wrap>
+  )
+}

package/src/components/common/menubar/MenuBar.tsx

@@ -1,78 +1,78 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { isMenuInteractionTarget } from '../dropdown/menuPortalConstants.js'
-import { styled } from 'styled-components'
-import { zi } from '../../../theme/themeVars.js'
-import { FlexRow } from '../containers/flex.js'
-import type { MenuActionItem, MenuBarProps } from '../dropdown/menuTypes.js'
-import { MenuBarTrigger } from './MenuBarTrigger.js'
-
-//#region styled-components
-
-const StyledMenuBar = styled.nav`
-  position: relative;
-  z-index: ${zi.appMenus};
-  display: flex;
-  align-items: center;
-  min-height: 28px;
-  -webkit-app-region: no-drag;
-  user-select: none;
-`
-
-//#endregion
-
-export function MenuBar({
-  sections,
-  onSelectItem,
-  'aria-label': ariaLabel = 'Application menu',
-}: MenuBarProps): React.ReactElement {
-  const menubarRef = useRef<HTMLElement>(null)
-  const [openSectionId, setOpenSectionId] = useState<string | null>(null)
-
-  const close = useCallback(() => setOpenSectionId(null), [])
-
-  useEffect(() => {
-    if (!openSectionId) return
-
-    const onPointerDown = (event: MouseEvent) => {
-      if (isMenuInteractionTarget(event.target)) return
-      close()
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') close()
-    }
-
-    document.addEventListener('mousedown', onPointerDown)
-    document.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.removeEventListener('mousedown', onPointerDown)
-      document.removeEventListener('keydown', onKeyDown)
-    }
-  }, [openSectionId, close])
-
-  const handleSelect = useCallback(
-    (sectionId: string, item: MenuActionItem) => {
-      onSelectItem?.(sectionId, item)
-      close()
-    },
-    [onSelectItem, close],
-  )
-
-  return (
-    <StyledMenuBar ref={menubarRef} role="menubar" aria-label={ariaLabel}>
-      <FlexRow $align="center" $height="100%">
-        {sections.map(section => (
-          <MenuBarTrigger
-            key={section.id}
-            section={section}
-            menubarRef={menubarRef}
-            open={openSectionId === section.id}
-            onOpen={() => setOpenSectionId(section.id)}
-            onClose={close}
-            onSelectItem={item => handleSelect(section.id, item)}
-          />
-        ))}
-      </FlexRow>
-    </StyledMenuBar>
-  )
-}
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { isMenuInteractionTarget } from '../dropdown/menuPortalConstants.js'
+import { styled } from 'styled-components'
+import { zi } from '../../../theme/themeVars.js'
+import { FlexRow } from '../containers/flex.js'
+import type { MenuActionItem, MenuBarProps } from '../dropdown/menuTypes.js'
+import { MenuBarTrigger } from './MenuBarTrigger.js'
+
+//#region styled-components
+
+const StyledMenuBar = styled.nav`
+  position: relative;
+  z-index: ${zi.appMenus};
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  -webkit-app-region: no-drag;
+  user-select: none;
+`
+
+//#endregion
+
+export function MenuBar({
+  sections,
+  onSelectItem,
+  'aria-label': ariaLabel = 'Application menu',
+}: MenuBarProps): React.ReactElement {
+  const menubarRef = useRef<HTMLElement>(null)
+  const [openSectionId, setOpenSectionId] = useState<string | null>(null)
+
+  const close = useCallback(() => setOpenSectionId(null), [])
+
+  useEffect(() => {
+    if (!openSectionId) return
+
+    const onPointerDown = (event: MouseEvent) => {
+      if (isMenuInteractionTarget(event.target)) return
+      close()
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') close()
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [openSectionId, close])
+
+  const handleSelect = useCallback(
+    (sectionId: string, item: MenuActionItem) => {
+      onSelectItem?.(sectionId, item)
+      close()
+    },
+    [onSelectItem, close],
+  )
+
+  return (
+    <StyledMenuBar ref={menubarRef} role="menubar" aria-label={ariaLabel}>
+      <FlexRow $align="center" $height="100%">
+        {sections.map(section => (
+          <MenuBarTrigger
+            key={section.id}
+            section={section}
+            menubarRef={menubarRef}
+            open={openSectionId === section.id}
+            onOpen={() => setOpenSectionId(section.id)}
+            onClose={close}
+            onSelectItem={item => handleSelect(section.id, item)}
+          />
+        ))}
+      </FlexRow>
+    </StyledMenuBar>
+  )
+}