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

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

@@ -1,81 +1,81 @@
-import { useEffect, useMemo, useState } from 'react'
-import type { PlatformAssetSummary } from '../../../../bridge/types.js'
-import {
-  canEditAssetMetadata,
-  canEditInlineSource,
-  inlineAssetKind,
-  type InlineAssetKind,
-} from '../helpers.js'
-
-export interface UseAssetDetailDraftResult {
-  labelDraft: string
-  captionDraft: string
-  sourceDraft: string
-  setLabelDraft: (value: string) => void
-  setCaptionDraft: (value: string) => void
-  setSourceDraft: (value: string) => void
-  metadataDirty: boolean
-  sourceDirty: boolean
-  isDirty: boolean
-  canEdit: boolean
-  showSourceEditor: boolean
-  inlineKind: InlineAssetKind | null
-}
-
-export function useAssetDetailDraft(
-  selectedAsset: PlatformAssetSummary | null,
-): UseAssetDetailDraftResult {
-  const [labelDraft, setLabelDraft] = useState('')
-  const [captionDraft, setCaptionDraft] = useState('')
-  const [sourceDraft, setSourceDraft] = useState('')
-
-  const inlineKind = selectedAsset ? inlineAssetKind(selectedAsset) : null
-  const showSourceEditor = selectedAsset
-    ? canEditInlineSource(selectedAsset)
-    : false
-
-  useEffect(() => {
-    if (!selectedAsset) {
-      setLabelDraft('')
-      setCaptionDraft('')
-      setSourceDraft('')
-      return
-    }
-    setLabelDraft(selectedAsset.label)
-    setCaptionDraft(selectedAsset.caption ?? '')
-    setSourceDraft(selectedAsset.sourceCode ?? '')
-  }, [
-    selectedAsset?.id,
-    selectedAsset?.caption,
-    selectedAsset?.label,
-    selectedAsset?.sourceCode,
-  ])
-
-  const metadataDirty = useMemo(() => {
-    if (!selectedAsset || !canEditAssetMetadata(selectedAsset)) return false
-    return (
-      labelDraft !== selectedAsset.label ||
-      captionDraft !== (selectedAsset.caption ?? '')
-    )
-  }, [captionDraft, labelDraft, selectedAsset])
-
-  const sourceDirty = useMemo(() => {
-    if (!selectedAsset || !showSourceEditor) return false
-    return sourceDraft !== (selectedAsset.sourceCode ?? '')
-  }, [selectedAsset, showSourceEditor, sourceDraft])
-
-  return {
-    labelDraft,
-    captionDraft,
-    sourceDraft,
-    setLabelDraft,
-    setCaptionDraft,
-    setSourceDraft,
-    metadataDirty,
-    sourceDirty,
-    isDirty: metadataDirty || sourceDirty,
-    canEdit: selectedAsset ? canEditAssetMetadata(selectedAsset) : false,
-    showSourceEditor,
-    inlineKind,
-  }
-}
+import { useEffect, useMemo, useState } from 'react'
+import type { PlatformAssetSummary } from '../../../../bridge/types.js'
+import {
+  canEditAssetMetadata,
+  canEditInlineSource,
+  inlineAssetKind,
+  type InlineAssetKind,
+} from '../helpers.js'
+
+export interface UseAssetDetailDraftResult {
+  labelDraft: string
+  captionDraft: string
+  sourceDraft: string
+  setLabelDraft: (value: string) => void
+  setCaptionDraft: (value: string) => void
+  setSourceDraft: (value: string) => void
+  metadataDirty: boolean
+  sourceDirty: boolean
+  isDirty: boolean
+  canEdit: boolean
+  showSourceEditor: boolean
+  inlineKind: InlineAssetKind | null
+}
+
+export function useAssetDetailDraft(
+  selectedAsset: PlatformAssetSummary | null,
+): UseAssetDetailDraftResult {
+  const [labelDraft, setLabelDraft] = useState('')
+  const [captionDraft, setCaptionDraft] = useState('')
+  const [sourceDraft, setSourceDraft] = useState('')
+
+  const inlineKind = selectedAsset ? inlineAssetKind(selectedAsset) : null
+  const showSourceEditor = selectedAsset
+    ? canEditInlineSource(selectedAsset)
+    : false
+
+  useEffect(() => {
+    if (!selectedAsset) {
+      setLabelDraft('')
+      setCaptionDraft('')
+      setSourceDraft('')
+      return
+    }
+    setLabelDraft(selectedAsset.label)
+    setCaptionDraft(selectedAsset.caption ?? '')
+    setSourceDraft(selectedAsset.sourceCode ?? '')
+  }, [
+    selectedAsset?.id,
+    selectedAsset?.caption,
+    selectedAsset?.label,
+    selectedAsset?.sourceCode,
+  ])
+
+  const metadataDirty = useMemo(() => {
+    if (!selectedAsset || !canEditAssetMetadata(selectedAsset)) return false
+    return (
+      labelDraft !== selectedAsset.label ||
+      captionDraft !== (selectedAsset.caption ?? '')
+    )
+  }, [captionDraft, labelDraft, selectedAsset])
+
+  const sourceDirty = useMemo(() => {
+    if (!selectedAsset || !showSourceEditor) return false
+    return sourceDraft !== (selectedAsset.sourceCode ?? '')
+  }, [selectedAsset, showSourceEditor, sourceDraft])
+
+  return {
+    labelDraft,
+    captionDraft,
+    sourceDraft,
+    setLabelDraft,
+    setCaptionDraft,
+    setSourceDraft,
+    metadataDirty,
+    sourceDirty,
+    isDirty: metadataDirty || sourceDirty,
+    canEdit: selectedAsset ? canEditAssetMetadata(selectedAsset) : false,
+    showSourceEditor,
+    inlineKind,
+  }
+}

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

@@ -1,233 +1,233 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import {
-  listCollectionAssets,
-  listScopedCollectionAssets,
-} from '../../../../bridge/assets.mjs'
-import type { PlatformAssetSummary } from '../../../../bridge/types.js'
-import { messageForError } from '../helpers.js'
-import type {
-  AssetLibraryActionsModel,
-  CollectionAssetDocumentAdapter,
-  AssetLibraryListModel,
-  AssetLibraryMetadataModel,
-  AssetLibraryStatus,
-  AssetLibraryUsageModel,
-  AssetLibraryVersionsModel,
-} from '../types.js'
-import {
-  ASSET_SORT_OPTIONS,
-  filterCollectionAssets,
-  sectionCollectionAssets,
-  sortCollectionAssets,
-  type AssetLibraryFilter,
-  type AssetLibrarySortMode,
-} from '../utils/assetLibraryUtils.js'
-import { useAssetDetailDraft } from './useAssetDetailDraft.js'
-import { useAssetLibraryMutations } from './useAssetLibraryMutations.js'
-import { useAssetLibrarySelectionSync } from './useAssetLibrarySelectionSync.js'
-import { useAssetLibraryVersions } from './useAssetLibraryVersions.js'
-
-export interface UseAssetLibraryDialogOptions {
-  open: boolean
-  collectionPath: string
-  /** When set, list via `assets.listScoped` (app-supplied document paths). */
-  documentFiles?: string[]
-  currentDocumentFile?: string | null
-  inlineAssetScope?: 'all' | 'current-document'
-  collectionLabel?: string
-  insertTargetLabel?: string
-  uploadRelativeDir?: string
-  documentAdapter?: CollectionAssetDocumentAdapter
-  onDocumentSourceSaved?: (info: {
-    sourceDocumentPath?: string
-    relativePath: string
-  }) => void
-}
-
-export interface UseAssetLibraryDialogResult {
-  list: AssetLibraryListModel
-  metadata: AssetLibraryMetadataModel
-  actions: AssetLibraryActionsModel
-  usage: AssetLibraryUsageModel
-  versions: AssetLibraryVersionsModel
-}
-
-export function useAssetLibraryDialog({
-  open,
-  collectionPath,
-  documentFiles,
-  currentDocumentFile,
-  inlineAssetScope = 'all',
-  collectionLabel = 'collection',
-  insertTargetLabel = 'document',
-  uploadRelativeDir,
-  documentAdapter,
-  onDocumentSourceSaved,
-}: UseAssetLibraryDialogOptions): UseAssetLibraryDialogResult {
-  const insertAssetHandler = documentAdapter?.insertAsset
-  const [assets, setAssets] = useState<PlatformAssetSummary[]>([])
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [query, setQuery] = useState('')
-  const [filter, setFilter] = useState<AssetLibraryFilter>('all')
-  const [sortMode, setSortMode] = useState<AssetLibrarySortMode>('recent')
-  const [loading, setLoading] = useState(false)
-  const [status, setStatus] = useState<AssetLibraryStatus | null>(null)
-
-  const refreshAssets = useCallback(
-    async (preferredId?: string | null): Promise<void> => {
-      const nextAssets =
-        documentFiles && documentFiles.length > 0
-          ? await listScopedCollectionAssets({
-              collectionPath,
-              documentFiles,
-            })
-          : await listCollectionAssets(collectionPath)
-      setAssets(nextAssets)
-      setSelectedId(current => {
-        const preferred = preferredId ?? current
-        return preferred && nextAssets.some(asset => asset.id === preferred)
-          ? preferred
-          : nextAssets[0]?.id ?? null
-      })
-    },
-    [collectionPath, documentFiles],
-  )
-
-  useEffect(() => {
-    if (!open) {
-      setQuery('')
-      setFilter('all')
-      setStatus(null)
-      return
-    }
-    setSortMode(currentDocumentFile ? 'current-document' : 'recent')
-  }, [currentDocumentFile, open])
-
-  useEffect(() => {
-    if (!open) return
-    let cancelled = false
-    setLoading(true)
-    setStatus(null)
-
-    void refreshAssets()
-      .catch(error => {
-        if (!cancelled) {
-          setStatus({ tone: 'error', message: messageForError(error) })
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false)
-      })
-
-    return () => {
-      cancelled = true
-    }
-  }, [open, refreshAssets])
-
-  const filteredAssets = useMemo(() => {
-    const matching = filterCollectionAssets(assets, {
-      query,
-      filter,
-      currentDocumentFile,
-      inlineAssetScope,
-    })
-    return sortCollectionAssets(matching, sortMode, currentDocumentFile)
-  }, [assets, currentDocumentFile, filter, inlineAssetScope, query, sortMode])
-
-  const selectedAsset = useMemo(
-    () =>
-      assets.find(asset => asset.id === selectedId) ??
-      filteredAssets[0] ??
-      null,
-    [assets, filteredAssets, selectedId],
-  )
-
-  const sectionedAssets = useMemo(
-    () =>
-      sectionCollectionAssets(filteredAssets, sortMode, currentDocumentFile),
-    [currentDocumentFile, filteredAssets, sortMode],
-  )
-
-  useEffect(() => {
-    if (!selectedAsset) return
-    if (filteredAssets.some(asset => asset.id === selectedAsset.id)) return
-    setSelectedId(filteredAssets[0]?.id ?? selectedAsset.id)
-  }, [filteredAssets, selectedAsset])
-
-  const sortOptions = useMemo(
-    () =>
-      currentDocumentFile
-        ? ASSET_SORT_OPTIONS
-        : ASSET_SORT_OPTIONS.filter(
-            option => option.value !== 'current-document',
-          ),
-    [currentDocumentFile],
-  )
-
-  useAssetLibrarySelectionSync(
-    open,
-    collectionPath,
-    selectedAsset?.relativePath,
-  )
-
-  const draft = useAssetDetailDraft(selectedAsset)
-
-  const actions = useAssetLibraryMutations({
-    collectionPath,
-    documentFiles,
-    collectionLabel,
-    insertTargetLabel,
-    uploadRelativeDir,
-    insertAssetHandler,
-    onDocumentSourceSaved,
-    selectedAsset,
-    draft,
-    refreshAssets,
-    setStatus,
-  })
-
-  const versions = useAssetLibraryVersions({
-    collectionPath,
-    documentFiles,
-    assets,
-    selectedAsset,
-    currentDocumentFile,
-    collectionLabel,
-    insertTargetLabel,
-    selectAsset: setSelectedId,
-    refreshAssets,
-    setStatus,
-  })
-
-  const usage = useMemo<AssetLibraryUsageModel>(
-    () => ({
-      entries: selectedAsset?.usedIn ?? [],
-      collectionLabel,
-      insertTargetLabel,
-    }),
-    [collectionLabel, insertTargetLabel, selectedAsset?.usedIn],
-  )
-
-  return {
-    list: {
-      assets,
-      filteredAssets,
-      sectionedAssets,
-      selectedAsset,
-      loading,
-      status,
-      query,
-      filter,
-      sortMode,
-      sortOptions,
-      setQuery,
-      setFilter,
-      setSortMode,
-      selectAsset: setSelectedId,
-    },
-    metadata: draft,
-    actions,
-    usage,
-    versions,
-  }
-}
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  listCollectionAssets,
+  listScopedCollectionAssets,
+} from '../../../../bridge/assets.mjs'
+import type { PlatformAssetSummary } from '../../../../bridge/types.js'
+import { messageForError } from '../helpers.js'
+import type {
+  AssetLibraryActionsModel,
+  CollectionAssetDocumentAdapter,
+  AssetLibraryListModel,
+  AssetLibraryMetadataModel,
+  AssetLibraryStatus,
+  AssetLibraryUsageModel,
+  AssetLibraryVersionsModel,
+} from '../types.js'
+import {
+  ASSET_SORT_OPTIONS,
+  filterCollectionAssets,
+  sectionCollectionAssets,
+  sortCollectionAssets,
+  type AssetLibraryFilter,
+  type AssetLibrarySortMode,
+} from '../utils/assetLibraryUtils.js'
+import { useAssetDetailDraft } from './useAssetDetailDraft.js'
+import { useAssetLibraryMutations } from './useAssetLibraryMutations.js'
+import { useAssetLibrarySelectionSync } from './useAssetLibrarySelectionSync.js'
+import { useAssetLibraryVersions } from './useAssetLibraryVersions.js'
+
+export interface UseAssetLibraryDialogOptions {
+  open: boolean
+  collectionPath: string
+  /** When set, list via `assets.listScoped` (app-supplied document paths). */
+  documentFiles?: string[]
+  currentDocumentFile?: string | null
+  inlineAssetScope?: 'all' | 'current-document'
+  collectionLabel?: string
+  insertTargetLabel?: string
+  uploadRelativeDir?: string
+  documentAdapter?: CollectionAssetDocumentAdapter
+  onDocumentSourceSaved?: (info: {
+    sourceDocumentPath?: string
+    relativePath: string
+  }) => void
+}
+
+export interface UseAssetLibraryDialogResult {
+  list: AssetLibraryListModel
+  metadata: AssetLibraryMetadataModel
+  actions: AssetLibraryActionsModel
+  usage: AssetLibraryUsageModel
+  versions: AssetLibraryVersionsModel
+}
+
+export function useAssetLibraryDialog({
+  open,
+  collectionPath,
+  documentFiles,
+  currentDocumentFile,
+  inlineAssetScope = 'all',
+  collectionLabel = 'collection',
+  insertTargetLabel = 'document',
+  uploadRelativeDir,
+  documentAdapter,
+  onDocumentSourceSaved,
+}: UseAssetLibraryDialogOptions): UseAssetLibraryDialogResult {
+  const insertAssetHandler = documentAdapter?.insertAsset
+  const [assets, setAssets] = useState<PlatformAssetSummary[]>([])
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [query, setQuery] = useState('')
+  const [filter, setFilter] = useState<AssetLibraryFilter>('all')
+  const [sortMode, setSortMode] = useState<AssetLibrarySortMode>('recent')
+  const [loading, setLoading] = useState(false)
+  const [status, setStatus] = useState<AssetLibraryStatus | null>(null)
+
+  const refreshAssets = useCallback(
+    async (preferredId?: string | null): Promise<void> => {
+      const nextAssets =
+        documentFiles && documentFiles.length > 0
+          ? await listScopedCollectionAssets({
+              collectionPath,
+              documentFiles,
+            })
+          : await listCollectionAssets(collectionPath)
+      setAssets(nextAssets)
+      setSelectedId(current => {
+        const preferred = preferredId ?? current
+        return preferred && nextAssets.some(asset => asset.id === preferred)
+          ? preferred
+          : nextAssets[0]?.id ?? null
+      })
+    },
+    [collectionPath, documentFiles],
+  )
+
+  useEffect(() => {
+    if (!open) {
+      setQuery('')
+      setFilter('all')
+      setStatus(null)
+      return
+    }
+    setSortMode(currentDocumentFile ? 'current-document' : 'recent')
+  }, [currentDocumentFile, open])
+
+  useEffect(() => {
+    if (!open) return
+    let cancelled = false
+    setLoading(true)
+    setStatus(null)
+
+    void refreshAssets()
+      .catch(error => {
+        if (!cancelled) {
+          setStatus({ tone: 'error', message: messageForError(error) })
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [open, refreshAssets])
+
+  const filteredAssets = useMemo(() => {
+    const matching = filterCollectionAssets(assets, {
+      query,
+      filter,
+      currentDocumentFile,
+      inlineAssetScope,
+    })
+    return sortCollectionAssets(matching, sortMode, currentDocumentFile)
+  }, [assets, currentDocumentFile, filter, inlineAssetScope, query, sortMode])
+
+  const selectedAsset = useMemo(
+    () =>
+      assets.find(asset => asset.id === selectedId) ??
+      filteredAssets[0] ??
+      null,
+    [assets, filteredAssets, selectedId],
+  )
+
+  const sectionedAssets = useMemo(
+    () =>
+      sectionCollectionAssets(filteredAssets, sortMode, currentDocumentFile),
+    [currentDocumentFile, filteredAssets, sortMode],
+  )
+
+  useEffect(() => {
+    if (!selectedAsset) return
+    if (filteredAssets.some(asset => asset.id === selectedAsset.id)) return
+    setSelectedId(filteredAssets[0]?.id ?? selectedAsset.id)
+  }, [filteredAssets, selectedAsset])
+
+  const sortOptions = useMemo(
+    () =>
+      currentDocumentFile
+        ? ASSET_SORT_OPTIONS
+        : ASSET_SORT_OPTIONS.filter(
+            option => option.value !== 'current-document',
+          ),
+    [currentDocumentFile],
+  )
+
+  useAssetLibrarySelectionSync(
+    open,
+    collectionPath,
+    selectedAsset?.relativePath,
+  )
+
+  const draft = useAssetDetailDraft(selectedAsset)
+
+  const actions = useAssetLibraryMutations({
+    collectionPath,
+    documentFiles,
+    collectionLabel,
+    insertTargetLabel,
+    uploadRelativeDir,
+    insertAssetHandler,
+    onDocumentSourceSaved,
+    selectedAsset,
+    draft,
+    refreshAssets,
+    setStatus,
+  })
+
+  const versions = useAssetLibraryVersions({
+    collectionPath,
+    documentFiles,
+    assets,
+    selectedAsset,
+    currentDocumentFile,
+    collectionLabel,
+    insertTargetLabel,
+    selectAsset: setSelectedId,
+    refreshAssets,
+    setStatus,
+  })
+
+  const usage = useMemo<AssetLibraryUsageModel>(
+    () => ({
+      entries: selectedAsset?.usedIn ?? [],
+      collectionLabel,
+      insertTargetLabel,
+    }),
+    [collectionLabel, insertTargetLabel, selectedAsset?.usedIn],
+  )
+
+  return {
+    list: {
+      assets,
+      filteredAssets,
+      sectionedAssets,
+      selectedAsset,
+      loading,
+      status,
+      query,
+      filter,
+      sortMode,
+      sortOptions,
+      setQuery,
+      setFilter,
+      setSortMode,
+      selectAsset: setSelectedId,
+    },
+    metadata: draft,
+    actions,
+    usage,
+    versions,
+  }
+}