@prenta/admin 0.92.0

package/src/components/ui/ResizableAside.tsx

@@ -0,0 +1,317 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+} from 'react'
+import { Maximize2, Minimize2 } from 'lucide-react'
+
+export const SECTION_INSPECTOR_WIDTH_KEY = 'prenta:section-inspector-width'
+export const SECTION_INSPECTOR_DEFAULT_WIDTH = 320
+export const SECTION_INSPECTOR_MIN_WIDTH = 280
+export const SECTION_INSPECTOR_MAX_WIDTH = 640
+export const SECTION_INSPECTOR_MIN_CANVAS_WIDTH = 96
+/** Below this editor-row width the expand action uses an overlay panel. */
+export const SECTION_INSPECTOR_OVERLAY_BREAKPOINT = 768
+export const SECTION_INSPECTOR_OVERLAY_MAX_WIDTH = 480
+
+function clampWidth(width: number, max = SECTION_INSPECTOR_MAX_WIDTH): number {
+  return Math.min(max, Math.max(SECTION_INSPECTOR_MIN_WIDTH, width))
+}
+
+/** Max inline width given the surrounding editor row. */
+export function computeInspectorMaxWidth(containerWidth: number): number {
+  if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
+    return SECTION_INSPECTOR_MAX_WIDTH
+  }
+  const containerCap = Math.max(
+    SECTION_INSPECTOR_MIN_WIDTH,
+    containerWidth - SECTION_INSPECTOR_MIN_CANVAS_WIDTH,
+  )
+  return Math.min(SECTION_INSPECTOR_MAX_WIDTH, containerCap)
+}
+
+/** Width when expanded as an overlay on tablet/mobile. */
+export function computeInspectorOverlayWidth(containerWidth: number): number {
+  if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
+    return SECTION_INSPECTOR_OVERLAY_MAX_WIDTH
+  }
+  return Math.min(
+    SECTION_INSPECTOR_OVERLAY_MAX_WIDTH,
+    Math.max(SECTION_INSPECTOR_MIN_WIDTH, containerWidth - 32),
+  )
+}
+
+export function readSectionInspectorWidth(): number {
+  if (typeof window === 'undefined') return SECTION_INSPECTOR_DEFAULT_WIDTH
+  try {
+    const raw = localStorage.getItem(SECTION_INSPECTOR_WIDTH_KEY)
+    if (!raw) return SECTION_INSPECTOR_DEFAULT_WIDTH
+    const parsed = Number.parseInt(raw, 10)
+    if (!Number.isFinite(parsed)) return SECTION_INSPECTOR_DEFAULT_WIDTH
+    return clampWidth(parsed)
+  } catch {
+    return SECTION_INSPECTOR_DEFAULT_WIDTH
+  }
+}
+
+function persistSectionInspectorWidth(width: number, max = SECTION_INSPECTOR_MAX_WIDTH): void {
+  try {
+    localStorage.setItem(SECTION_INSPECTOR_WIDTH_KEY, String(clampWidth(width, max)))
+  } catch {
+    // Storage may be unavailable in private mode.
+  }
+}
+
+interface InspectorResizeContextValue {
+  width: number
+  maxWidth: number
+  isExpanded: boolean
+  canExpand: boolean
+  toggleExpanded: () => void
+}
+
+const InspectorResizeContext = createContext<InspectorResizeContextValue | null>(null)
+
+export function useInspectorResize(): InspectorResizeContextValue | null {
+  return useContext(InspectorResizeContext)
+}
+
+interface ResizableAsideProps extends ComponentPropsWithoutRef<'aside'> {
+  children: ReactNode
+}
+
+/**
+ * Right-hand editor shell with a draggable left edge. Used by the page/post
+ * section inspector and post header panel (default 320px, persisted in
+ * localStorage). On tablet/mobile the handle uses a 44px touch target and
+ * the header expand button can grow the panel to an overlay width.
+ */
+export function ResizableAside({ children, className, style, ...props }: ResizableAsideProps) {
+  const asideRef = useRef<HTMLElement>(null)
+  const [width, setWidth] = useState(SECTION_INSPECTOR_DEFAULT_WIDTH)
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [dragging, setDragging] = useState(false)
+  const widthRef = useRef(width)
+  const compactWidthRef = useRef(SECTION_INSPECTOR_DEFAULT_WIDTH)
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
+
+  const inlineMax = computeInspectorMaxWidth(containerWidth)
+  const overlayMax = computeInspectorOverlayWidth(containerWidth)
+  const useOverlay =
+    containerWidth > 0 && containerWidth < SECTION_INSPECTOR_OVERLAY_BREAKPOINT && isExpanded
+  const effectiveMax = useOverlay ? overlayMax : inlineMax
+
+  useEffect(() => {
+    setWidth(readSectionInspectorWidth())
+  }, [])
+
+  useEffect(() => {
+    widthRef.current = width
+  }, [width])
+
+  useEffect(() => {
+    const parent = asideRef.current?.parentElement
+    if (!parent) return
+
+    const update = (nextWidth: number) => {
+      setContainerWidth(nextWidth)
+    }
+
+    update(parent.getBoundingClientRect().width)
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      update(entry.contentRect.width)
+    })
+    observer.observe(parent)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    setWidth((current) => clampWidth(current, effectiveMax))
+  }, [effectiveMax])
+
+  const endDrag = useCallback(() => {
+    dragRef.current = null
+    setDragging(false)
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+    persistSectionInspectorWidth(widthRef.current, inlineMax)
+    if (widthRef.current < effectiveMax - 24) {
+      setIsExpanded(false)
+    }
+  }, [effectiveMax, inlineMax])
+
+  const onPointerDown = useCallback((event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return
+    dragRef.current = { startX: event.clientX, startWidth: widthRef.current }
+    setDragging(true)
+    event.currentTarget.setPointerCapture(event.pointerId)
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (!dragRef.current) return
+      const delta = dragRef.current.startX - event.clientX
+      setWidth(clampWidth(dragRef.current.startWidth + delta, effectiveMax))
+    },
+    [effectiveMax],
+  )
+
+  const onPointerUp = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (!dragRef.current) return
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId)
+      }
+      endDrag()
+    },
+    [endDrag],
+  )
+
+  const nudgeWidth = useCallback(
+    (delta: number) => {
+      setWidth((current) => {
+        const next = clampWidth(current + delta, effectiveMax)
+        persistSectionInspectorWidth(next, inlineMax)
+        if (next < effectiveMax - 24) setIsExpanded(false)
+        return next
+      })
+    },
+    [effectiveMax, inlineMax],
+  )
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        nudgeWidth(16)
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        nudgeWidth(-16)
+      } else if (event.key === 'Home') {
+        event.preventDefault()
+        setIsExpanded(false)
+        setWidth(SECTION_INSPECTOR_MIN_WIDTH)
+        persistSectionInspectorWidth(SECTION_INSPECTOR_MIN_WIDTH, inlineMax)
+      } else if (event.key === 'End') {
+        event.preventDefault()
+        setWidth(effectiveMax)
+        persistSectionInspectorWidth(effectiveMax, inlineMax)
+        setIsExpanded(effectiveMax >= inlineMax - 8)
+      }
+    },
+    [effectiveMax, inlineMax, nudgeWidth],
+  )
+
+  const toggleExpanded = useCallback(() => {
+    if (isExpanded) {
+      const restored = clampWidth(compactWidthRef.current, inlineMax)
+      setIsExpanded(false)
+      setWidth(restored)
+      persistSectionInspectorWidth(restored, inlineMax)
+      return
+    }
+
+    compactWidthRef.current = widthRef.current
+    const target =
+      containerWidth > 0 && containerWidth < SECTION_INSPECTOR_OVERLAY_BREAKPOINT
+        ? overlayMax
+        : inlineMax
+    setIsExpanded(true)
+    setWidth(target)
+    persistSectionInspectorWidth(target, inlineMax)
+  }, [containerWidth, inlineMax, isExpanded, overlayMax])
+
+  useEffect(() => {
+    return () => {
+      if (dragRef.current) endDrag()
+    }
+  }, [endDrag])
+
+  const canExpand =
+    !isExpanded &&
+    (containerWidth > 0 && containerWidth < SECTION_INSPECTOR_OVERLAY_BREAKPOINT
+      ? overlayMax > width + 8
+      : inlineMax > width + 8)
+
+  return (
+    <InspectorResizeContext.Provider
+      value={{ width, maxWidth: effectiveMax, isExpanded, canExpand, toggleExpanded }}
+    >
+      <aside
+        {...props}
+        ref={asideRef}
+        data-overlay={useOverlay ? '' : undefined}
+        className={`relative shrink-0 ${useOverlay ? 'absolute top-0 right-0 bottom-0 z-20 shadow-lg' : ''} ${className ?? ''}`}
+        style={{ width, ...style }}
+      >
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize inspector panel"
+          aria-valuemin={SECTION_INSPECTOR_MIN_WIDTH}
+          aria-valuemax={effectiveMax}
+          aria-valuenow={width}
+          tabIndex={0}
+          data-dragging={dragging ? '' : undefined}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+          onKeyDown={onKeyDown}
+          className="group absolute inset-y-0 -left-5 z-10 flex w-11 -translate-x-1/2 cursor-col-resize touch-none focus-visible:outline-none md:-left-1 md:w-3 md:translate-x-0"
+        >
+          <div
+            className={`mx-auto h-full w-px motion-safe:transition-colors md:mx-0 ${
+              dragging
+                ? 'bg-primary'
+                : 'bg-border group-hover:bg-primary/50 group-focus-visible:bg-primary/50'
+            }`}
+          />
+        </div>
+        {children}
+      </aside>
+    </InspectorResizeContext.Provider>
+  )
+}
+
+const EXPAND_BUTTON_CLASS =
+  'text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none md:h-7 md:w-7'
+
+/** One-tap expand/collapse for tablet and mobile inspector panels. */
+export function InspectorExpandButton({ className }: { className?: string }) {
+  const ctx = useInspectorResize()
+  if (!ctx) return null
+
+  const { isExpanded, canExpand, toggleExpanded } = ctx
+  if (!canExpand && !isExpanded) return null
+
+  return (
+    <button
+      type="button"
+      onClick={toggleExpanded}
+      aria-label={isExpanded ? 'Collapse inspector panel' : 'Expand inspector panel'}
+      aria-pressed={isExpanded}
+      className={className ?? EXPAND_BUTTON_CLASS}
+    >
+      {isExpanded ? (
+        <Minimize2 className="h-4 w-4" aria-hidden />
+      ) : (
+        <Maximize2 className="h-4 w-4" aria-hidden />
+      )}
+    </button>
+  )
+}

package/src/components/ui/RowActions.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Design-system table row actions (`.row-actions` / `.ra-icon-btn`): a
+ * right-aligned cluster of 27px bordered icon buttons that fades in on row
+ * hover (the row must have the `group` class) and on keyboard focus.
+ */
+export function RowActions({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={`flex items-center justify-end gap-1 opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100 focus-within:opacity-100 ${className ?? ''}`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface RowActionButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'type'
+> {
+  /** Accessible label — required, these are icon-only buttons. */
+  'aria-label': string
+  /** Red hover treatment for destructive actions. */
+  danger?: boolean
+  children: ReactNode
+}
+
+export function RowActionButton({
+  danger = false,
+  className,
+  children,
+  ...rest
+}: RowActionButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`flex h-[27px] w-[27px] items-center justify-center rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+        danger
+          ? 'hover:border-[var(--err)] hover:bg-[var(--err-l)] hover:text-[var(--err)]'
+          : 'hover:border-[var(--acc-m)] hover:bg-[var(--acc-l)] hover:text-[var(--acc)]'
+      } ${className ?? ''}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/ui/SearchInput.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { inputVariants } from './Input.js'
+
+export interface SearchInputProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+}
+
+export function SearchInput({ value, onChange, placeholder = 'Search...' }: SearchInputProps) {
+  return (
+    <div className="relative flex-1">
+      <svg
+        className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--muted)]"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+        aria-hidden
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className={inputVariants({ class: 'py-2 pr-8 pl-9' })}
+      />
+      {value && (
+        <button
+          type="button"
+          onClick={() => onChange('')}
+          className="absolute top-1/2 right-2 -translate-y-1/2 rounded p-0.5 text-[var(--muted)] hover:text-[var(--txt)]"
+          aria-label="Clear search"
+        >
+          <svg
+            className="h-3.5 w-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+            aria-hidden
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+      <kbd className="pointer-events-none absolute top-1/2 right-8 hidden -translate-y-1/2 rounded border border-[var(--bdr)] px-1.5 py-0.5 text-[10px] text-[var(--muted)] sm:inline-block">
+        ⌘K
+      </kbd>
+    </div>
+  )
+}

package/src/components/ui/Select.tsx

@@ -0,0 +1,53 @@
+import { forwardRef, type SelectHTMLAttributes, type ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+import { formControlBase, formControlState } from './form-control.js'
+
+const select = cv(`${formControlBase} appearance-none pr-8`, {
+  variants: {
+    size: {
+      sm: 'py-1.5 pr-7 pl-3 text-[length:var(--fs-sub)]',
+      md: '',
+      lg: 'py-2.5 pr-9 pl-3',
+    },
+    state: {
+      default: formControlState.default,
+      invalid: formControlState.invalid,
+      valid: formControlState.valid,
+    },
+  },
+  defaultVariants: { size: 'md', state: 'default' },
+})
+
+export type SelectVariants = VariantProps<typeof select>
+
+export interface SelectProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>, SelectVariants {
+  children?: ReactNode
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { size, state, className, children, ...rest },
+  ref,
+) {
+  return (
+    <div className="relative">
+      <select ref={ref} className={select({ size, state, class: className })} {...rest}>
+        {children}
+      </select>
+      <svg
+        aria-hidden
+        className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-[var(--muted)]"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </div>
+  )
+})
+
+export { select as selectVariants }

package/src/components/ui/Skeleton.tsx

@@ -0,0 +1,48 @@
+type SkeletonVariant = 'text' | 'card' | 'table-row'
+
+export interface SkeletonProps {
+  variant?: SkeletonVariant
+  lines?: number
+  className?: string
+}
+
+export function Skeleton({ variant = 'text', lines = 3, className = '' }: SkeletonProps) {
+  if (variant === 'card') {
+    return (
+      <div className={`animate-pulse rounded-lg border border-[var(--border)] p-5 ${className}`}>
+        <div className="bg-muted mb-3 h-4 w-1/3 rounded" />
+        <div className="space-y-2">
+          <div className="bg-muted h-3 w-full rounded" />
+          <div className="bg-muted h-3 w-2/3 rounded" />
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'table-row') {
+    return (
+      <div className={`animate-pulse ${className}`}>
+        {Array.from({ length: lines }, (_, i) => (
+          <div key={i} className="flex gap-4 border-b border-[var(--border)] px-4 py-3">
+            <div className="bg-muted h-4 w-8 rounded" />
+            <div className="bg-muted h-4 flex-1 rounded" />
+            <div className="bg-muted h-4 w-20 rounded" />
+            <div className="bg-muted h-4 w-24 rounded" />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`animate-pulse space-y-2 ${className}`}>
+      {Array.from({ length: lines }, (_, i) => (
+        <div
+          key={i}
+          className="bg-muted h-3 rounded"
+          style={{ width: `${Math.max(40, 100 - i * 15)}%` }}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/ui/StatPill.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Design-system stat pill (`.stat-pill`): a compact card-surface chip with a
+ * bold count and a muted label, used in page headers to summarize list
+ * contents (e.g. "12 Total · 8 Active · 4 Inactive").
+ */
+export interface StatPillProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The count/value, rendered bold in `--txt` (override color via valueClassName). */
+  value: ReactNode
+  /** Muted label shown after the value. */
+  label: ReactNode
+  /** Optional leading icon. */
+  icon?: ReactNode
+  /** Extra classes for the value (e.g. `text-[var(--suc)]` for an Active count). */
+  valueClassName?: string
+}
+
+export function StatPill({
+  value,
+  label,
+  icon,
+  valueClassName,
+  className,
+  ...rest
+}: StatPillProps) {
+  return (
+    <span
+      className={`inline-flex items-center gap-[5px] rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1 text-[length:var(--fs-sub)] text-[var(--sub)] ${className ?? ''}`}
+      {...rest}
+    >
+      {icon}
+      <b className={`font-semibold text-[var(--txt)] ${valueClassName ?? ''}`}>{value}</b>
+      {label}
+    </span>
+  )
+}

package/src/components/ui/StatusBadge.tsx

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+/**
+ * Canonical status chip from the design system (`.status` + `.status-dot`):
+ * a rectangular 5px-radius chip with a 5px dot, 11.5px medium text, and
+ * tint backgrounds per tone. This is the single source of truth for
+ * document / entity statuses across Posts, Pages, Forms, SEO, and tables —
+ * do not roll per-view status pills.
+ */
+const statusBadge = cv(
+  'inline-flex items-center gap-[5px] rounded-[5px] px-[9px] py-[3px] text-[length:var(--fs-hint)] font-medium whitespace-nowrap',
+  {
+    variants: {
+      tone: {
+        /** Published / Active — success tint (`.s-pub`). */
+        success: 'bg-[var(--suc-l)] text-[var(--suc)]',
+        /** Scheduled / Pending — warning tint (`.s-sch`). */
+        warning: 'bg-[var(--warn-l)] text-[var(--warn)]',
+        /** Errors / failing states. */
+        danger: 'bg-[var(--err-l)] text-[var(--err)]',
+        /** Informational states. */
+        info: 'bg-[var(--info-l)] text-[var(--info)]',
+        /** Draft — page background + border (`.s-dft`). */
+        neutral: 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--sub)]',
+        /** Archived — dimmest treatment (`.s-arc`). */
+        muted: 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--muted)]',
+      },
+    },
+    defaultVariants: { tone: 'neutral' },
+  },
+)
+
+const DOT_CLASS: Record<NonNullable<StatusBadgeVariants['tone']>, string> = {
+  success: 'bg-[var(--suc)]',
+  warning: 'bg-[var(--warn)]',
+  danger: 'bg-[var(--err)]',
+  info: 'bg-[var(--info)]',
+  neutral: 'bg-[var(--muted)]',
+  muted: 'bg-[var(--muted)]',
+}
+
+export type StatusBadgeVariants = VariantProps<typeof statusBadge>
+export type StatusBadgeTone = NonNullable<StatusBadgeVariants['tone']>
+
+export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement>, StatusBadgeVariants {
+  /** Hide the leading dot (rare — e.g. numeric chips). */
+  dot?: boolean
+  children: ReactNode
+}
+
+export function StatusBadge({ tone, dot = true, className, children, ...rest }: StatusBadgeProps) {
+  return (
+    <span className={statusBadge({ tone, class: className })} {...rest}>
+      {dot && (
+        <span
+          aria-hidden
+          className={`h-[5px] w-[5px] shrink-0 rounded-full ${DOT_CLASS[tone ?? 'neutral']}`}
+        />
+      )}
+      {children}
+    </span>
+  )
+}
+
+export { statusBadge as statusBadgeVariants }