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

package/src/components/common/canvas/useCanvasDragResize.ts

@@ -1,161 +1,161 @@
-import { useCallback, useRef, useState } from 'react'
-import type { PointerEvent as ReactPointerEvent } from 'react'
-import {
-  clientDeltaToCanvas,
-  moveCanvasRect,
-  resizeCanvasRect,
-  type CanvasRect,
-  type CanvasResizeHandle,
-  type CanvasSize,
-  type ViewportRect,
-} from './canvasGeometry.js'
-
-export type CanvasDragKind = 'move' | 'resize'
-
-export interface CanvasDragState {
-  kind: CanvasDragKind
-  frame: CanvasRect
-}
-
-export interface UseCanvasDragResizeOptions {
-  canvas: CanvasSize
-  getViewport: () => ViewportRect | null
-  gridStep?: number
-  minimum?: Pick<CanvasRect, 'w' | 'h'>
-  onPreview?: (frame: CanvasRect) => void
-  onCommit?: (frame: CanvasRect) => void
-}
-
-export interface UseCanvasDragResizeResult {
-  dragState: CanvasDragState | null
-  shouldSuppressClick: boolean
-  beginMove: (
-    frame: CanvasRect,
-    event: ReactPointerEvent<HTMLElement>,
-  ) => void
-  beginResize: (
-    frame: CanvasRect,
-    handle: CanvasResizeHandle,
-    event: ReactPointerEvent<HTMLElement>,
-  ) => void
-  clearClickSuppression: () => void
-  cancelDrag: () => void
-}
-
-export function useCanvasDragResize({
-  canvas,
-  getViewport,
-  gridStep,
-  minimum,
-  onPreview,
-  onCommit,
-}: UseCanvasDragResizeOptions): UseCanvasDragResizeResult {
-  const [dragState, setDragState] = useState<CanvasDragState | null>(null)
-  const [shouldSuppressClick, setShouldSuppressClick] = useState(false)
-  const cleanupRef = useRef<(() => void) | null>(null)
-
-  const cancelDrag = useCallback(() => {
-    cleanupRef.current?.()
-    cleanupRef.current = null
-    setDragState(null)
-  }, [])
-
-  const clearClickSuppression = useCallback(() => {
-    setShouldSuppressClick(false)
-  }, [])
-
-  const begin = useCallback(
-    (
-      kind: CanvasDragKind,
-      frame: CanvasRect,
-      event: ReactPointerEvent<HTMLElement>,
-      handle?: CanvasResizeHandle,
-    ): void => {
-      const viewport = getViewport()
-      if (!viewport) return
-      event.preventDefault()
-      event.stopPropagation()
-      cleanupRef.current?.()
-      const startX = event.clientX
-      const startY = event.clientY
-      let moved = false
-      let latest = frame
-
-      const frameAt = (clientX: number, clientY: number): CanvasRect => {
-        const delta = clientDeltaToCanvas({
-          deltaX: clientX - startX,
-          deltaY: clientY - startY,
-          viewport,
-          canvas,
-        })
-        return kind === 'move'
-          ? moveCanvasRect({ rect: frame, delta, canvas, gridStep })
-          : resizeCanvasRect({
-              rect: frame,
-              delta,
-              handle: handle ?? 'se',
-              canvas,
-              minimum,
-              gridStep,
-            })
-      }
-
-      let onUp: (upEvent: PointerEvent) => void
-      let onCancel: () => void
-      const onMove = (moveEvent: PointerEvent): void => {
-        if (moveEvent.buttons === 0) {
-          onUp(moveEvent)
-          return
-        }
-        if (
-          !moved &&
-          Math.hypot(moveEvent.clientX - startX, moveEvent.clientY - startY) < 3
-        ) {
-          return
-        }
-        moved = true
-        latest = frameAt(moveEvent.clientX, moveEvent.clientY)
-        setDragState({ kind, frame: latest })
-        onPreview?.(latest)
-      }
-      onUp = (upEvent: PointerEvent): void => {
-        window.removeEventListener('pointermove', onMove)
-        window.removeEventListener('pointerup', onUp)
-        window.removeEventListener('pointercancel', onCancel)
-        cleanupRef.current = null
-        setDragState(null)
-        if (!moved) return
-        setShouldSuppressClick(true)
-        latest = frameAt(upEvent.clientX, upEvent.clientY)
-        onCommit?.(latest)
-      }
-      onCancel = (): void => {
-        window.removeEventListener('pointermove', onMove)
-        window.removeEventListener('pointerup', onUp)
-        window.removeEventListener('pointercancel', onCancel)
-        cleanupRef.current = null
-        setDragState(null)
-        onPreview?.(frame)
-      }
-      window.addEventListener('pointermove', onMove)
-      window.addEventListener('pointerup', onUp)
-      window.addEventListener('pointercancel', onCancel)
-      cleanupRef.current = () => {
-        window.removeEventListener('pointermove', onMove)
-        window.removeEventListener('pointerup', onUp)
-        window.removeEventListener('pointercancel', onCancel)
-      }
-    },
-    [canvas, getViewport, gridStep, minimum, onCommit, onPreview],
-  )
-
-  return {
-    dragState,
-    shouldSuppressClick,
-    beginMove: (frame, event) => begin('move', frame, event),
-    beginResize: (frame, handle, event) =>
-      begin('resize', frame, event, handle),
-    clearClickSuppression,
-    cancelDrag,
-  }
-}
+import { useCallback, useRef, useState } from 'react'
+import type { PointerEvent as ReactPointerEvent } from 'react'
+import {
+  clientDeltaToCanvas,
+  moveCanvasRect,
+  resizeCanvasRect,
+  type CanvasRect,
+  type CanvasResizeHandle,
+  type CanvasSize,
+  type ViewportRect,
+} from './canvasGeometry.js'
+
+export type CanvasDragKind = 'move' | 'resize'
+
+export interface CanvasDragState {
+  kind: CanvasDragKind
+  frame: CanvasRect
+}
+
+export interface UseCanvasDragResizeOptions {
+  canvas: CanvasSize
+  getViewport: () => ViewportRect | null
+  gridStep?: number
+  minimum?: Pick<CanvasRect, 'w' | 'h'>
+  onPreview?: (frame: CanvasRect) => void
+  onCommit?: (frame: CanvasRect) => void
+}
+
+export interface UseCanvasDragResizeResult {
+  dragState: CanvasDragState | null
+  shouldSuppressClick: boolean
+  beginMove: (
+    frame: CanvasRect,
+    event: ReactPointerEvent<HTMLElement>,
+  ) => void
+  beginResize: (
+    frame: CanvasRect,
+    handle: CanvasResizeHandle,
+    event: ReactPointerEvent<HTMLElement>,
+  ) => void
+  clearClickSuppression: () => void
+  cancelDrag: () => void
+}
+
+export function useCanvasDragResize({
+  canvas,
+  getViewport,
+  gridStep,
+  minimum,
+  onPreview,
+  onCommit,
+}: UseCanvasDragResizeOptions): UseCanvasDragResizeResult {
+  const [dragState, setDragState] = useState<CanvasDragState | null>(null)
+  const [shouldSuppressClick, setShouldSuppressClick] = useState(false)
+  const cleanupRef = useRef<(() => void) | null>(null)
+
+  const cancelDrag = useCallback(() => {
+    cleanupRef.current?.()
+    cleanupRef.current = null
+    setDragState(null)
+  }, [])
+
+  const clearClickSuppression = useCallback(() => {
+    setShouldSuppressClick(false)
+  }, [])
+
+  const begin = useCallback(
+    (
+      kind: CanvasDragKind,
+      frame: CanvasRect,
+      event: ReactPointerEvent<HTMLElement>,
+      handle?: CanvasResizeHandle,
+    ): void => {
+      const viewport = getViewport()
+      if (!viewport) return
+      event.preventDefault()
+      event.stopPropagation()
+      cleanupRef.current?.()
+      const startX = event.clientX
+      const startY = event.clientY
+      let moved = false
+      let latest = frame
+
+      const frameAt = (clientX: number, clientY: number): CanvasRect => {
+        const delta = clientDeltaToCanvas({
+          deltaX: clientX - startX,
+          deltaY: clientY - startY,
+          viewport,
+          canvas,
+        })
+        return kind === 'move'
+          ? moveCanvasRect({ rect: frame, delta, canvas, gridStep })
+          : resizeCanvasRect({
+              rect: frame,
+              delta,
+              handle: handle ?? 'se',
+              canvas,
+              minimum,
+              gridStep,
+            })
+      }
+
+      let onUp: (upEvent: PointerEvent) => void
+      let onCancel: () => void
+      const onMove = (moveEvent: PointerEvent): void => {
+        if (moveEvent.buttons === 0) {
+          onUp(moveEvent)
+          return
+        }
+        if (
+          !moved &&
+          Math.hypot(moveEvent.clientX - startX, moveEvent.clientY - startY) < 3
+        ) {
+          return
+        }
+        moved = true
+        latest = frameAt(moveEvent.clientX, moveEvent.clientY)
+        setDragState({ kind, frame: latest })
+        onPreview?.(latest)
+      }
+      onUp = (upEvent: PointerEvent): void => {
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerup', onUp)
+        window.removeEventListener('pointercancel', onCancel)
+        cleanupRef.current = null
+        setDragState(null)
+        if (!moved) return
+        setShouldSuppressClick(true)
+        latest = frameAt(upEvent.clientX, upEvent.clientY)
+        onCommit?.(latest)
+      }
+      onCancel = (): void => {
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerup', onUp)
+        window.removeEventListener('pointercancel', onCancel)
+        cleanupRef.current = null
+        setDragState(null)
+        onPreview?.(frame)
+      }
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+      window.addEventListener('pointercancel', onCancel)
+      cleanupRef.current = () => {
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerup', onUp)
+        window.removeEventListener('pointercancel', onCancel)
+      }
+    },
+    [canvas, getViewport, gridStep, minimum, onCommit, onPreview],
+  )
+
+  return {
+    dragState,
+    shouldSuppressClick,
+    beginMove: (frame, event) => begin('move', frame, event),
+    beginResize: (frame, handle, event) =>
+      begin('resize', frame, event, handle),
+    clearClickSuppression,
+    cancelDrag,
+  }
+}

package/src/components/common/cards/OpenReviewCard.tsx

@@ -0,0 +1,209 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { FileText } from 'lucide-react'
+import { styled } from 'styled-components'
+
+export interface OpenReviewCardProps
+  extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  title: ReactNode
+  meta?: ReactNode
+  status?: ReactNode
+  icon?: ReactNode
+  children: ReactNode
+  detail?: ReactNode
+  actions?: ReactNode
+  headerActions?: ReactNode
+  secondaryActions?: ReactNode
+  selected?: boolean
+  density?: 'normal' | 'compact'
+  actionsAlign?: 'start' | 'end'
+}
+
+const Card = styled.article<{
+  $selected?: boolean
+  $hasIcon?: boolean
+  $density: 'normal' | 'compact'
+}>`
+  display: grid;
+  grid-template-columns: ${({ $hasIcon }) =>
+    $hasIcon ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr)'};
+  gap: ${({ $density }) =>
+    $density === 'compact' ? '7px' : 'var(--platform-spacing-md, 12px)'};
+  width: 100%;
+  border: 1px solid
+    ${({ $selected }) =>
+      $selected
+        ? 'color-mix(in srgb, var(--platform-colors-focus, #0f766e) 62%, var(--platform-colors-border, #d8dfde))'
+        : 'var(--platform-colors-border, #d8dfde)'};
+  border-radius: ${({ $density }) => ($density === 'compact' ? '6px' : '8px')};
+  padding: ${({ $density }) =>
+    $density === 'compact' ? '10px 12px' : '18px 20px'};
+  color: var(--platform-colors-text, #20272b);
+  background: var(--platform-colors-surface, #fff);
+  --open-review-card-gap: ${({ $density }) =>
+    $density === 'compact' ? '7px' : '12px'};
+  --open-review-card-title-size: ${({ $density }) =>
+    $density === 'compact' ? '13px' : '15px'};
+  --open-review-card-title-line-height: ${({ $density }) =>
+    $density === 'compact' ? '1.2' : '1.25'};
+  --open-review-card-meta-offset: ${({ $density }) =>
+    $density === 'compact' ? '3px' : '2px'};
+  --open-review-card-meta-line-height: ${({ $density }) =>
+    $density === 'compact' ? '1.2' : '1.3'};
+  --open-review-card-content-size: ${({ $density }) =>
+    $density === 'compact' ? '14px' : '15px'};
+  --open-review-card-content-line-height: ${({ $density }) =>
+    $density === 'compact' ? '1.38' : '1.48'};
+  box-shadow: ${({ $selected }) =>
+    $selected
+      ? '0 0 0 3px color-mix(in srgb, var(--platform-colors-focus, #0f766e) 10%, transparent)'
+      : 'none'};
+`
+
+const IconSlot = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  margin-top: 1px;
+  border-radius: 999px;
+  color: var(--platform-colors-focus, #0f766e);
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-focus, #0f766e) 10%,
+    var(--platform-colors-surface, #fff)
+  );
+`
+
+const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--open-review-card-gap, 12px);
+  min-width: 0;
+`
+
+const Header = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--platform-spacing-md, 12px);
+  min-width: 0;
+`
+
+const Heading = styled.div`
+  min-width: 0;
+`
+
+const Title = styled.div`
+  overflow: hidden;
+  color: var(--platform-colors-text, #20272b);
+  font-size: var(--open-review-card-title-size, 15px);
+  font-weight: 700;
+  line-height: var(--open-review-card-title-line-height, 1.25);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const Meta = styled.div`
+  margin-top: var(--open-review-card-meta-offset, 2px);
+  overflow: hidden;
+  color: var(--platform-colors-text-secondary, #6b7478);
+  font-size: var(--platform-typography-font-size-sm, 12px);
+  line-height: var(--open-review-card-meta-line-height, 1.3);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StatusSlot = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-sm, 8px);
+  flex: 0 0 auto;
+`
+
+const Content = styled.div`
+  color: var(--platform-colors-text, #20272b);
+  font-size: var(--open-review-card-content-size, 15px);
+  line-height: var(--open-review-card-content-line-height, 1.48);
+  white-space: pre-wrap;
+`
+
+const Detail = styled.div`
+  padding-left: 12px;
+  border-left: 3px solid var(--platform-colors-border, #d8dfde);
+  color: var(--platform-colors-text-secondary, #6b7478);
+  font-size: var(--platform-typography-font-size-base, 13px);
+  line-height: 1.45;
+`
+
+const ActionRow = styled.div<{ $align: 'start' | 'end' }>`
+  display: flex;
+  align-items: flex-end;
+  justify-content: ${({ $align }) =>
+    $align === 'end' ? 'flex-end' : 'flex-start'};
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-sm, 8px);
+  min-width: 0;
+`
+
+const SecondaryActionRow = styled(ActionRow)`
+  margin-top: -4px;
+`
+
+export function OpenReviewCard({
+  title,
+  meta,
+  status,
+  icon,
+  children,
+  detail,
+  actions,
+  headerActions,
+  secondaryActions,
+  selected,
+  density = 'normal',
+  actionsAlign = 'start',
+  ...articleProps
+}: OpenReviewCardProps): React.ReactElement {
+  const hasIcon = Boolean(icon)
+  return (
+    <Card
+      {...articleProps}
+      $selected={selected}
+      $hasIcon={hasIcon}
+      $density={density}
+    >
+      {icon ? <IconSlot>{icon}</IconSlot> : null}
+      <Body>
+        <Header>
+          <Heading>
+            <Title>{title}</Title>
+            {meta ? <Meta>{meta}</Meta> : null}
+          </Heading>
+          {status || headerActions ? (
+            <StatusSlot>
+              {status}
+              {headerActions}
+            </StatusSlot>
+          ) : null}
+        </Header>
+        <Content>{children}</Content>
+        {detail ? <Detail>{detail}</Detail> : null}
+        {actions ? (
+          <ActionRow $align={actionsAlign}>{actions}</ActionRow>
+        ) : null}
+        {secondaryActions ? (
+          <SecondaryActionRow $align={actionsAlign}>
+            {secondaryActions}
+          </SecondaryActionRow>
+        ) : null}
+      </Body>
+    </Card>
+  )
+}
+
+export function OpenReviewCardIcon(): React.ReactElement {
+  return <FileText aria-hidden="true" size={18} strokeWidth={2.2} />
+}

package/src/components/common/cards/index.ts

@@ -0,0 +1,5 @@
+export {
+  OpenReviewCard,
+  OpenReviewCardIcon,
+  type OpenReviewCardProps,
+} from './OpenReviewCard.js'