@repraze/kernelkit 0.0.0-stage → 0.1.0-alpha.1

package/src/components/password-strength.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import {cn} from "cn";
+
+type PasswordScore = 0 | 1 | 2 | 3 | 4;
+
+const LABELS: Record<PasswordScore, string> = {0: "Too weak", 1: "Weak", 2: "Fair", 3: "Good", 4: "Strong"};
+
+/** Segment / label color per score: danger → warning → success. Literal strings for Tailwind. */
+const TONE: Record<PasswordScore, string> = {
+    0: "[--c:var(--danger)] [--c-fill:var(--tc-red-fill)]",
+    1: "[--c:var(--danger)] [--c-fill:var(--tc-red-fill)]",
+    2: "[--c:var(--warning)] [--c-fill:var(--tc-yellow-fill)]",
+    3: "[--c:var(--success)] [--c-fill:var(--tc-green-fill)]",
+    4: "[--c:var(--success)] [--c-fill:var(--tc-green-fill)]",
+};
+
+const COMMON = new Set(["password", "123456", "12345678", "qwerty", "letmein", "admin", "welcome", "iloveyou"]);
+
+/**
+ * Tiny, dependency-free strength heuristic (length + character classes + a handful of common passwords).
+ * UX guidance only: enforce your real policy on the server.
+ */
+function estimateStrength(password: string): PasswordScore {
+    if (!password || password.length < 6 || COMMON.has(password.toLowerCase())) {
+        return 0;
+    }
+    const classes = [/[a-z]/, /[A-Z]/, /\d/, /[^a-zA-Z0-9]/].filter((re) => re.test(password)).length;
+    let points = 0;
+    if (password.length >= 8) {
+        points++;
+    }
+    if (password.length >= 12) {
+        points++;
+    }
+    if (password.length >= 16) {
+        points++;
+    }
+    if (classes >= 2) {
+        points++;
+    }
+    if (classes >= 3) {
+        points++;
+    }
+    if (/(.)\1{2,}/.test(password)) {
+        points--;
+    }
+    return Math.max(1, Math.min(4, points - 1)) as PasswordScore;
+}
+
+interface PasswordStrengthProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** 0 (too weak) … 4 (strong). Compute it with `estimateStrength` or a real estimator (zxcvbn). */
+    score: number;
+    /** Text after "Strength:". Defaults to Too weak / Weak / Fair / Good / Strong. */
+    label?: React.ReactNode;
+    /** Hide the text row (keep the bar). */
+    hideLabel?: boolean;
+    /** Render the empty state (no password typed yet): grey segments, no label color. */
+    empty?: boolean;
+}
+
+/** Segmented 4-step strength bar + label. Presentational: you pass the score. */
+function PasswordStrength({className, score, label, hideLabel, empty, ...props}: PasswordStrengthProps) {
+    const s = Math.max(0, Math.min(4, Math.round(score))) as PasswordScore;
+    // score 0 still lights the first segment in danger so "too weak" is visible
+    const lit = empty ? 0 : Math.max(1, s);
+    return (
+        <div
+            data-slot="password-strength"
+            data-score={empty ? undefined : s}
+            className={cn("flex flex-col gap-1.5", !empty && TONE[s], className)}
+            {...props}
+        >
+            <div data-slot="password-strength-bar" className="grid grid-cols-4 gap-1" aria-hidden>
+                {[1, 2, 3, 4].map((i) => (
+                    <div
+                        key={i}
+                        data-slot="password-strength-segment"
+                        data-active={i <= lit ? "" : undefined}
+                        className="h-1 rounded-pill bg-foreground/10 transition-colors duration-150 hc:bg-transparent hc:inset-ring hc:inset-ring-border data-active:bg-(--c-fill) hc:data-active:bg-(--c-fill) hc:data-active:inset-ring-0"
+                    />
+                ))}
+            </div>
+            {hideLabel ? null : (
+                <p data-slot="password-strength-label" aria-live="polite" className="text-xs text-muted-foreground">
+                    <span>
+                        Strength:{" "}
+                        <span className={cn("font-medium", empty ? "text-muted-foreground" : "text-(--c)")}>
+                            {empty ? "-" : (label ?? LABELS[s])}
+                        </span>
+                    </span>
+                </p>
+            )}
+        </div>
+    );
+}
+
+export {estimateStrength, PasswordStrength};
+export type {PasswordScore, PasswordStrengthProps};

package/src/components/popover.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import {Popover as PopoverPrimitive} from "@base-ui/react/popover";
+import {heading, popupMotion, popupSurface} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+import * as React from "react";
+
+function Popover({...props}: PopoverPrimitive.Root.Props) {
+    return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({...props}: PopoverPrimitive.Trigger.Props) {
+    return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+    className,
+    align = "center",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4,
+    ...props
+}: PopoverPrimitive.Popup.Props &
+    Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+    return (
+        <PopoverPrimitive.Portal container={usePortalContainer()}>
+            <PopoverPrimitive.Positioner
+                align={align}
+                alignOffset={alignOffset}
+                side={side}
+                sideOffset={sideOffset}
+                className="isolate z-50"
+            >
+                <PopoverPrimitive.Popup
+                    data-slot="popover-content"
+                    className={cn(
+                        popupSurface,
+                        popupMotion,
+                        "z-50 flex w-72 flex-col gap-3 p-3 text-sm outline-hidden",
+                        className,
+                    )}
+                    {...props}
+                />
+            </PopoverPrimitive.Positioner>
+        </PopoverPrimitive.Portal>
+    );
+}
+
+function PopoverHeader({className, ...props}: React.ComponentProps<"div">) {
+    return <div data-slot="popover-header" className={cn("flex flex-col gap-1 text-sm", className)} {...props} />;
+}
+
+function PopoverTitle({className, ...props}: PopoverPrimitive.Title.Props) {
+    return <PopoverPrimitive.Title data-slot="popover-title" className={cn(heading, className)} {...props} />;
+}
+
+function PopoverDescription({className, ...props}: PopoverPrimitive.Description.Props) {
+    return (
+        <PopoverPrimitive.Description
+            data-slot="popover-description"
+            className={cn("text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+export {Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger};

package/src/components/progress.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import {Progress as ProgressPrimitive} from "@base-ui/react/progress";
+import {type Color, colorVariants} from "@repraze/kernelkit/lib/color";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+
+/** Root of a progress or meter: label + value on one row, track below. Sets the color vars. */
+const progressVariants = cva("group/progress flex w-full flex-wrap items-center gap-x-3 gap-y-1.5", {
+    variants: {
+        color: colorVariants,
+        size: {sm: "", default: "", lg: ""},
+    },
+    defaultVariants: {color: "primary", size: "default"},
+});
+
+/** Pill track: a faint wash of the color (reads on card and background); an inset outline in high contrast. */
+const progressTrackClass =
+    "relative flex h-1.5 w-full items-center overflow-hidden rounded-pill bg-(--c)/15 group-data-[size=lg]/progress:h-2 group-data-[size=sm]/progress:h-1 hc:bg-transparent hc:inset-ring hc:inset-ring-border";
+
+/** Filled part, solid fill tier of the color (§2). */
+const progressIndicatorClass =
+    "h-full rounded-pill bg-(--c-fill) transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none";
+
+type ProgressSize = "sm" | "default" | "lg";
+
+interface ProgressProps extends Omit<ProgressPrimitive.Root.Props, "color"> {
+    /** Indicator color. Defaults to primary. */
+    color?: Color | null;
+    /** Track height: sm `h-1`, default `h-1.5`, lg `h-2`. */
+    size?: ProgressSize | null;
+}
+
+function Progress({className, children, value, color, size, ...props}: ProgressProps) {
+    const resolvedColor = color ?? "primary";
+    const resolvedSize = size ?? "default";
+    return (
+        <ProgressPrimitive.Root
+            value={value}
+            data-slot="progress"
+            data-color={resolvedColor}
+            data-size={resolvedSize}
+            className={cn(progressVariants({color: resolvedColor, size: resolvedSize}), className)}
+            {...props}
+        >
+            {children}
+            <ProgressTrack>
+                <ProgressIndicator />
+            </ProgressTrack>
+        </ProgressPrimitive.Root>
+    );
+}
+
+function ProgressTrack({className, ...props}: ProgressPrimitive.Track.Props) {
+    return (
+        <ProgressPrimitive.Track data-slot="progress-track" className={cn(progressTrackClass, className)} {...props} />
+    );
+}
+
+function ProgressIndicator({className, ...props}: ProgressPrimitive.Indicator.Props) {
+    return (
+        <ProgressPrimitive.Indicator
+            data-slot="progress-indicator"
+            className={cn(
+                progressIndicatorClass,
+                // indeterminate (value null): a third of the track sweeping left to right
+                "data-indeterminate:w-2/5 data-indeterminate:animate-indeterminate motion-reduce:data-indeterminate:animate-pulse",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function ProgressLabel({className, ...props}: ProgressPrimitive.Label.Props) {
+    return (
+        <ProgressPrimitive.Label
+            data-slot="progress-label"
+            className={cn("text-sm font-medium", className)}
+            {...props}
+        />
+    );
+}
+
+function ProgressValue({className, ...props}: ProgressPrimitive.Value.Props) {
+    return (
+        <ProgressPrimitive.Value
+            data-slot="progress-value"
+            className={cn("ms-auto font-mono text-xs text-muted-foreground tabular-nums", className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    Progress,
+    ProgressIndicator,
+    progressIndicatorClass,
+    ProgressLabel,
+    ProgressTrack,
+    progressTrackClass,
+    ProgressValue,
+    progressVariants,
+};
+export type {ProgressProps, ProgressSize};

package/src/components/questionnaire.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import {type Button, buttonVariants} from "@repraze/kernelkit/components/button";
+import {fieldSurface, focusRing, heading, invalidRing} from "@repraze/kernelkit/lib/recipes";
+import {Questionnaire as QuestionnairePrimitive} from "@shadcn/react/questionnaire";
+import {cn} from "cn";
+import {CheckIcon} from "lucide-react";
+import * as React from "react";
+
+function Questionnaire({className, ...props}: React.ComponentProps<typeof QuestionnairePrimitive.Root>) {
+    return (
+        <QuestionnairePrimitive.Root
+            data-slot="questionnaire"
+            className={cn("flex w-full min-w-0 flex-col gap-4", className)}
+            {...props}
+        />
+    );
+}
+
+function QuestionnaireProgress({className, ...props}: React.ComponentProps<typeof QuestionnairePrimitive.Progress>) {
+    return (
+        <QuestionnairePrimitive.Progress
+            data-slot="questionnaire-progress"
+            className={cn(
+                "min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function QuestionnaireItem({className, ...props}: React.ComponentProps<typeof QuestionnairePrimitive.Item>) {
+    return (
+        <QuestionnairePrimitive.Item
+            data-slot="questionnaire-item"
+            className={cn("flex min-w-0 flex-col gap-4 border-0 p-0 outline-none", className)}
+            {...props}
+        />
+    );
+}
+
+function QuestionnaireTitle({className, ...props}: React.ComponentProps<typeof QuestionnairePrimitive.Title>) {
+    return (
+        <QuestionnairePrimitive.Title
+            data-slot="questionnaire-title"
+            className={cn(
+                heading,
+                "text-base leading-snug text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function QuestionnaireDescription({
+    className,
+    ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Description>) {
+    return (
+        <QuestionnairePrimitive.Description
+            data-slot="questionnaire-description"
+            className={cn("text-sm text-pretty text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function QuestionnaireChoices({className, ...props}: React.ComponentProps<typeof QuestionnairePrimitive.Choices>) {
+    return (
+        <QuestionnairePrimitive.Choices
+            data-slot="questionnaire-choices"
+            className={cn("group/questionnaire-choices grid min-w-0 gap-2", className)}
+            {...props}
+        />
+    );
+}
+
+function QuestionnaireChoice({
+    children,
+    className,
+    ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Choice>) {
+    return (
+        <QuestionnairePrimitive.Choice
+            data-slot="questionnaire-choice"
+            className={cn(
+                "group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm transition-[color,background-color,border-color,box-shadow] duration-100 outline-none select-none hover:bg-hover",
+                "has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50",
+                // selected = primary border + indicator, the wash is only a hint (§6)
+                "data-checked:border-primary-text data-checked:bg-primary/10",
+                "data-invalid:border-danger data-invalid:ring-3 data-invalid:ring-danger/20 dark:data-invalid:ring-danger/40",
+                "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+                className,
+            )}
+            {...props}
+        >
+            <QuestionnairePrimitive.ChoiceInput
+                data-slot="questionnaire-choice-input"
+                className="absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+            />
+            <span
+                aria-hidden="true"
+                data-slot="questionnaire-choice-indicator"
+                className="pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-sm border border-input bg-background transition-[background-color,border-color] duration-100 group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-pill group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground bg-field dark:group-data-checked/questionnaire-choice:bg-primary"
+            >
+                <span
+                    data-slot="questionnaire-choice-indicator-dot"
+                    className="hidden size-2 rounded-pill bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+                />
+                <CheckIcon
+                    data-slot="questionnaire-choice-indicator-check"
+                    className="hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+                />
+            </span>
+            <QuestionnairePrimitive.ChoiceLabel
+                data-slot="questionnaire-choice-label"
+                className="flex min-w-0 flex-1 flex-col gap-0.5 leading-snug font-medium"
+            >
+                {children}
+            </QuestionnairePrimitive.ChoiceLabel>
+            <QuestionnairePrimitive.ChoiceShortcut
+                data-slot="questionnaire-choice-shortcut"
+                className="pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-sm border border-border bg-muted font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+            />
+        </QuestionnairePrimitive.Choice>
+    );
+}
+
+function QuestionnaireChoiceDescription({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="questionnaire-choice-description"
+            className={cn("font-normal text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function QuestionnaireInput({className, ...props}: React.ComponentProps<typeof QuestionnairePrimitive.Input>) {
+    return (
+        <div data-slot="questionnaire-input-wrapper" className="group/questionnaire-input relative w-full min-w-0">
+            <QuestionnairePrimitive.Input
+                data-slot="questionnaire-input"
+                className={cn(
+                    fieldSurface,
+                    focusRing,
+                    invalidRing,
+                    "h-8 min-h-11 w-full min-w-0 px-2.5 py-1 text-base sm:min-h-0 md:text-sm",
+                    "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
+                    className,
+                )}
+                {...props}
+            />
+        </div>
+    );
+}
+
+function QuestionnaireError({className, ...props}: React.ComponentProps<typeof QuestionnairePrimitive.Error>) {
+    return (
+        <QuestionnairePrimitive.Error
+            data-slot="questionnaire-error"
+            className={cn("-mt-2 text-sm text-danger", className)}
+            {...props}
+        />
+    );
+}
+
+function QuestionnaireActions({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="questionnaire-actions"
+            className={cn(
+                "grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function QuestionnairePrevious({
+    children,
+    className,
+    size = "default",
+    variant = "outline",
+    ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Previous> &
+    Pick<React.ComponentProps<typeof Button>, "size" | "variant">) {
+    return (
+        <QuestionnairePrimitive.Previous
+            data-slot="questionnaire-previous"
+            data-size={size}
+            data-variant={variant}
+            className={cn(
+                buttonVariants({size, variant}),
+                "col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0",
+                className,
+            )}
+            {...props}
+        >
+            {children ?? "Previous"}
+        </QuestionnairePrimitive.Previous>
+    );
+}
+
+function QuestionnaireSkip({
+    children,
+    className,
+    size = "default",
+    variant = "outline",
+    ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Skip> &
+    Pick<React.ComponentProps<typeof Button>, "size" | "variant">) {
+    return (
+        <QuestionnairePrimitive.Skip
+            data-slot="questionnaire-skip"
+            data-size={size}
+            data-variant={variant}
+            className={cn(
+                buttonVariants({size, variant}),
+                "col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+                className,
+            )}
+            {...props}
+        >
+            {children ?? "Skip"}
+        </QuestionnairePrimitive.Skip>
+    );
+}
+
+function QuestionnaireNext({
+    children,
+    className,
+    size = "default",
+    variant = "default",
+    ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Next> &
+    Pick<React.ComponentProps<typeof Button>, "size" | "variant">) {
+    return (
+        <QuestionnairePrimitive.Next
+            data-slot="questionnaire-next"
+            data-size={size}
+            data-variant={variant}
+            className={cn(
+                buttonVariants({size, variant}),
+                "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+                className,
+            )}
+            {...props}
+        >
+            {children ?? "Next"}
+        </QuestionnairePrimitive.Next>
+    );
+}
+
+function QuestionnaireSubmit({
+    children,
+    className,
+    size = "default",
+    variant = "default",
+    ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Submit> &
+    Pick<React.ComponentProps<typeof Button>, "size" | "variant">) {
+    return (
+        <QuestionnairePrimitive.Submit
+            data-slot="questionnaire-submit"
+            data-size={size}
+            data-variant={variant}
+            className={cn(
+                buttonVariants({size, variant}),
+                "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+                className,
+            )}
+            {...props}
+        >
+            {children ?? "Submit"}
+        </QuestionnairePrimitive.Submit>
+    );
+}
+
+export {
+    Questionnaire,
+    QuestionnaireActions,
+    QuestionnaireChoice,
+    QuestionnaireChoiceDescription,
+    QuestionnaireChoices,
+    QuestionnaireDescription,
+    QuestionnaireError,
+    QuestionnaireInput,
+    QuestionnaireItem,
+    QuestionnaireNext,
+    QuestionnairePrevious,
+    QuestionnaireProgress,
+    QuestionnaireSkip,
+    QuestionnaireSubmit,
+    QuestionnaireTitle,
+};

package/src/components/radio-group.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import {Radio as RadioPrimitive} from "@base-ui/react/radio";
+import {RadioGroup as RadioGroupPrimitive} from "@base-ui/react/radio-group";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+
+/** Radio classes, exported so a custom element can look like a radio. */
+const radioGroupItemVariants = cva([
+    "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 cursor-pointer items-center justify-center rounded-pill border border-input bg-transparent",
+    "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none bg-field",
+    "after:absolute after:-inset-x-3 after:-inset-y-2",
+    focusRing,
+    "hover:bg-field-hover",
+    "data-checked:border-primary data-checked:bg-primary data-checked:hover:bg-primary/85",
+    "aria-invalid:border-danger aria-invalid:ring-3 aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40",
+    "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-field group-has-disabled/field:opacity-50",
+    "group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input group-has-[:focus-visible]/field-label:data-checked:border-primary",
+]);
+
+function RadioGroup({className, ...props}: RadioGroupPrimitive.Props) {
+    return <RadioGroupPrimitive data-slot="radio-group" className={cn("grid w-full gap-2", className)} {...props} />;
+}
+
+function RadioGroupItem({className, ...props}: RadioPrimitive.Root.Props) {
+    return (
+        <RadioPrimitive.Root
+            data-slot="radio-group-item"
+            className={cn(radioGroupItemVariants(), className)}
+            {...props}
+        >
+            <RadioPrimitive.Indicator
+                data-slot="radio-group-indicator"
+                className="flex items-center justify-center data-unchecked:hidden"
+            >
+                <span className="size-1.5 rounded-pill bg-primary-foreground" />
+            </RadioPrimitive.Indicator>
+        </RadioPrimitive.Root>
+    );
+}
+
+export {RadioGroup, RadioGroupItem, radioGroupItemVariants};

package/src/components/resizable.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import {cn} from "cn";
+import {GripVerticalIcon} from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+function ResizablePanelGroup({className, ...props}: ResizablePrimitive.GroupProps) {
+    return (
+        <ResizablePrimitive.Group
+            data-slot="resizable-panel-group"
+            className={cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className)}
+            {...props}
+        />
+    );
+}
+
+function ResizablePanel({...props}: ResizablePrimitive.PanelProps) {
+    return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+/**
+ * 1px line between panels with a wider invisible hit area. `data-separator` (set by the library) drives
+ * the states: hover washes the hit area, dragging turns the line primary, keyboard focus rings it.
+ */
+function ResizableHandle({
+    withHandle,
+    className,
+    ...props
+}: ResizablePrimitive.SeparatorProps & {
+    /** Show a grip in the middle of the line. */
+    withHandle?: boolean;
+}) {
+    return (
+        <ResizablePrimitive.Separator
+            data-slot="resizable-handle"
+            className={cn(
+                "group/handle relative flex w-px shrink-0 items-center justify-center bg-border outline-none",
+                "transition-[background-color,box-shadow] duration-100 motion-reduce:transition-none",
+                // hit area
+                "after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2 after:transition-colors",
+                "hover:after:bg-hover data-[separator=hover]:after:bg-hover data-[separator=active]:bg-primary-text data-[separator=active]:after:bg-primary/15",
+                "focus-visible:bg-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+                "data-[separator=disabled]:opacity-50",
+                // horizontal line (vertical group)
+                "aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-2 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+                className,
+            )}
+            {...props}
+        >
+            {withHandle && (
+                <div
+                    data-slot="resizable-grip"
+                    className="z-10 flex h-6 w-3 shrink-0 items-center justify-center rounded-sm border border-border bg-background text-muted-foreground transition-colors group-hover/handle:text-foreground group-data-[separator=active]/handle:border-primary-text group-data-[separator=active]/handle:text-primary-text"
+                >
+                    <GripVerticalIcon className="size-2.5" />
+                </div>
+            )}
+        </ResizablePrimitive.Separator>
+    );
+}
+
+export {ResizableHandle, ResizablePanel, ResizablePanelGroup};