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

package/src/components/common/lists/reorderable/ReorderableSectionsDemo.tsx

@@ -1,94 +1,94 @@
-import { useCallback, useState } from 'react'
-import { styled } from 'styled-components'
-import { Text } from '../../typography/Text.js'
-import { ReorderableSections } from './ReorderableSections.js'
-import type { ReorderableMove, ReorderableSection } from './types.js'
-
-//#region styled-components
-
-const StyledDemo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-width: 320px;
-  padding: 16px;
-  color: var(--platform-colors-text);
-  background: var(
-    --platform-colors-app-viewport,
-    var(--platform-colors-surface)
-  );
-`
-
-const StyledHint = styled(Text)`
-  margin: 0;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-sm);
-`
-
-//#endregion
-
-const INITIAL_SECTIONS: ReorderableSection[] = [
-  {
-    key: 'group-a',
-    label: 'Group A',
-    items: [{ id: 'alpha' }, { id: 'beta' }, { id: 'gamma' }],
-    emptyLabel: 'Drop items here',
-  },
-  {
-    key: 'group-b',
-    label: 'Group B',
-    items: [{ id: 'delta' }],
-    emptyLabel: 'Drop items here',
-  },
-]
-
-function applyDemoMove(
-  sections: ReadonlyArray<ReorderableSection>,
-  move: ReorderableMove,
-): ReorderableSection[] {
-  const next = sections.map(section => ({
-    ...section,
-    items: [...section.items],
-  }))
-
-  const fromSection = next.find(section => section.key === move.from.sectionKey)
-  const toSection = next.find(section => section.key === move.to.sectionKey)
-  if (!fromSection || !toSection) return [...sections]
-
-  const [moved] = fromSection.items.splice(move.from.index, 1)
-  if (!moved) return [...sections]
-
-  let insertIndex = move.to.insertIndex
-  if (fromSection.key === toSection.key && move.from.index < insertIndex) {
-    insertIndex -= 1
-  }
-  insertIndex = Math.max(0, Math.min(insertIndex, toSection.items.length))
-  toSection.items.splice(insertIndex, 0, moved)
-  return next
-}
-
-/** Dummy prop-driven demo — wire into a dev screen or Storybook later. */
-export function ReorderableSectionsDemo(): React.ReactElement {
-  const [sections, setSections] =
-    useState<ReadonlyArray<ReorderableSection>>(INITIAL_SECTIONS)
-  const [selectedId, setSelectedId] = useState<string | undefined>('alpha')
-
-  const handleMove = useCallback((move: ReorderableMove) => {
-    setSections(current => applyDemoMove(current, move))
-  }, [])
-
-  return (
-    <StyledDemo>
-      <StyledHint as="p">
-        Drag handles reorder within and across groups. Selection is local demo
-        state only.
-      </StyledHint>
-      <ReorderableSections
-        sections={sections}
-        selectedId={selectedId}
-        onSelect={setSelectedId}
-        onMove={handleMove}
-      />
-    </StyledDemo>
-  )
-}
+import { useCallback, useState } from 'react'
+import { styled } from 'styled-components'
+import { Text } from '../../typography/Text.js'
+import { ReorderableSections } from './ReorderableSections.js'
+import type { ReorderableMove, ReorderableSection } from './types.js'
+
+//#region styled-components
+
+const StyledDemo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 320px;
+  padding: 16px;
+  color: var(--platform-colors-text);
+  background: var(
+    --platform-colors-app-viewport,
+    var(--platform-colors-surface)
+  );
+`
+
+const StyledHint = styled(Text)`
+  margin: 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+//#endregion
+
+const INITIAL_SECTIONS: ReorderableSection[] = [
+  {
+    key: 'group-a',
+    label: 'Group A',
+    items: [{ id: 'alpha' }, { id: 'beta' }, { id: 'gamma' }],
+    emptyLabel: 'Drop items here',
+  },
+  {
+    key: 'group-b',
+    label: 'Group B',
+    items: [{ id: 'delta' }],
+    emptyLabel: 'Drop items here',
+  },
+]
+
+function applyDemoMove(
+  sections: ReadonlyArray<ReorderableSection>,
+  move: ReorderableMove,
+): ReorderableSection[] {
+  const next = sections.map(section => ({
+    ...section,
+    items: [...section.items],
+  }))
+
+  const fromSection = next.find(section => section.key === move.from.sectionKey)
+  const toSection = next.find(section => section.key === move.to.sectionKey)
+  if (!fromSection || !toSection) return [...sections]
+
+  const [moved] = fromSection.items.splice(move.from.index, 1)
+  if (!moved) return [...sections]
+
+  let insertIndex = move.to.insertIndex
+  if (fromSection.key === toSection.key && move.from.index < insertIndex) {
+    insertIndex -= 1
+  }
+  insertIndex = Math.max(0, Math.min(insertIndex, toSection.items.length))
+  toSection.items.splice(insertIndex, 0, moved)
+  return next
+}
+
+/** Dummy prop-driven demo — wire into a dev screen or Storybook later. */
+export function ReorderableSectionsDemo(): React.ReactElement {
+  const [sections, setSections] =
+    useState<ReadonlyArray<ReorderableSection>>(INITIAL_SECTIONS)
+  const [selectedId, setSelectedId] = useState<string | undefined>('alpha')
+
+  const handleMove = useCallback((move: ReorderableMove) => {
+    setSections(current => applyDemoMove(current, move))
+  }, [])
+
+  return (
+    <StyledDemo>
+      <StyledHint as="p">
+        Drag handles reorder within and across groups. Selection is local demo
+        state only.
+      </StyledHint>
+      <ReorderableSections
+        sections={sections}
+        selectedId={selectedId}
+        onSelect={setSelectedId}
+        onMove={handleMove}
+      />
+    </StyledDemo>
+  )
+}

package/src/components/common/lists/reorderable/index.ts

@@ -1,15 +1,15 @@
-export { DragHandle } from './DragHandle.js'
-export { ReorderableList } from './ReorderableList.js'
-export { ReorderableListRow } from './ReorderableListRow.js'
-export { ReorderableSections } from './ReorderableSections.js'
-export { ReorderableSectionsDemo } from './ReorderableSectionsDemo.js'
-export { insertIndexFromRowRect, reorderIds } from './reorderableUtils.js'
-export type {
-  ReorderableDragSource,
-  ReorderableDropTarget,
-  ReorderableItem,
-  ReorderableItemRenderContext,
-  ReorderableMove,
-  ReorderableSection,
-} from './types.js'
-export { useReorderableDragState } from './useReorderableDragState.js'
+export { DragHandle } from './DragHandle.js'
+export { ReorderableList } from './ReorderableList.js'
+export { ReorderableListRow } from './ReorderableListRow.js'
+export { ReorderableSections } from './ReorderableSections.js'
+export { ReorderableSectionsDemo } from './ReorderableSectionsDemo.js'
+export { insertIndexFromRowRect, reorderIds } from './reorderableUtils.js'
+export type {
+  ReorderableDragSource,
+  ReorderableDropTarget,
+  ReorderableItem,
+  ReorderableItemRenderContext,
+  ReorderableMove,
+  ReorderableSection,
+} from './types.js'
+export { useReorderableDragState } from './useReorderableDragState.js'

package/src/components/common/lists/reorderable/reorderableUtils.test.ts

@@ -1,28 +1,28 @@
-import { describe, expect, it } from 'vitest'
-import { insertIndexFromRowRect, reorderIds } from './reorderableUtils.js'
-
-describe('insertIndexFromRowRect', () => {
-  const rect = { top: 100, height: 40 }
-
-  it('returns row index when pointer is in upper half', () => {
-    expect(insertIndexFromRowRect(110, rect, 2)).toBe(2)
-  })
-
-  it('returns row index + 1 when pointer is in lower half', () => {
-    expect(insertIndexFromRowRect(125, rect, 2)).toBe(3)
-  })
-})
-
-describe('reorderIds', () => {
-  it('moves an item down within the list', () => {
-    expect(reorderIds(['a', 'b', 'c'], 0, 2)).toEqual(['b', 'a', 'c'])
-  })
-
-  it('moves an item up within the list', () => {
-    expect(reorderIds(['a', 'b', 'c'], 2, 0)).toEqual(['c', 'a', 'b'])
-  })
-
-  it('returns a copy when from index is invalid', () => {
-    expect(reorderIds(['a', 'b'], 5, 0)).toEqual(['a', 'b'])
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { insertIndexFromRowRect, reorderIds } from './reorderableUtils.js'
+
+describe('insertIndexFromRowRect', () => {
+  const rect = { top: 100, height: 40 }
+
+  it('returns row index when pointer is in upper half', () => {
+    expect(insertIndexFromRowRect(110, rect, 2)).toBe(2)
+  })
+
+  it('returns row index + 1 when pointer is in lower half', () => {
+    expect(insertIndexFromRowRect(125, rect, 2)).toBe(3)
+  })
+})
+
+describe('reorderIds', () => {
+  it('moves an item down within the list', () => {
+    expect(reorderIds(['a', 'b', 'c'], 0, 2)).toEqual(['b', 'a', 'c'])
+  })
+
+  it('moves an item up within the list', () => {
+    expect(reorderIds(['a', 'b', 'c'], 2, 0)).toEqual(['c', 'a', 'b'])
+  })
+
+  it('returns a copy when from index is invalid', () => {
+    expect(reorderIds(['a', 'b'], 5, 0)).toEqual(['a', 'b'])
+  })
+})

package/src/components/common/lists/reorderable/reorderableUtils.ts

@@ -1,23 +1,23 @@
-/** Half-row hit test — ps-book ChapterTree SectionList parity. */
-export function insertIndexFromRowRect(
-  clientY: number,
-  rect: Pick<DOMRect, 'top' | 'height'>,
-  rowIndex: number,
-): number {
-  return clientY < rect.top + rect.height / 2 ? rowIndex : rowIndex + 1
-}
-
-/** Rebuild item order after a within-list move (same container). */
-export function reorderIds<TId extends string>(
-  ids: ReadonlyArray<TId>,
-  fromIndex: number,
-  insertIndex: number,
-): TId[] {
-  if (fromIndex < 0 || fromIndex >= ids.length) return [...ids]
-  const next = [...ids]
-  const [moved] = next.splice(fromIndex, 1)
-  const targetIndex = insertIndex > fromIndex ? insertIndex - 1 : insertIndex
-  const clamped = Math.max(0, Math.min(targetIndex, next.length))
-  next.splice(clamped, 0, moved)
-  return next
-}
+/** Half-row hit test — ps-book ChapterTree SectionList parity. */
+export function insertIndexFromRowRect(
+  clientY: number,
+  rect: Pick<DOMRect, 'top' | 'height'>,
+  rowIndex: number,
+): number {
+  return clientY < rect.top + rect.height / 2 ? rowIndex : rowIndex + 1
+}
+
+/** Rebuild item order after a within-list move (same container). */
+export function reorderIds<TId extends string>(
+  ids: ReadonlyArray<TId>,
+  fromIndex: number,
+  insertIndex: number,
+): TId[] {
+  if (fromIndex < 0 || fromIndex >= ids.length) return [...ids]
+  const next = [...ids]
+  const [moved] = next.splice(fromIndex, 1)
+  const targetIndex = insertIndex > fromIndex ? insertIndex - 1 : insertIndex
+  const clamped = Math.max(0, Math.min(targetIndex, next.length))
+  next.splice(clamped, 0, moved)
+  return next
+}

package/src/components/common/lists/reorderable/types.ts

@@ -1,40 +1,40 @@
-import type { ReactNode } from 'react'
-
-export type ReorderableItem<TId extends string = string> = {
-  id: TId
-  disabled?: boolean
-}
-
-export type ReorderableSection<TId extends string = string> = {
-  key: string
-  label?: ReactNode
-  items: ReadonlyArray<ReorderableItem<TId>>
-  headerActions?: ReactNode
-  emptyLabel?: string
-}
-
-export type ReorderableMove<TId extends string = string> = {
-  itemId: TId
-  from: { sectionKey: string; index: number }
-  to: { sectionKey: string; insertIndex: number }
-}
-
-export type ReorderableItemRenderContext<TId extends string = string> = {
-  id: TId
-  sectionKey: string
-  index: number
-  item: ReorderableItem<TId>
-  selected: boolean
-  dragging: boolean
-  disabled: boolean
-}
-
-export type ReorderableDragSource = {
-  sectionKey: string
-  index: number
-}
-
-export type ReorderableDropTarget = {
-  sectionKey: string
-  insertIndex: number
-}
+import type { ReactNode } from 'react'
+
+export type ReorderableItem<TId extends string = string> = {
+  id: TId
+  disabled?: boolean
+}
+
+export type ReorderableSection<TId extends string = string> = {
+  key: string
+  label?: ReactNode
+  items: ReadonlyArray<ReorderableItem<TId>>
+  headerActions?: ReactNode
+  emptyLabel?: string
+}
+
+export type ReorderableMove<TId extends string = string> = {
+  itemId: TId
+  from: { sectionKey: string; index: number }
+  to: { sectionKey: string; insertIndex: number }
+}
+
+export type ReorderableItemRenderContext<TId extends string = string> = {
+  id: TId
+  sectionKey: string
+  index: number
+  item: ReorderableItem<TId>
+  selected: boolean
+  dragging: boolean
+  disabled: boolean
+}
+
+export type ReorderableDragSource = {
+  sectionKey: string
+  index: number
+}
+
+export type ReorderableDropTarget = {
+  sectionKey: string
+  insertIndex: number
+}

package/src/components/common/lists/reorderable/useReorderableDragState.ts

@@ -1,49 +1,49 @@
-import { useCallback, useRef, useState } from 'react'
-import type { ReorderableDragSource, ReorderableDropTarget } from './types.js'
-
-export type ActiveReorderableDrag<TId extends string> = {
-  itemId: TId
-  from: ReorderableDragSource
-}
-
-export function useReorderableDragState<TId extends string>() {
-  const draggedRef = useRef<ActiveReorderableDrag<TId> | null>(null)
-  const [draggedId, setDraggedId] = useState<TId | null>(null)
-  const [dropTarget, setDropTarget] = useState<ReorderableDropTarget | null>(
-    null,
-  )
-
-  const beginDrag = useCallback((itemId: TId, from: ReorderableDragSource) => {
-    draggedRef.current = { itemId, from }
-    setDraggedId(itemId)
-    setDropTarget(null)
-  }, [])
-
-  const endDrag = useCallback(() => {
-    draggedRef.current = null
-    setDraggedId(null)
-    setDropTarget(null)
-  }, [])
-
-  const hoverDrop = useCallback((target: ReorderableDropTarget) => {
-    setDropTarget(target)
-  }, [])
-
-  const takeCommittedMove = useCallback((): {
-    drag: ActiveReorderableDrag<TId>
-    to: ReorderableDropTarget
-  } | null => {
-    const drag = draggedRef.current
-    if (!drag || !dropTarget) return null
-    return { drag, to: dropTarget }
-  }, [dropTarget])
-
-  return {
-    draggedId,
-    dropTarget,
-    beginDrag,
-    endDrag,
-    hoverDrop,
-    takeCommittedMove,
-  }
-}
+import { useCallback, useRef, useState } from 'react'
+import type { ReorderableDragSource, ReorderableDropTarget } from './types.js'
+
+export type ActiveReorderableDrag<TId extends string> = {
+  itemId: TId
+  from: ReorderableDragSource
+}
+
+export function useReorderableDragState<TId extends string>() {
+  const draggedRef = useRef<ActiveReorderableDrag<TId> | null>(null)
+  const [draggedId, setDraggedId] = useState<TId | null>(null)
+  const [dropTarget, setDropTarget] = useState<ReorderableDropTarget | null>(
+    null,
+  )
+
+  const beginDrag = useCallback((itemId: TId, from: ReorderableDragSource) => {
+    draggedRef.current = { itemId, from }
+    setDraggedId(itemId)
+    setDropTarget(null)
+  }, [])
+
+  const endDrag = useCallback(() => {
+    draggedRef.current = null
+    setDraggedId(null)
+    setDropTarget(null)
+  }, [])
+
+  const hoverDrop = useCallback((target: ReorderableDropTarget) => {
+    setDropTarget(target)
+  }, [])
+
+  const takeCommittedMove = useCallback((): {
+    drag: ActiveReorderableDrag<TId>
+    to: ReorderableDropTarget
+  } | null => {
+    const drag = draggedRef.current
+    if (!drag || !dropTarget) return null
+    return { drag, to: dropTarget }
+  }, [dropTarget])
+
+  return {
+    draggedId,
+    dropTarget,
+    beginDrag,
+    endDrag,
+    hoverDrop,
+    takeCommittedMove,
+  }
+}