makersclaw 0.2.0 → 0.3.1

package/templates/next/files/components/ui/radio.jsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { createContext, useContext, useEffect, useId, useState } from "react";
+import { cx } from "./cx";
+import { Icon } from "./icon";
+
+// RadioGroup — one choice out of a few, all of them visible. Real
+// <input type="radio"> sharing one name, so the browser supplies the
+// behaviour: arrow keys move AND select, Tab enters at the checked one,
+// forms submit the value. Options as data (`options`) or as <Radio>
+// children. Controlled (`value` + `onChange(value)`) or not (`defaultValue`).
+//
+//   options      [{ value, label, description?, icon?, disabled? }]
+//   variant      list (a dot beside each label; the default) · card (each
+//                option a selectable card — plans, templates, modes)
+//   orientation  vertical (the default) · horizontal (wraps; cards stack
+//                on a narrow window and share the row from sm up)
+//   size         md (44px rows) · sm (36px, dense rails); list only
+//   invalid      marks every option; <Field error> sets the text
+//
+// In a <Field id="x" label hint error>, give the group the same `id`: a
+// <label> cannot name a group, so the group borrows Field's label (and
+// its hint or error) by aria-labelledby / aria-describedby. More than
+// ~6 options, or options that are records: a <Select>.
+
+const Group = createContext(null);
+
+const ROW = {
+  md: "min-h-11 py-3",
+  sm: "min-h-9 py-2",
+};
+
+export function RadioGroup({
+  id,
+  name,
+  value,
+  defaultValue,
+  onChange,
+  options,
+  variant = "list",
+  orientation = "vertical",
+  size = "md",
+  invalid,
+  disabled,
+  required,
+  className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+}) {
+  const auto = useId();
+  const [own, setOwn] = useState(defaultValue);
+  const [named, setNamed] = useState({});
+  const current = value !== undefined ? value : own;
+
+  // Field's label and hint point at `id`; wire them to the group.
+  useEffect(() => {
+    if (!id || typeof document === "undefined") return;
+    const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+    const note = document.getElementById(`${id}-error`) ?? document.getElementById(`${id}-hint`);
+    if (label && !label.id) label.id = `${id}-label`;
+    setNamed({ labelledby: label?.id, describedby: note?.id });
+    if (!label) return;
+    // Clicking the label lands on the group, as it would on an input.
+    const focus = () => {
+      const box = document.getElementById(id);
+      (box?.querySelector("input:checked:not(:disabled)") ?? box?.querySelector("input:not(:disabled)"))?.focus();
+    };
+    label.addEventListener("click", focus);
+    return () => label.removeEventListener("click", focus);
+  }, [id, invalid]);
+
+  const ctx = {
+    name: name ?? id ?? auto,
+    current,
+    variant,
+    size,
+    invalid,
+    disabled,
+    required,
+    select(next) {
+      if (value === undefined) setOwn(next);
+      onChange?.(next);
+    },
+  };
+
+  const card = variant === "card";
+  return (
+    <Group.Provider value={ctx}>
+      <div
+        id={id}
+        role="radiogroup"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabel ? undefined : ariaLabelledby ?? named.labelledby}
+        aria-describedby={named.describedby}
+        aria-invalid={invalid ? true : undefined}
+        aria-required={required ? true : undefined}
+        aria-orientation={orientation}
+        className={cx(
+          card
+            ? orientation === "horizontal"
+              ? "grid gap-3 sm:auto-cols-fr sm:grid-flow-col"
+              : "grid gap-3"
+            : orientation === "horizontal"
+              ? "flex flex-wrap gap-x-6"
+              : "grid",
+          className,
+        )}
+      >
+        {options ? options.map((o) => <Radio key={o.value} {...o} />) : children}
+      </div>
+    </Group.Provider>
+  );
+}
+
+/** One option; only inside a <RadioGroup>. */
+export function Radio({ value, label, description, icon, disabled, className }) {
+  const g = useContext(Group);
+  const auto = useId();
+  if (!g) return null;
+  const off = g.disabled || disabled;
+  const inputId = `${g.name}-${auto}`;
+  const card = g.variant === "card";
+
+  const dot = (
+    <span className="relative mt-0.5 flex h-4 w-4 shrink-0">
+      <input
+        id={inputId}
+        type="radio"
+        name={g.name}
+        value={value}
+        checked={g.current === value}
+        onChange={() => g.select(value)}
+        disabled={off}
+        required={g.required}
+        aria-describedby={description ? `${inputId}-d` : undefined}
+        className={cx(
+          "peer h-4 w-4 appearance-none rounded-full border bg-background outline-none transition-colors checked:border-primary disabled:cursor-not-allowed",
+          g.invalid ? "border-destructive" : "border-input",
+          !card && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        )}
+      />
+      <span aria-hidden="true" className="pointer-events-none absolute inset-0 m-auto h-2 w-2 scale-0 rounded-full bg-primary transition-transform peer-checked:scale-100" />
+    </span>
+  );
+
+  const text = (
+    <span className="grid min-w-0 flex-1 gap-0.5">
+      <span className={cx("leading-5 text-foreground", card && "font-medium")}>{label ?? value}</span>
+      {description ? (
+        <span id={`${inputId}-d`} className="text-sm leading-5 text-muted-foreground">
+          {description}
+        </span>
+      ) : null}
+    </span>
+  );
+
+  if (card) {
+    return (
+      <label
+        htmlFor={inputId}
+        className={cx(
+          "flex min-h-11 cursor-pointer items-start gap-3 rounded-lg border bg-card p-4 text-sm text-card-foreground transition-colors",
+          "hover:bg-accent/50 has-[:checked]:bg-accent/50 has-[:checked]:ring-1",
+          g.invalid ? "border-destructive has-[:checked]:ring-destructive" : "border-border has-[:checked]:border-primary has-[:checked]:ring-primary",
+          "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring",
+          off && "cursor-not-allowed opacity-50 hover:bg-card",
+          className,
+        )}
+      >
+        {icon ? <Icon name={icon} size={18} className="mt-px shrink-0 text-muted-foreground" /> : null}
+        {text}
+        {dot}
+      </label>
+    );
+  }
+
+  return (
+    <label
+      htmlFor={inputId}
+      className={cx(
+        "flex cursor-pointer items-start gap-3 text-sm",
+        ROW[g.size] ?? ROW.md,
+        off && "cursor-not-allowed opacity-50",
+        className,
+      )}
+    >
+      {dot}
+      {icon ? <Icon name={icon} className="mt-0.5 shrink-0 text-muted-foreground" /> : null}
+      {text}
+    </label>
+  );
+}

package/templates/next/files/components/ui/rating.jsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useId, useState } from "react";
+import { cx } from "./cx";
+
+// Rating — stars. Read-only it shows a score (4.5 of 5, halves drawn);
+// with `onChange` it is an input: a native radio group underneath, one
+// radio per star, so arrow keys, Tab, forms and screen readers are the
+// browser's. The stars are drawn from tokens: filled in `text-primary`,
+// empty in the border colour. Never a colour prop.
+//
+//   value     the score: a number from 0 to `max`. Read-only it may be
+//             fractional (shown to the nearest half, read to one decimal);
+//             as an input it is a whole number (0 = none chosen yet)
+//   max       how many stars (5)
+//   onChange  (n) → the chosen whole number; not an event. Present = input
+//   readOnly  true: show it, even when onChange is passed
+//   size      sm (16px stars) · md (20px stars; as an input each star is a
+//             44px target)
+//   label     what is rated ("Support quality"); a reader hears
+//             "Support quality, 4.5 out of 5". Without it: "4.5 out of 5"
+//   name      the form field the input submits under
+//   disabled  the input, greyed and still
+//
+// A reader hears the number, never "star star star": the read-only row is
+// one image named "4.5 out of 5", and each radio is named "3 out of 5".
+
+const STAR = "m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9L12 3Z";
+
+const PX = { sm: 16, md: 20 };
+// Each star's box as an input: 44px at md, the thumb's target.
+const TARGET = { sm: "size-8", md: "size-11" };
+
+function Star({ size, className }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={cx("block shrink-0", className)}
+    >
+      <path d={STAR} />
+    </svg>
+  );
+}
+
+// One star filled by `part` (0, 0.5 or 1): an empty star with the filled
+// one laid over it, cut to that width from the start edge.
+function PartStar({ part, size }) {
+  return (
+    <span className="relative block shrink-0" style={{ width: size, height: size }}>
+      <Star size={size} className="text-border" />
+      {part > 0 ? (
+        <span className="absolute inset-y-0 start-0 overflow-hidden" style={{ width: `${part * 100}%` }}>
+          <Star size={size} className="text-primary" />
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+const spoken = (n) => String(Math.round(n * 10) / 10);
+
+export function Rating({ value = 0, max = 5, onChange, readOnly = false, size = "md", label, name, disabled, id, className }) {
+  const px = PX[size] ?? PX.md;
+  const group = useId();
+  const [hover, setHover] = useState(null);
+  const count = Math.max(1, Math.round(max));
+  const score = Math.min(Math.max(Number(value) || 0, 0), count);
+  const stars = Array.from({ length: count }, (_, i) => i + 1);
+
+  if (!onChange || readOnly) {
+    const halves = Math.round(score * 2) / 2;
+    const said = `${spoken(score)} out of ${count}`;
+    return (
+      <span
+        id={id}
+        role="img"
+        aria-label={label ? `${label}, ${said}` : said}
+        className={cx("inline-flex items-center gap-0.5 align-middle", className)}
+      >
+        {stars.map((n) => (
+          <PartStar key={n} size={px} part={Math.min(Math.max(halves - (n - 1), 0), 1)} />
+        ))}
+      </span>
+    );
+  }
+
+  const chosen = Math.round(score);
+  const shown = hover ?? chosen;
+  return (
+    <div
+      id={id}
+      role="radiogroup"
+      aria-label={label ?? "Rating"}
+      aria-disabled={disabled || undefined}
+      className={cx("inline-flex items-center", size === "sm" ? "-mx-2" : "-mx-3", disabled && "opacity-50", className)}
+      onMouseLeave={() => setHover(null)}
+    >
+      {stars.map((n) => (
+        <label
+          key={n}
+          className={cx(
+            "grid shrink-0 place-items-center rounded-md",
+            "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
+            disabled ? "cursor-not-allowed" : "cursor-pointer",
+            TARGET[size] ?? TARGET.md,
+          )}
+          onMouseEnter={() => !disabled && setHover(n)}
+        >
+          <input
+            type="radio"
+            name={name ?? group}
+            value={n}
+            checked={chosen === n}
+            onChange={() => onChange(n)}
+            disabled={disabled}
+            aria-label={`${n} out of ${count}`}
+            className="sr-only"
+          />
+          <Star size={px} className={cx("transition-colors", n <= shown ? "text-primary" : "text-border")} />
+        </label>
+      ))}
+    </div>
+  );
+}

package/templates/next/files/components/ui/resizable.jsx

@@ -0,0 +1,338 @@
+"use client";
+
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "./cx";
+import { Icon } from "./icon";
+
+// Resizable — panes the user sizes by dragging the line between them: a
+// list beside its record, an editor above its preview. Sizes are
+// percentages of the group; a handle moves only the two panes either
+// side of it. Mobile first: below md (768px) a horizontal group stacks
+// its panes top to bottom at their natural height and hides the handles
+// (there is no room to share, and a thumb cannot hit a 1px line).
+//
+//   <ResizablePanelGroup direction="horizontal" storageKey="inbox" className="h-[32rem]">
+//     <ResizablePanel defaultSize={35} minSize={20}>…list…</ResizablePanel>
+//     <ResizableHandle grip />
+//     <ResizablePanel>…record…</ResizablePanel>
+//   </ResizablePanelGroup>
+//
+//   ResizablePanelGroup
+//     direction   horizontal (side by side; the default) · vertical
+//     storageKey  remember the sizes in this browser (localStorage)
+//     onResize    (sizes) → percentages, one per panel
+//     className   its height (h-[32rem]); without one it fills its parent
+//                 (h-full), so the parent needs a height. A vertical
+//                 group has no height of its own to fall back on
+//   ResizablePanel
+//     defaultSize %, of the group; panels without one share what is left
+//     minSize     % it never shrinks below (10) · maxSize % (100)
+//   ResizableHandle
+//     grip        draw a visible grip on the line
+//     label       what a screen reader calls it ("Resize")
+//
+// Panels and handles are the group's DIRECT children, in order. A handle
+// is a separator a keyboard can move: arrows by 2% (Shift: 10%), Home and
+// End to the limits, Enter to fold the pane before it to its minimum and
+// back; double-click resets the pair.
+//
+// The group never asks what TYPE a child is: from a server surface a
+// child's type is a client reference, not the ResizablePanel function,
+// so a type test finds no panels. Each child gets its slot through
+// context and the panels register themselves (kind, sizes) there.
+
+const STEP = 2;
+const BIG = 10;
+
+const GroupContext = createContext(null);
+const SlotContext = createContext(-1);
+
+// Register this child in its group under its slot; returns the group's
+// wiring for it (undefined until the group has seen the registration).
+function useSlot(entry) {
+  const group = useContext(GroupContext);
+  const slot = useContext(SlotContext);
+  const register = group?.register;
+  const key = JSON.stringify(entry);
+  useLayoutEffect(() => {
+    if (!register || slot < 0) return;
+    return register(slot, JSON.parse(key));
+  }, [register, slot, key]);
+  return group && slot >= 0 ? group.bySlot[slot] : undefined;
+}
+
+function initial(panels) {
+  const given = panels.reduce((s, p) => s + (p.defaultSize ?? 0), 0);
+  const open = panels.filter((p) => p.defaultSize == null).length;
+  const share = open ? Math.max(0, 100 - given) / open : 0;
+  const raw = panels.map((p) => p.defaultSize ?? share);
+  const total = raw.reduce((s, n) => s + n, 0) || 1;
+  return raw.map((n) => (n / total) * 100);
+}
+
+export function ResizablePanelGroup({ direction = "horizontal", storageKey, onResize, className, children }) {
+  const base = useId();
+  const group = useRef(null);
+  const items = Children.toArray(children).filter(isValidElement);
+  // slot → { kind: "panel" | "handle", defaultSize?, minSize?, maxSize? }
+  const [reg, setReg] = useState({});
+  const register = useCallback((slot, entry) => {
+    setReg((r) => (JSON.stringify(r[slot]) === JSON.stringify(entry) ? r : { ...r, [slot]: entry }));
+    return () =>
+      setReg((r) => {
+        if (!(slot in r)) return r;
+        const { [slot]: _, ...rest } = r;
+        return rest;
+      });
+  }, []);
+  const slots = Object.keys(reg).map(Number).sort((a, b) => a - b);
+  const panelSlots = slots.filter((k) => reg[k].kind === "panel");
+  const panels = panelSlots.map((k) => ({ minSize: 10, maxSize: 100, ...reg[k] }));
+  const defaults = useRef(null);
+  if (!defaults.current || defaults.current.length !== panels.length) defaults.current = initial(panels);
+  const [own, setSizes] = useState(null);
+  const sizes = own && own.length === panels.length ? own : defaults.current;
+  const loaded = useRef(false);
+  const horizontal = direction !== "vertical";
+
+  // The remembered sizes, before first paint, when they still fit (once
+  // the panels have registered — their layout effects run before ours,
+  // the re-render they cause before paint).
+  useLayoutEffect(() => {
+    if (!panels.length) return;
+    if (storageKey) {
+      try {
+        const saved = JSON.parse(localStorage.getItem(`resizable:${storageKey}`) ?? "null");
+        if (Array.isArray(saved) && saved.length === panels.length && saved.every((n) => Number.isFinite(n) && n >= 0)) setSizes(saved);
+      } catch {}
+    }
+    loaded.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storageKey, panels.length]);
+
+  useEffect(() => {
+    if (!loaded.current || !panels.length) return;
+    onResize?.(sizes);
+    if (!storageKey) return;
+    const h = setTimeout(() => {
+      try {
+        localStorage.setItem(`resizable:${storageKey}`, JSON.stringify(sizes.map((n) => Math.round(n * 100) / 100)));
+      } catch {}
+    }, 150);
+    return () => clearTimeout(h);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sizes, storageKey]);
+
+  // Move the line between panel a and a + 1 so a is `want` %; the pair's
+  // total stays put and each side keeps its min and max.
+  function place(a, want) {
+    setSizes((mine) => {
+      const prev = mine && mine.length === panels.length ? mine : defaults.current;
+      const b = a + 1;
+      const pair = prev[a] + prev[b];
+      const pa = panels[a];
+      const pb = panels[b];
+      const lo = Math.max(pa.minSize, pair - pb.maxSize, 0);
+      const hi = Math.min(pa.maxSize, pair - pb.minSize, pair);
+      const next = Math.min(hi, Math.max(lo, want));
+      if (Math.abs(next - prev[a]) < 0.01) return prev;
+      const out = [...prev];
+      out[a] = next;
+      out[b] = pair - next;
+      return out;
+    });
+  }
+
+  function limits(a) {
+    const pair = sizes[a] + sizes[a + 1];
+    return {
+      lo: Math.max(panels[a].minSize, pair - panels[a + 1].maxSize, 0),
+      hi: Math.min(panels[a].maxSize, pair - panels[a + 1].minSize, pair),
+    };
+  }
+
+  // The panels' own length along the axis, handles excluded: what 100% is.
+  function span() {
+    const nodes = group.current?.querySelectorAll(":scope > [data-panel]") ?? [];
+    let px = 0;
+    for (const n of nodes) px += horizontal ? n.offsetWidth : n.offsetHeight;
+    return px || 1;
+  }
+
+  // What each registered slot is given: a panel its id and size, a
+  // handle the pair either side of it (none when it is not between two).
+  const bySlot = {};
+  let p = -1;
+  for (const k of slots) {
+    if (reg[k].kind === "panel") {
+      p += 1;
+      bySlot[k] = { _id: `${base}-${p}`, _size: sizes[p], _horizontal: horizontal };
+    } else if (reg[k].kind === "handle") {
+      const a = p;
+      if (a < 0 || a >= panels.length - 1) {
+        bySlot[k] = { _horizontal: horizontal, _orphan: true };
+        continue;
+      }
+      bySlot[k] = {
+        _horizontal: horizontal,
+        _controls: `${base}-${a}`,
+        _value: sizes[a],
+        _limits: () => limits(a),
+        _start: () => ({ from: sizes[a], span: span() }),
+        _place: (want) => place(a, want),
+        _reset: () => {
+          const d = defaults.current;
+          const pair = sizes[a] + sizes[a + 1];
+          place(a, (d[a] / (d[a] + d[a + 1])) * pair);
+        },
+      };
+    }
+  }
+
+  return (
+    <div
+      ref={group}
+      data-direction={horizontal ? "horizontal" : "vertical"}
+      className={cx(
+        "flex w-full min-h-0 min-w-0",
+        !/(?:^|\s)h-/.test(className ?? "") && "h-full",
+        horizontal ? "flex-row max-md:h-auto max-md:flex-col" : "flex-col",
+        className,
+      )}
+    >
+      <GroupContext.Provider value={{ register, bySlot, horizontal }}>
+        {items.map((child, i) => (
+          <SlotContext.Provider key={child.key ?? i} value={i}>
+            {child}
+          </SlotContext.Provider>
+        ))}
+      </GroupContext.Provider>
+    </div>
+  );
+}
+
+export function ResizablePanel({ defaultSize, minSize, maxSize, className, children }) {
+  const group = useContext(GroupContext);
+  const wired = useSlot({ kind: "panel", defaultSize, minSize, maxSize });
+  const _horizontal = wired?._horizontal ?? group?.horizontal ?? true;
+  // Before the group has counted its panels (the server render, the first
+  // client pass) a panel with a defaultSize takes that share, the rest
+  // split what is left: the layout the counted sizes will give.
+  const style = wired
+    ? { flexGrow: wired._size ?? 1, flexShrink: 1, flexBasis: 0 }
+    : defaultSize != null
+      ? { flexGrow: 0, flexShrink: 1, flexBasis: `${defaultSize}%` }
+      : { flexGrow: 1, flexShrink: 1, flexBasis: 0 };
+  return (
+    <div
+      id={wired?._id}
+      data-panel=""
+      style={style}
+      className={cx("min-h-0 min-w-0 overflow-auto", _horizontal && "max-md:flex-none! max-md:overflow-visible", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ResizableHandle({ grip = false, label = "Resize", className }) {
+  const group = useContext(GroupContext);
+  const wired = useSlot({ kind: "handle" });
+  const [dragging, setDragging] = useState(false);
+  const drag = useRef(null);
+  const folded = useRef(null);
+  const _horizontal = wired?._horizontal ?? group?.horizontal ?? true;
+  if (!group || wired?._orphan) return null;
+  const { _controls, _value, _limits, _start, _place, _reset } = wired ?? {};
+  const live = Boolean(_place);
+  const { lo, hi } = live ? _limits() : { lo: 0, hi: 100 };
+
+  function onPointerDown(e) {
+    if (e.button !== 0 || !live) return;
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    e.currentTarget.focus();
+    drag.current = { at: _horizontal ? e.clientX : e.clientY, ..._start() };
+    setDragging(true);
+    document.documentElement.style.cursor = _horizontal ? "col-resize" : "row-resize";
+    document.documentElement.style.userSelect = "none";
+  }
+  function onPointerMove(e) {
+    const d = drag.current;
+    if (!d) return;
+    const moved = (_horizontal ? e.clientX : e.clientY) - d.at;
+    _place(d.from + (moved / d.span) * 100);
+  }
+  function end() {
+    if (!drag.current) return;
+    drag.current = null;
+    setDragging(false);
+    document.documentElement.style.cursor = "";
+    document.documentElement.style.userSelect = "";
+  }
+
+  function onKeyDown(e) {
+    if (!live) return;
+    const step = e.shiftKey ? BIG : STEP;
+    const back = _horizontal ? "ArrowLeft" : "ArrowUp";
+    const fwd = _horizontal ? "ArrowRight" : "ArrowDown";
+    if (e.key === back) _place(_value - step);
+    else if (e.key === fwd) _place(_value + step);
+    else if (e.key === "Home") _place(lo);
+    else if (e.key === "End") _place(hi);
+    else if (e.key === "Enter") {
+      if (folded.current != null && _value <= lo + 0.01) {
+        _place(folded.current);
+        folded.current = null;
+      } else {
+        folded.current = _value;
+        _place(lo);
+      }
+    } else return;
+    e.preventDefault();
+  }
+
+  return (
+    <div
+      // Until the group wires it (the server render), a plain line.
+      role={live ? "separator" : undefined}
+      aria-hidden={live ? undefined : true}
+      tabIndex={live ? 0 : undefined}
+      aria-label={live ? label : undefined}
+      aria-orientation={live ? (_horizontal ? "vertical" : "horizontal") : undefined}
+      aria-controls={_controls}
+      aria-valuenow={live ? Math.round(_value) : undefined}
+      aria-valuemin={live ? Math.round(lo) : undefined}
+      aria-valuemax={live ? Math.round(hi) : undefined}
+      data-dragging={dragging || undefined}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={end}
+      onPointerCancel={end}
+      onLostPointerCapture={end}
+      onKeyDown={onKeyDown}
+      onDoubleClick={_reset}
+      className={cx(
+        "relative z-10 flex shrink-0 touch-none items-center justify-center bg-border outline-none transition-colors",
+        "hover:bg-ring/60 focus-visible:bg-ring data-[dragging]:bg-ring motion-reduce:transition-none",
+        "after:absolute after:content-['']",
+        _horizontal
+          ? "w-px cursor-col-resize after:inset-y-0 after:left-1/2 after:w-4 after:-translate-x-1/2 max-md:hidden"
+          : "h-px w-full cursor-row-resize after:inset-x-0 after:top-1/2 after:h-4 after:-translate-y-1/2",
+        className,
+      )}
+    >
+      {grip ? (
+        <span
+          aria-hidden="true"
+          className={cx(
+            "grid place-items-center rounded-sm border border-border bg-background text-muted-foreground shadow-sm",
+            _horizontal ? "h-6 w-3.5" : "h-3.5 w-6",
+          )}
+        >
+          <Icon name="grip" size={12} className={_horizontal ? undefined : "rotate-90"} />
+        </span>
+      ) : null}
+    </div>
+  );
+}