@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/ui/mode-bar.js

@@ -0,0 +1,65 @@
+import { cn } from "../lib/cn.js";
+import { KIT_SCOPE } from "./surfaces.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/mode-bar.tsx
+/**
+* MODE BAR (D61 §3.7, shared with D58 view-as). One 36px strip that says "you are in a mode": an icon, a sentence and
+* its actions, with a polite live-region announcement. The primitive is shared; the placement is not:
+*
+*  - View as (D58): app-wide, above the top bar (it changes who you are). `tone="info"`, centred. Esc does not exit.
+*  - Revision preview (D61): inside the editor, under its header (it changes what you are looking at).
+*    `tone="raised"`, start-aligned. Esc goes back to current (the host wires it).
+*
+* If both apply, both show: view-as on top. Tokens only, both themes (D56).
+* The strip sits in the app shell, outside any kit host, so its root carries the kit scope itself (like the portalled layers).
+*/
+var TONE = {
+	info: "border-kit-info-line bg-kit-info-soft",
+	raised: "border-kit-line bg-kit-surface-raised"
+};
+var ModeBar = React.forwardRef(function ModeBar({ label, icon, tone = "info", align = "center", announce, className, children, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "region",
+		"aria-label": label,
+		"data-mode-bar": tone,
+		...KIT_SCOPE,
+		className: cn("relative flex h-9 shrink-0 items-center gap-2 border-b px-4 text-kit-sm text-kit-fg", align === "center" ? "justify-center" : "justify-start", TONE[tone], className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announce ?? ""
+			}),
+			icon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "flex shrink-0 text-kit-fg-2 [&>svg]:size-4",
+				children: icon
+			}) : null,
+			children
+		]
+	});
+});
+/** The quiet "·" between parts of a mode bar sentence. */
+function ModeBarDot({ className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("text-kit-fg-3", className),
+		children: "·"
+	});
+}
+/** A text action in a mode bar ("Exit"): underlined, not a button chip. */
+var ModeBarLink = React.forwardRef(function ModeBarLink({ className, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: cn("shrink-0 rounded-kit-sm px-1 font-medium text-kit-fg underline decoration-kit-fg-3 underline-offset-2 hover:decoration-kit-fg", className),
+		...rest
+	});
+});
+//#endregion
+export { ModeBar, ModeBarDot, ModeBarLink };
+
+//# sourceMappingURL=mode-bar.js.map

package/dist/ui/mode-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-bar.js","names":[],"sources":["../../src/ui/mode-bar.tsx"],"sourcesContent":["/**\n * MODE BAR (D61 §3.7, shared with D58 view-as). One 36px strip that says \"you are in a mode\": an icon, a sentence and\n * its actions, with a polite live-region announcement. The primitive is shared; the placement is not:\n *\n *  - View as (D58): app-wide, above the top bar (it changes who you are). `tone=\"info\"`, centred. Esc does not exit.\n *  - Revision preview (D61): inside the editor, under its header (it changes what you are looking at).\n *    `tone=\"raised\"`, start-aligned. Esc goes back to current (the host wires it).\n *\n * If both apply, both show: view-as on top. Tokens only, both themes (D56).\n * The strip sits in the app shell, outside any kit host, so its root carries the kit scope itself (like the portalled layers).\n */\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { KIT_SCOPE } from \"./surfaces\";\n\nexport type ModeBarTone = \"info\" | \"raised\";\n\nconst TONE: Record<ModeBarTone, string> = {\n  info: \"border-kit-info-line bg-kit-info-soft\",\n  raised: \"border-kit-line bg-kit-surface-raised\",\n};\n\nexport interface ModeBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** the region's accessible name (\"View as\", \"Version preview\") */\n  label: string;\n  /** a 16px glyph, decorative */\n  icon?: React.ReactNode;\n  tone?: ModeBarTone;\n  /** \"center\" (view-as) or \"start\" (revision preview) */\n  align?: \"center\" | \"start\";\n  /** polite announcement, read once when it changes */\n  announce?: string;\n}\n\nexport const ModeBar = React.forwardRef<HTMLDivElement, ModeBarProps>(function ModeBar(\n  { label, icon, tone = \"info\", align = \"center\", announce, className, children, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-label={label}\n      data-mode-bar={tone}\n      {...KIT_SCOPE}\n      className={cn(\n        \"relative flex h-9 shrink-0 items-center gap-2 border-b px-4 text-kit-sm text-kit-fg\",\n        align === \"center\" ? \"justify-center\" : \"justify-start\",\n        TONE[tone],\n        className,\n      )}\n      {...rest}\n    >\n      <span aria-live=\"polite\" className=\"sr-only\">{announce ?? \"\"}</span>\n      {icon ? <span aria-hidden className=\"flex shrink-0 text-kit-fg-2 [&>svg]:size-4\">{icon}</span> : null}\n      {children}\n    </div>\n  );\n});\n\n/** The quiet \"·\" between parts of a mode bar sentence. */\nexport function ModeBarDot({ className }: { className?: string }) {\n  return <span aria-hidden className={cn(\"text-kit-fg-3\", className)}>·</span>;\n}\n\n/** A text action in a mode bar (\"Exit\"): underlined, not a button chip. */\nexport const ModeBarLink = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(function ModeBarLink(\n  { className, ...rest },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"shrink-0 rounded-kit-sm px-1 font-medium text-kit-fg underline decoration-kit-fg-3 underline-offset-2 hover:decoration-kit-fg\",\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAM,OAAoC;CACxC,MAAM;CACN,QAAQ;AACV;AAcA,IAAa,UAAU,MAAM,WAAyC,SAAS,QAC7E,EAAE,OAAO,MAAM,OAAO,QAAQ,QAAQ,UAAU,UAAU,WAAW,UAAU,GAAG,QAClF,KACA;CACA,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,GAAI;EACJ,WAAW,GACT,uFACA,UAAU,WAAW,mBAAmB,iBACxC,KAAK,OACL,SACF;EACA,GAAI;EAZN,UAAA;GAcE,oBAAC,QAAD;IAAM,aAAU;IAAS,WAAU;IAAW,UAAA,YAAY;GAAS,CAAA;GAClE,OAAO,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAU;IAA8C,UAAA;GAAW,CAAA,IAAI;GAChG;EACE;;AAET,CAAC;;AAGD,SAAgB,WAAW,EAAE,aAAqC;CAChE,OAAO,oBAAC,QAAD;EAAM,eAAA;EAAY,WAAW,GAAG,iBAAiB,SAAS;EAAG,UAAA;CAAO,CAAA;AAC7E;;AAGA,IAAa,cAAc,MAAM,WAA6E,SAAS,YACrH,EAAE,WAAW,GAAG,QAChB,KACA;CACA,OACE,oBAAC,UAAD;EACO;EACL,MAAK;EACL,WAAW,GACT,iIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/ui/overlay.d.ts

@@ -0,0 +1,195 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import { useRender } from "@base-ui/react/use-render";
+/** Base UI parts accept a className function; the kit takes plain strings so cn() can merge them. */
+type Cls<P> = Omit<P, "className"> & {
+    className?: string;
+};
+export declare const FLOATING_LAYER = "[data-floating-layer]";
+export declare const TooltipProvider: React.FC<import("@base-ui/react").TooltipProviderProps>;
+export declare function Tooltip({ content, children, side, shortcut, delay, disabled, }: {
+    content: React.ReactNode;
+    /** the trigger: one element that forwards its ref and spreads props */
+    children: React.ReactElement;
+    side?: "top" | "bottom" | "left" | "right";
+    /** a key hint (D44): shown only while keyboard hints are on */
+    shortcut?: string;
+    delay?: number;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ onOpenChange, ...props }: PopoverPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+export declare const PopoverTrigger: PopoverPrimitive.Trigger;
+export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** Positions the popover against this element instead of the trigger; presses on it count as inside. */
+export declare function PopoverAnchor({ render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function PopoverContent({ className, align, side, sideOffset, keepFocus, onMouseDown, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: Cls<PopoverPrimitive.Popup.Props> & {
+    align?: "start" | "center" | "end";
+    side?: "top" | "bottom" | "left" | "right";
+    sideOffset?: number;
+    /** keep the popup inside this area (e.g. the scrolling panel under a sticky header) instead of the viewport */
+    collisionBoundary?: PopoverPrimitive.Positioner.Props["collisionBoundary"];
+    collisionPadding?: PopoverPrimitive.Positioner.Props["collisionPadding"];
+    /** e.g. `{ align: "shift" }`: slide along the edge to fit instead of flipping start ↔ end (V2's Radix behaviour) */
+    collisionAvoidance?: PopoverPrimitive.Positioner.Props["collisionAvoidance"];
+    /** §12 no-focus-steal: typing stays in the input the list hangs off. The popup takes no focus on open, gives none
+     *  back on close, and a mouse-down inside it never blurs the input (text fields inside the popup still focus). */
+    keepFocus?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const HoverCard: <Payload>(props: PreviewCardPrimitive.Root.Props<Payload>) => React.JSX.Element;
+export declare const HoverCardTrigger: PreviewCardPrimitive.Trigger;
+export declare function HoverCardContent({ className, ...props }: Cls<PreviewCardPrimitive.Popup.Props>): import("react/jsx-runtime").JSX.Element;
+/** Arrowing past the last item stays put (loopFocus false), like V2's Radix menus. */
+export declare function Menu({ onOpenChange, loopFocus, ...props }: MenuPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+export declare const MenuTrigger: MenuPrimitive.Trigger;
+export declare const MenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuSub: typeof MenuPrimitive.SubmenuRoot;
+export declare const MenuRadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react").ContextMenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function MenuContent({ className, align, side, sideOffset, positionerClassName, ...props }: Cls<MenuPrimitive.Popup.Props> & {
+    align?: "start" | "center" | "end";
+    side?: "top" | "bottom" | "left" | "right";
+    sideOffset?: number;
+    /** The layer: a menu opened from a dashboard dialog (z --z-modal) passes `z-[var(--z-dropdown)]`, or it opens behind it. */
+    positionerClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ className, icon, shortcut, danger, children, ...props }: Cls<MenuPrimitive.Item.Props> & {
+    icon?: React.ReactNode;
+    shortcut?: string;
+    danger?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** Checking an item closes the menu, like V2's Radix items (pass closeOnClick={false} to keep it open). */
+export declare function MenuCheckItem({ className, children, closeOnClick, ...props }: Cls<MenuPrimitive.CheckboxItem.Props>): import("react/jsx-runtime").JSX.Element;
+export declare function MenuRadioItem({ className, children, closeOnClick, ...props }: Cls<MenuPrimitive.RadioItem.Props>): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSubTrigger({ className, icon, children, ...props }: Cls<MenuPrimitive.SubmenuTrigger.Props> & {
+    icon?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSubContent({ className, ...props }: Cls<MenuPrimitive.Popup.Props>): import("react/jsx-runtime").JSX.Element;
+export declare function MenuLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSeparator({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+type FinalFocus = DialogPrimitive.Popup.Props["finalFocus"];
+export declare function useFocusReturn(finalFocus?: FinalFocus): {
+    ref: (el: HTMLElement | null) => void;
+    finalFocus: NonNullable<FinalFocus>;
+};
+export declare function Modal({ onOpenChange, ...props }: DialogPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+export declare const ModalTrigger: DialogPrimitive.Trigger;
+export declare const ModalClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const sizes: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+};
+export declare function ModalContent({ className, size, children, hideClose, finalFocus, ref, ...props }: Cls<DialogPrimitive.Popup.Props> & {
+    size?: keyof typeof sizes;
+    hideClose?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ModalHeader({ title, description, className, children, }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** D15: no icon tiles in dialog headers (accepted for compatibility, intentionally not rendered) */
+    icon?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ModalBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function ModalFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare const flowWidths: {
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+};
+export declare function FlowModal({ open, onOpenChange, size, height, locked, children, className, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    size?: keyof typeof flowWidths;
+    /** fixed = stable height for multi-step flows; auto = hug content */
+    height?: "fixed" | "auto" | "tall";
+    /** while true, outside-click / escape / the close button do nothing (a run is in progress) */
+    locked?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FlowClose({ disabled }: {
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FlowHeader({ title, description, icon, status, right, children, className, closeDisabled, }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    status?: React.ReactNode;
+    right?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    closeDisabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** Status chip used in flow headers ("Ready to publish" with a green dot). */
+export declare function HeaderStatus({ tone, children, pulse, }: {
+    tone?: "success" | "warning" | "danger" | "info" | "accent" | "neutral";
+    children: React.ReactNode;
+    pulse?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FlowBody({ className, children }: {
+    className?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FlowFooter({ left, children, className }: {
+    left?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Small uppercase-free section label used inside flow bodies. */
+export declare function FlowLabel({ children, right, className }: {
+    children: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Radio-like option row (Figma "Publish scope" / "When" rows). */
+export declare function OptionRow({ selected, onSelect, title, description, right, disabled, children, className, }: {
+    selected: boolean;
+    onSelect: () => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    right?: React.ReactNode;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Progressive disclosure: advanced choices tucked behind "More options" (CPO D6). */
+export declare function MoreOptions({ children, label, summary, defaultOpen, className, }: {
+    children: React.ReactNode;
+    label?: string;
+    summary?: React.ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** A sheet is a dialog that slides in from an edge: open it with Sheet (= Modal) and its trigger. */
+export declare const Sheet: typeof Modal;
+export declare const SheetTrigger: DialogPrimitive.Trigger;
+export declare const SheetClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const sheetSides: {
+    readonly right: "right-0 border-l border-kit-line data-[open]:animate-[kit-sheet-in-r_260ms_var(--kit-ease-out-soft)]";
+    readonly left: "left-0 border-r border-kit-line data-[open]:animate-[kit-sheet-in-l_260ms_var(--kit-ease-out-soft)]";
+    readonly bottom: "inset-x-0 inset-y-auto bottom-0 h-[52%] overflow-hidden rounded-t-kit-2xl border-t border-kit-line data-[open]:animate-[kit-sheet-in-b_300ms_cubic-bezier(0.32,0.72,0,1)]";
+};
+export declare function SheetContent({ className, side, children, width, label, noScrim, finalFocus, ref, style, backdropClassName, keepMounted, ...props }: Cls<DialogPrimitive.Popup.Props> & {
+    side?: keyof typeof sheetSides;
+    /** side sheets only: the panel width in px (a bottom sheet spans the viewport) */
+    width?: number;
+    /** the dialog's accessible name (V2's tablet inspector sheet is "Inspector") */
+    label?: string;
+    /** no backdrop: the page behind stays visible and, with <Sheet modal={false}>, live (V2's Comments and History sheets) */
+    noScrim?: boolean;
+    style?: React.CSSProperties;
+    /** extra classes for the backdrop, a sibling portal: a host that themes its own scope (light/dark) passes the same class here */
+    backdropClassName?: string;
+    /** keep the content mounted (hidden) while closed: a host whose content holds live state, like the editor's inspector */
+    keepMounted?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};