@multicomma/arkcn 0.1.0

package/src/lib/drag-preview.ts

@@ -0,0 +1,39 @@
+import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/utils/preserve-offset-on-source"
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/utils/set-custom-native-drag-preview"
+import type { ElementEventBasePayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+
+type GeneratePreviewArgs = ElementEventBasePayload & {
+  nativeSetDragImage: ((image: Element, x: number, y: number) => void) | null
+}
+
+/**
+ * Render a crisp clone of the dragged element as the native drag preview,
+ * keeping the pointer at the same offset it had on the source. Use from a
+ * draggable's `onGenerateDragPreview`.
+ */
+export function cloneDragPreview(
+  { source, location, nativeSetDragImage }: GeneratePreviewArgs,
+  options: { className?: string; element?: HTMLElement } = {}
+) {
+  const element = options.element ?? source.element
+  const rect = element.getBoundingClientRect()
+  setCustomNativeDragPreview({
+    nativeSetDragImage,
+    getOffset: preserveOffsetOnSource({ element, input: location.current.input }),
+    render({ container }) {
+      const clone = element.cloneNode(true) as HTMLElement
+      clone.removeAttribute("data-dragging")
+      clone.removeAttribute("data-grabbed")
+      clone.style.width = `${rect.width}px`
+      clone.style.height = `${rect.height}px`
+      clone.style.boxSizing = "border-box"
+      clone.style.pointerEvents = "none"
+      clone.classList.add("shadow-xl", "rotate-1", "opacity-95")
+      if (options.className) clone.classList.add(...options.className.split(" ").filter(Boolean))
+      container.appendChild(clone)
+      return () => {
+        container.removeChild(clone)
+      }
+    },
+  })
+}

package/src/lib/form.ts

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+type Errors<T> = Partial<Record<keyof T, string>>
+
+/**
+ * A small, dependency-free form hook: values, per-field errors, and a submit
+ * handler that validates first. Pair it with the `Field*` parts
+ * (`data-invalid` on `Field`, `aria-invalid` on the control, `FieldError` for
+ * the message). Validation is a plain function so any schema library can be
+ * adapted by returning its messages keyed by field.
+ */
+export function useForm<T extends object>(
+  defaultValues: T,
+  validate: (values: T) => Errors<T>,
+  onSubmit: (values: T) => void,
+  options: { mode?: "onSubmit" | "onChange" } = {}
+) {
+  const [values, setValues] = React.useState<T>(defaultValues)
+  const [errors, setErrors] = React.useState<Errors<T>>({})
+  const [submitted, setSubmitted] = React.useState(false)
+
+  const setValue = <K extends keyof T>(key: K, value: T[K]) => {
+    setValues((prev) => {
+      const next = { ...prev, [key]: value }
+      if (options.mode === "onChange" || submitted) setErrors(validate(next))
+      return next
+    })
+  }
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    setSubmitted(true)
+    const nextErrors = validate(values)
+    setErrors(nextErrors)
+    if (Object.keys(nextErrors).length === 0) onSubmit(values)
+  }
+
+  return { values, errors, setValue, setValues, handleSubmit }
+}

package/src/lib/history.ts

@@ -0,0 +1,55 @@
+import * as React from "react"
+
+/**
+ * Undo/redo state for any immutable value. `set` records a history entry
+ * unless `{ commit: false }` is passed (live drags, typing); `checkpoint`
+ * snapshots the present before such a sequence so one undo restores it.
+ */
+export function useHistory<T>(initial: T | (() => T), limit = 100) {
+  const [state, setState] = React.useState(() => ({
+    past: [] as T[],
+    present: typeof initial === "function" ? (initial as () => T)() : initial,
+    future: [] as T[],
+  }))
+  const set = React.useCallback(
+    (update: T | ((prev: T) => T), options?: { commit?: boolean }) =>
+      setState((s) => {
+        const next = typeof update === "function" ? (update as (prev: T) => T)(s.present) : update
+        if (Object.is(next, s.present)) return s
+        if (options?.commit === false) return { ...s, present: next }
+        return { past: [...s.past.slice(-(limit - 1)), s.present], present: next, future: [] }
+      }),
+    [limit]
+  )
+  const checkpoint = React.useCallback(
+    () => setState((s) => ({ past: [...s.past.slice(-(limit - 1)), s.present], present: s.present, future: [] })),
+    [limit]
+  )
+  const undo = React.useCallback(
+    () =>
+      setState((s) =>
+        s.past.length
+          ? { past: s.past.slice(0, -1), present: s.past[s.past.length - 1], future: [s.present, ...s.future] }
+          : s
+      ),
+    []
+  )
+  const redo = React.useCallback(
+    () =>
+      setState((s) =>
+        s.future.length ? { past: [...s.past, s.present], present: s.future[0], future: s.future.slice(1) } : s
+      ),
+    []
+  )
+  const reset = React.useCallback((value: T) => setState({ past: [], present: value, future: [] }), [])
+  return {
+    present: state.present,
+    set,
+    checkpoint,
+    undo,
+    redo,
+    reset,
+    canUndo: state.past.length > 0,
+    canRedo: state.future.length > 0,
+  }
+}

package/src/lib/row-layout.ts

@@ -0,0 +1,81 @@
+import type { CanvasDropDetails } from "@/components/ui/canvas"
+
+/**
+ * Rows-and-columns layout helpers for the Canvas primitive. A layout is
+ * `Row[]`, each row a list of items with a `width` (flex-grow weight). Drops
+ * above/below an item create a row, beside it a column; the resize handle
+ * shifts width between neighbours. Shared by the form builder and the widgets
+ * page.
+ */
+
+export type RowItem = { id: string; width: number }
+export type Row<T extends RowItem> = { id: string; items: T[] }
+
+const MIN_SHARE = 0.12
+
+export function applyRowDrop<T extends RowItem>(
+  rows: Row<T>[],
+  details: CanvasDropDetails,
+  options: { create: (data: unknown) => T | null; rowId: () => string }
+): Row<T>[] {
+  let item: T | undefined
+  let next = rows
+  let sourceRowIndex = -1
+  if (details.source.type === "node") {
+    const id = details.source.id
+    item = rows.flatMap((r) => r.items).find((i) => i.id === id)
+    sourceRowIndex = rows.findIndex((r) => r.items.some((i) => i.id === id))
+    next = rows.map((r) => ({ ...r, items: r.items.filter((i) => i.id !== id) })).filter((r) => r.items.length > 0)
+  } else {
+    item = options.create(details.source.data) ?? undefined
+  }
+  if (!item) return rows
+
+  const target = details.target
+  if (target.type === "area") return [...next, { id: options.rowId(), items: [{ ...item, width: 1 }] }]
+
+  // Dropping a node on its own top/bottom edge (keyboard: "move up/down" while it has siblings)
+  // pulls it out into a new row above or below its current row.
+  if (details.source.type === "node" && target.id === details.source.id) {
+    if (target.edge !== "top" && target.edge !== "bottom") return rows
+    const stillThere = next.length === rows.length
+    if (!stillThere) return rows
+    const at = target.edge === "top" ? sourceRowIndex : sourceRowIndex + 1
+    const newRow = { id: options.rowId(), items: [{ ...item, width: 1 }] }
+    return [...next.slice(0, at), newRow, ...next.slice(at)]
+  }
+
+  const rowIndex = next.findIndex((r) => r.items.some((i) => i.id === target.id))
+  if (rowIndex < 0) return rows
+  const row = next[rowIndex]
+  const index = row.items.findIndex((i) => i.id === target.id)
+  if (target.edge === "top" || target.edge === "bottom") {
+    const at = target.edge === "top" ? rowIndex : rowIndex + 1
+    const newRow = { id: options.rowId(), items: [{ ...item, width: 1 }] }
+    return [...next.slice(0, at), newRow, ...next.slice(at)]
+  }
+  const mean = row.items.reduce((s, i) => s + i.width, 0) / row.items.length
+  const at = target.edge === "left" ? index : index + 1
+  const items = [...row.items.slice(0, at), { ...item, width: mean }, ...row.items.slice(at)]
+  return next.map((r, i) => (i === rowIndex ? { ...r, items } : r))
+}
+
+/** Move width from item `index` to `index + 1` by a fraction of the row. */
+export function resizeRowItems<T extends RowItem>(row: Row<T>, index: number, deltaFraction: number): Row<T> {
+  const total = row.items.reduce((s, i) => s + i.width, 0)
+  const delta = deltaFraction * total
+  const a = row.items[index]
+  const b = row.items[index + 1]
+  if (!a || !b) return row
+  const min = MIN_SHARE * total
+  const clamped = Math.max(min - a.width, Math.min(delta, b.width - min))
+  if (clamped === 0) return row
+  const items = row.items.map((i, k) =>
+    k === index ? { ...i, width: a.width + clamped } : k === index + 1 ? { ...i, width: b.width - clamped } : i
+  )
+  return { ...row, items }
+}
+
+export function removeRowItem<T extends RowItem>(rows: Row<T>[], id: string): Row<T>[] {
+  return rows.map((r) => ({ ...r, items: r.items.filter((i) => i.id !== id) })).filter((r) => r.items.length > 0)
+}