@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-YNF2OC54.js

@@ -0,0 +1,366 @@
+"use client";
+import {
+  ReasonTooltip
+} from "./chunk-UX3XHFRX.js";
+import {
+  ErrorText
+} from "./chunk-V4Z4B2E3.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+
+// src/ui/setting-row.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  forwardRef
+} from "react";
+import { ArrowRightIcon, ChevronRightIcon, CircleAlertIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SettingRowFieldContext = createContext(null);
+function useSettingRowField() {
+  return useContext(SettingRowFieldContext);
+}
+function useSettingRowControl(takesId = true) {
+  const field = useContext(SettingRowFieldContext);
+  const claim = field?.claimLabel;
+  useLayoutEffect(() => takesId && claim ? claim() : void 0, [claim, takesId]);
+  return field;
+}
+function joinIds(...ids) {
+  const joined = ids.filter(Boolean).join(" ");
+  return joined.length > 0 ? joined : void 0;
+}
+function DisabledReasonTooltip({
+  reason,
+  side = "top",
+  children
+}) {
+  if (reason === void 0 || reason === null || reason === false) return children;
+  return /* @__PURE__ */ jsx(ReasonTooltip, { reason, side, children });
+}
+var SettingRowDepthContext = createContext(0);
+var LEFT_COLUMNS = "grid-cols-[minmax(2.25rem,auto)_minmax(0,1fr)] gap-x-3";
+var SettingRow = /* @__PURE__ */ forwardRef(
+  function SettingRow2({
+    label,
+    description,
+    control,
+    controlWidth = "compact",
+    variant = "control-right",
+    hint,
+    error,
+    children,
+    className,
+    ...props
+  }, ref) {
+    const depth = useContext(SettingRowDepthContext);
+    const baseId = useId();
+    const controlId = `${baseId}-control`;
+    const labelId = `${baseId}-label`;
+    const descriptionId = `${baseId}-description`;
+    const hintId = `${baseId}-hint`;
+    const errorId = `${baseId}-error`;
+    const hasDescription = description !== void 0 && description !== null;
+    const hasHint = hint !== void 0 && hint !== null && hint !== false;
+    const hasError = error !== void 0 && error !== null && error !== false;
+    const [labelTargets, setLabelTargets] = useState(0);
+    const claimLabel = useCallback(() => {
+      setLabelTargets((count) => count + 1);
+      return () => setLabelTargets((count) => count - 1);
+    }, []);
+    const field = useMemo(
+      () => ({
+        controlId,
+        labelId,
+        describedBy: joinIds(
+          hasDescription && descriptionId,
+          hasHint && hintId,
+          hasError && errorId
+        ),
+        invalid: hasError,
+        claimLabel
+      }),
+      [
+        claimLabel,
+        controlId,
+        descriptionId,
+        errorId,
+        hasDescription,
+        hasError,
+        hasHint,
+        hintId,
+        labelId
+      ]
+    );
+    const nested = depth > 0;
+    const compact = controlWidth === "compact";
+    const hasControl = control !== void 0 && control !== null && control !== false;
+    const placement = !hasControl ? "right" : variant === "stacked" ? "below" : variant === "control-left" ? compact ? "left" : "below" : compact ? "right" : "responsive";
+    const gutter = variant === "control-left" && placement !== "left" && !nested;
+    const trailingNotes = placement === "below";
+    const notes = hasHint || hasError ? /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1.5", trailingNotes ? "-mt-1.5" : "mt-1.5"), children: [
+      hasHint ? /* @__PURE__ */ jsx("div", { id: hintId, className: "text-xs leading-4.5 text-fg-muted", children: hint }) : null,
+      hasError ? /* @__PURE__ */ jsxs("p", { id: errorId, className: "flex items-start gap-1.5 text-xs leading-4.5 text-danger", children: [
+        /* @__PURE__ */ jsx(CircleAlertIcon, { "aria-hidden": "true", className: "mt-0.5 size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0", children: /* @__PURE__ */ jsx(ErrorText, { children: error }) })
+      ] }) : null
+    ] }) : null;
+    const text = /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-pretty text-fg", children: /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: hasControl && labelTargets > 0 ? controlId : void 0, children: label }) }),
+      hasDescription ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-0.5 text-xs leading-4.5 text-pretty text-fg-muted", children: description }) : null,
+      trailingNotes ? null : notes
+    ] });
+    const controlSlot = hasControl ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "setting-row-control",
+        className: cn(
+          "flex min-w-0 items-center",
+          placement === "right" && "justify-end",
+          placement === "left" && "h-5 justify-start",
+          // Below 640px, wrapped controls fill the row: selects and segmented options stretch.
+          (placement === "below" || placement === "responsive") && controlWidth === "select" && "w-full *:w-full @[640px]/setting-row:w-60",
+          placement === "below" && controlWidth === "auto" && "w-full *:w-full [&_[data-slot=segmented-control-item]]:flex-1 @[640px]/setting-row:w-auto @[640px]/setting-row:*:w-auto @[640px]/setting-row:[&_[data-slot=segmented-control-item]]:flex-none",
+          placement === "responsive" && controlWidth === "auto" && "w-full *:w-full [&_[data-slot=segmented-control-item]]:flex-1 @[640px]/setting-row:w-auto @[640px]/setting-row:*:w-auto @[640px]/setting-row:justify-end @[640px]/setting-row:[&_[data-slot=segmented-control-item]]:flex-none"
+        ),
+        children: control
+      }
+    ) : null;
+    return /* @__PURE__ */ jsx(SettingRowFieldContext.Provider, { value: field, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "setting-row",
+        "data-variant": variant,
+        "data-nested": nested || void 0,
+        className: cn("@container/setting-row min-w-0", className),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "grid min-w-0 gap-x-6 gap-y-3",
+                nested ? "min-h-11 py-2" : "min-h-14 py-3",
+                gutter ? `${LEFT_COLUMNS} content-center *:col-start-2` : [
+                  placement === "right" && "grid-cols-[minmax(0,1fr)_auto] items-center",
+                  placement === "left" && `${LEFT_COLUMNS} items-start`,
+                  placement === "below" && "grid-cols-1 content-center"
+                ],
+                placement === "responsive" && "grid-cols-1 content-center @[640px]/setting-row:grid-cols-[minmax(0,1fr)_auto] @[640px]/setting-row:items-center"
+              ),
+              children: placement === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                controlSlot,
+                text
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                text,
+                controlSlot,
+                trailingNotes ? notes : null
+              ] })
+            }
+          ),
+          children ? /* @__PURE__ */ jsx(SettingRowDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "setting-row-children",
+              className: cn(
+                "-mt-1 mb-2 flex min-w-0 flex-col",
+                variant === "control-left" ? (
+                  // Line up with the parent's label, past the switch column.
+                  "pl-12"
+                ) : "pl-5"
+              ),
+              children
+            }
+          ) }) : null
+        ]
+      }
+    ) });
+  }
+);
+var SettingRowGroup = /* @__PURE__ */ forwardRef(function SettingRowGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "setting-row-group",
+      className: cn("flex min-w-0 flex-col divide-y divide-border", className),
+      ref,
+      ...props
+    }
+  );
+});
+var SettingNavRow = /* @__PURE__ */ forwardRef(function SettingNavRow2({
+  label,
+  description,
+  value,
+  onOpen,
+  href,
+  disabled = false,
+  disabledReason,
+  className,
+  ...props
+}, ref) {
+  const baseId = useId();
+  const labelId = `${baseId}-label`;
+  const descriptionId = `${baseId}-description`;
+  const valueId = `${baseId}-value`;
+  const secondary = disabled && disabledReason ? disabledReason : description;
+  const hasValue = value !== void 0 && value !== null && value !== false && value !== "";
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("span", { id: labelId, className: "block text-sm font-medium text-pretty text-fg", children: label }),
+      secondary ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: descriptionId,
+          className: "mt-0.5 block text-xs leading-4.5 text-pretty text-fg-muted",
+          children: secondary
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 shrink-0 items-center justify-end gap-2", children: [
+      hasValue ? /* @__PURE__ */ jsx("span", { id: valueId, className: "max-w-60 min-w-0 truncate text-sm text-fg-muted", children: value }) : null,
+      disabled ? null : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-fg-subtle" })
+    ] })
+  ] });
+  const rowClass = cn(
+    "-mx-3 grid min-h-14 w-[calc(100%+1.5rem)] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-6 rounded-[10px] px-3 py-3 text-left",
+    !disabled && "cursor-pointer transition-colors duration-[120ms] hover:bg-surface-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand/55 pointer-coarse:min-h-14"
+  );
+  const labelledBy = joinIds(labelId, hasValue && valueId);
+  const describedBy = secondary ? descriptionId : void 0;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "setting-nav-row", className: cn("min-w-0", className), ref, ...props, children: disabled ? /* @__PURE__ */ jsx("div", { className: rowClass, "aria-disabled": "true", children: inner }) : href ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      onClick: onOpen,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      className: rowClass,
+      children: inner
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onOpen,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      className: rowClass,
+      children: inner
+    }
+  ) });
+});
+function SettingDangerRow({
+  label,
+  description,
+  disabled = false,
+  onClick,
+  className
+}) {
+  const descriptionId = useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "setting-danger-row",
+      className: cn("flex min-h-14 min-w-0 flex-col items-start justify-center py-3", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick,
+            "aria-describedby": description ? descriptionId : void 0,
+            className: "-mx-1.5 rounded-md px-1.5 text-sm font-medium text-danger transition-colors duration-[120ms] hover:bg-danger/10 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11",
+            children: label
+          }
+        ),
+        description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-0.5 text-xs leading-4.5 text-fg-muted", children: description }) : null
+      ]
+    }
+  );
+}
+function SettingRowLink({
+  href,
+  onClick,
+  children,
+  className,
+  disabled = false
+}) {
+  const classes = cn(
+    "relative inline-flex min-h-6 items-center gap-1 rounded-sm text-xs font-medium og-link pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:-inset-y-2.5",
+    className
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx(ArrowRightIcon, { "aria-hidden": "true", className: "size-3.5" })
+  ] });
+  return href ? /* @__PURE__ */ jsx("a", { href: disabled ? void 0 : href, "aria-disabled": disabled || void 0, className: classes, children: content }) : /* @__PURE__ */ jsx("button", { type: "button", onClick, disabled, className: classes, children: content });
+}
+function SettingRowSkeleton({
+  controlWidth = "compact",
+  variant = "control-right",
+  description = true,
+  className
+}) {
+  const pulse = "animate-pulse rounded-full bg-surface-3 motion-reduce:animate-none";
+  const controlShape = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "animate-pulse bg-surface-3 motion-reduce:animate-none",
+        controlWidth === "compact" && "h-5 w-9 rounded-full",
+        controlWidth === "select" && "h-8 w-full rounded-[10px] @[640px]/setting-row:w-60",
+        controlWidth === "auto" && "h-8 w-full rounded-[10px] @[640px]/setting-row:w-48"
+      )
+    }
+  );
+  const leading = variant === "control-left" && controlWidth === "compact";
+  const below = variant === "stacked" || variant === "control-left" && !leading;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "setting-row-skeleton",
+      className: cn("@container/setting-row min-w-0", className),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid min-h-14 min-w-0 gap-x-6 gap-y-3 py-3",
+            variant === "control-left" ? `${LEFT_COLUMNS} ${leading ? "items-start" : "content-center *:col-start-2"}` : below ? "grid-cols-1 content-center" : controlWidth === "compact" ? "grid-cols-[minmax(0,1fr)_auto] items-center" : "grid-cols-1 content-center @[640px]/setting-row:grid-cols-[minmax(0,1fr)_auto] @[640px]/setting-row:items-center"
+          ),
+          children: [
+            leading ? /* @__PURE__ */ jsx("div", { className: "flex h-5 items-center", children: controlShape }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-5 items-center", children: /* @__PURE__ */ jsx("div", { className: cn("h-3.5 w-36 max-w-full", pulse) }) }),
+              description ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-4.5 items-center", children: /* @__PURE__ */ jsx("div", { className: cn("h-3 w-72 max-w-full", pulse) }) }) : null
+            ] }),
+            leading ? null : controlShape
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  useSettingRowField,
+  useSettingRowControl,
+  joinIds,
+  DisabledReasonTooltip,
+  SettingRow,
+  SettingRowGroup,
+  SettingNavRow,
+  SettingDangerRow,
+  SettingRowLink,
+  SettingRowSkeleton
+};
+//# sourceMappingURL=chunk-YNF2OC54.js.map

package/dist/chunk-YNF2OC54.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/setting-row.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n  type ComponentPropsWithoutRef,\n} from \"react\";\nimport { ArrowRightIcon, ChevronRightIcon, CircleAlertIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { ReasonTooltip } from \"./disabled-reason\";\nimport { ErrorText } from \"./error-text\";\n\n/* ----------------------------------------------------------------------------\n   Field wiring. A SettingRow owns the label and description; the one control\n   inside it (Switch, SegmentedControl, or anything that calls\n   `useSettingRowField`) picks up the ids so it is named and described without\n   hand-written aria attributes.\n\n   The label only points at the control (`htmlFor`) when a labelable control\n   takes `controlId` through `useSettingRowControl`. Radio groups, buttons\n   and menus are named with `aria-labelledby` instead, so the label never\n   renames them or points at nothing.\n   -------------------------------------------------------------------------- */\n\nexport interface SettingRowField {\n  /** Id for a labelable control (switch, input, native select). Take it through `useSettingRowControl`. */\n  controlId: string;\n  /** Id of the visible label, for `aria-labelledby`. */\n  labelId: string;\n  /** Space-separated ids of the description, hint and error, for `aria-describedby`. */\n  describedBy: string | undefined;\n  /** True when the row shows an error. */\n  invalid: boolean;\n  /** Points the label at `controlId`; returns the release. Use `useSettingRowControl` instead. */\n  claimLabel: () => () => void;\n}\n\nconst SettingRowFieldContext = createContext<SettingRowField | null>(null);\n\n/** The label and description ids of the enclosing SettingRow, or null outside one. */\nexport function useSettingRowField(): SettingRowField | null {\n  return useContext(SettingRowFieldContext);\n}\n\n/**\n * For a labelable control that renders `id={field.controlId}`: the row's\n * label then points at it, so clicking the label focuses or toggles it.\n * Pass `false` when the control keeps its own id.\n */\nexport function useSettingRowControl(takesId = true): SettingRowField | null {\n  const field = useContext(SettingRowFieldContext);\n  const claim = field?.claimLabel;\n  useLayoutEffect(() => (takesId && claim ? claim() : undefined), [claim, takesId]);\n  return field;\n}\n\n/** Joins aria id lists, dropping empty entries. */\nexport function joinIds(...ids: Array<string | null | undefined | false>): string | undefined {\n  const joined = ids.filter(Boolean).join(\" \");\n  return joined.length > 0 ? joined : undefined;\n}\n\n/* ----------------------------------------------------------------------------\n   Disabled reasons. The app-wide ReasonTooltip (hover, keyboard focus and\n   tap), so every \"why is this off\" reads the same. The control stays\n   focusable (`aria-disabled`) so keyboard and screen reader users can reach\n   it and hear why; clicks on it open the reason instead of acting.\n   -------------------------------------------------------------------------- */\n\nexport function DisabledReasonTooltip({\n  reason,\n  side = \"top\",\n  children,\n}: {\n  /** Why the control is unavailable and who can fix it. Renders nothing extra when empty. */\n  reason?: ReactNode | undefined;\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\" | undefined;\n  /** One focusable element. Its clicks are swallowed while the reason shows. */\n  children: ReactElement;\n}) {\n  if (reason === undefined || reason === null || reason === false) return children;\n  return (\n    <ReasonTooltip reason={reason} side={side}>\n      {children}\n    </ReasonTooltip>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   SettingRow\n   -------------------------------------------------------------------------- */\n\n/**\n * - `control-right` (default): text left, the control in a fixed right column so\n *   every control on the page lines up. Wide controls drop under the text when\n *   the row is narrower than 640px; switches stay on the right.\n * - `control-left`: list style. Switches sit before the label; wider controls\n *   go under the description.\n * - `stacked`: the control always sits under the text, like a form field.\n */\nexport type SettingRowVariant = \"control-right\" | \"control-left\" | \"stacked\";\n\n/**\n * - `compact`: a switch or a small button. Never wraps under the text in\n *   `control-right`.\n * - `select`: a 240px column; the control fills it (full width when stacked).\n * - `auto`: the control's own width, for segmented controls. Options stretch\n *   to the full width when stacked.\n *\n * Rows use the 32px control size (`size=\"sm\"` on selects and segmented\n * controls), so every control in a list shares one height.\n */\nexport type SettingRowControlWidth = \"compact\" | \"select\" | \"auto\";\n\nconst SettingRowDepthContext = createContext(0);\n\n/** Control left: a switch-wide leading column (36px, or the control's width), then the text. */\nconst LEFT_COLUMNS = \"grid-cols-[minmax(2.25rem,auto)_minmax(0,1fr)] gap-x-3\";\n\nexport interface SettingRowProps extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"title\" | \"children\"\n> {\n  /** 14/500, sentence case. Wraps; never truncates. */\n  label: ReactNode;\n  /** 12/18 muted, one or two sentences. */\n  description?: ReactNode | undefined;\n  /** Exactly one control. */\n  control?: ReactNode | undefined;\n  controlWidth?: SettingRowControlWidth | undefined;\n  variant?: SettingRowVariant | undefined;\n  /** A quiet line under the description, usually a `SettingRowLink` that fixes an unavailable state. */\n  hint?: ReactNode | undefined;\n  /** What went wrong and what to do. Linked to the control with `aria-describedby`. */\n  error?: ReactNode | undefined;\n  /**\n   * Dependent rows (more SettingRows) that apply only while this row's setting\n   * is on: a sub-selection indented under this row, with no hairline between\n   * the parent and its children or between the children, and no guide line.\n   * They keep the ordinary row type (title, description, control on the\n   * right) with tighter spacing, and the next hairline comes after the whole\n   * group. Render them only while the parent is on.\n   */\n  children?: ReactNode | undefined;\n}\n\nexport const SettingRow = /* @__PURE__ */ forwardRef<HTMLDivElement, SettingRowProps>(\n  function SettingRow(\n    {\n      label,\n      description,\n      control,\n      controlWidth = \"compact\",\n      variant = \"control-right\",\n      hint,\n      error,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const depth = useContext(SettingRowDepthContext);\n    const baseId = useId();\n    const controlId = `${baseId}-control`;\n    const labelId = `${baseId}-label`;\n    const descriptionId = `${baseId}-description`;\n    const hintId = `${baseId}-hint`;\n    const errorId = `${baseId}-error`;\n    const hasDescription = description !== undefined && description !== null;\n    const hasHint = hint !== undefined && hint !== null && hint !== false;\n    const hasError = error !== undefined && error !== null && error !== false;\n    // How many controls took `controlId`; the label points at the control only then.\n    const [labelTargets, setLabelTargets] = useState(0);\n    const claimLabel = useCallback(() => {\n      setLabelTargets((count) => count + 1);\n      return () => setLabelTargets((count) => count - 1);\n    }, []);\n\n    const field = useMemo<SettingRowField>(\n      () => ({\n        controlId,\n        labelId,\n        describedBy: joinIds(\n          hasDescription && descriptionId,\n          hasHint && hintId,\n          hasError && errorId,\n        ),\n        invalid: hasError,\n        claimLabel,\n      }),\n      [\n        claimLabel,\n        controlId,\n        descriptionId,\n        errorId,\n        hasDescription,\n        hasError,\n        hasHint,\n        hintId,\n        labelId,\n      ],\n    );\n\n    const nested = depth > 0;\n    const compact = controlWidth === \"compact\";\n    const hasControl = control !== undefined && control !== null && control !== false;\n    // Where the control goes for this variant and width.\n    const placement: \"right\" | \"left\" | \"below\" | \"responsive\" = !hasControl\n      ? \"right\"\n      : variant === \"stacked\"\n        ? \"below\"\n        : variant === \"control-left\"\n          ? compact\n            ? \"left\"\n            : \"below\"\n          : compact\n            ? \"right\"\n            : \"responsive\";\n    // Control left keeps one text column: rows without a leading switch leave its\n    // column empty, so every label on the list starts at the same edge.\n    const gutter = variant === \"control-left\" && placement !== \"left\" && !nested;\n\n    // With the control under the text (stacked), the hint and error follow the control.\n    const trailingNotes = placement === \"below\";\n    const notes =\n      hasHint || hasError ? (\n        <div className={cn(\"flex min-w-0 flex-col gap-1.5\", trailingNotes ? \"-mt-1.5\" : \"mt-1.5\")}>\n          {hasHint ? (\n            <div id={hintId} className=\"text-xs leading-4.5 text-fg-muted\">\n              {hint}\n            </div>\n          ) : null}\n          {hasError ? (\n            <p id={errorId} className=\"flex items-start gap-1.5 text-xs leading-4.5 text-danger\">\n              <CircleAlertIcon aria-hidden=\"true\" className=\"mt-0.5 size-3.5 shrink-0\" />\n              <span className=\"min-w-0\">\n                <ErrorText>{error}</ErrorText>\n              </span>\n            </p>\n          ) : null}\n        </div>\n      ) : null;\n\n    const text = (\n      <div className=\"min-w-0\">\n        <div className=\"text-sm font-medium text-pretty text-fg\">\n          <label id={labelId} htmlFor={hasControl && labelTargets > 0 ? controlId : undefined}>\n            {label}\n          </label>\n        </div>\n        {hasDescription ? (\n          <p id={descriptionId} className=\"mt-0.5 text-xs leading-4.5 text-pretty text-fg-muted\">\n            {description}\n          </p>\n        ) : null}\n        {trailingNotes ? null : notes}\n      </div>\n    );\n\n    const controlSlot = hasControl ? (\n      <div\n        data-slot=\"setting-row-control\"\n        className={cn(\n          \"flex min-w-0 items-center\",\n          placement === \"right\" && \"justify-end\",\n          placement === \"left\" && \"h-5 justify-start\",\n          // Below 640px, wrapped controls fill the row: selects and segmented options stretch.\n          (placement === \"below\" || placement === \"responsive\") &&\n            controlWidth === \"select\" &&\n            \"w-full *:w-full @[640px]/setting-row:w-60\",\n          placement === \"below\" &&\n            controlWidth === \"auto\" &&\n            \"w-full *:w-full [&_[data-slot=segmented-control-item]]:flex-1 @[640px]/setting-row:w-auto @[640px]/setting-row:*:w-auto @[640px]/setting-row:[&_[data-slot=segmented-control-item]]:flex-none\",\n          placement === \"responsive\" &&\n            controlWidth === \"auto\" &&\n            \"w-full *:w-full [&_[data-slot=segmented-control-item]]:flex-1 @[640px]/setting-row:w-auto @[640px]/setting-row:*:w-auto @[640px]/setting-row:justify-end @[640px]/setting-row:[&_[data-slot=segmented-control-item]]:flex-none\",\n        )}\n      >\n        {control}\n      </div>\n    ) : null;\n\n    return (\n      <SettingRowFieldContext.Provider value={field}>\n        <div\n          data-slot=\"setting-row\"\n          data-variant={variant}\n          data-nested={nested || undefined}\n          className={cn(\"@container/setting-row min-w-0\", className)}\n          ref={ref}\n          {...props}\n        >\n          <div\n            className={cn(\n              \"grid min-w-0 gap-x-6 gap-y-3\",\n              nested ? \"min-h-11 py-2\" : \"min-h-14 py-3\",\n              gutter\n                ? `${LEFT_COLUMNS} content-center *:col-start-2`\n                : [\n                    placement === \"right\" && \"grid-cols-[minmax(0,1fr)_auto] items-center\",\n                    placement === \"left\" && `${LEFT_COLUMNS} items-start`,\n                    placement === \"below\" && \"grid-cols-1 content-center\",\n                  ],\n              placement === \"responsive\" &&\n                \"grid-cols-1 content-center @[640px]/setting-row:grid-cols-[minmax(0,1fr)_auto] @[640px]/setting-row:items-center\",\n            )}\n          >\n            {placement === \"left\" ? (\n              <>\n                {controlSlot}\n                {text}\n              </>\n            ) : (\n              <>\n                {text}\n                {controlSlot}\n                {trailingNotes ? notes : null}\n              </>\n            )}\n          </div>\n          {children ? (\n            <SettingRowDepthContext.Provider value={depth + 1}>\n              <div\n                data-slot=\"setting-row-children\"\n                // One group with the parent: indented, no hairlines inside it and\n                // no guide line; the next hairline follows the whole group.\n                className={cn(\n                  \"-mt-1 mb-2 flex min-w-0 flex-col\",\n                  variant === \"control-left\"\n                    ? // Line up with the parent's label, past the switch column.\n                      \"pl-12\"\n                    : \"pl-5\",\n                )}\n              >\n                {children}\n              </div>\n            </SettingRowDepthContext.Provider>\n          ) : null}\n        </div>\n      </SettingRowFieldContext.Provider>\n    );\n  },\n);\n\n/** Rows of one section, split by hairlines. The Section variant decides whether they sit in a card. */\nexport const SettingRowGroup = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(function SettingRowGroup({ className, ...props }, ref) {\n  return (\n    <div\n      data-slot=\"setting-row-group\"\n      className={cn(\"flex min-w-0 flex-col divide-y divide-border\", className)}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\n/**\n * A setting that lives on its own page (\"Allowed models\", \"Models it can\n * serve\"). The whole row is the button: label and description on the left,\n * the current value in muted text and a chevron on the right, and the row\n * hover of a list row. Use it instead of an \"Edit\" or \"Change\" button that\n * only opens a page.\n */\nexport const SettingNavRow = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n    label: ReactNode;\n    description?: ReactNode | undefined;\n    /** The current value, short: \"All models\", \"3 models\". */\n    value?: ReactNode | undefined;\n    onOpen?: (() => void) | undefined;\n    href?: string | undefined;\n    disabled?: boolean | undefined;\n    /** Why the page can't be opened, and who can fix it. Replaces the description. */\n    disabledReason?: ReactNode | undefined;\n  }\n>(function SettingNavRow(\n  {\n    label,\n    description,\n    value,\n    onOpen,\n    href,\n    disabled = false,\n    disabledReason,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const baseId = useId();\n  const labelId = `${baseId}-label`;\n  const descriptionId = `${baseId}-description`;\n  const valueId = `${baseId}-value`;\n  const secondary = disabled && disabledReason ? disabledReason : description;\n  const hasValue = value !== undefined && value !== null && value !== false && value !== \"\";\n  const inner = (\n    <>\n      <span className=\"min-w-0\">\n        <span id={labelId} className=\"block text-sm font-medium text-pretty text-fg\">\n          {label}\n        </span>\n        {secondary ? (\n          <span\n            id={descriptionId}\n            className=\"mt-0.5 block text-xs leading-4.5 text-pretty text-fg-muted\"\n          >\n            {secondary}\n          </span>\n        ) : null}\n      </span>\n      <span className=\"flex min-w-0 shrink-0 items-center justify-end gap-2\">\n        {hasValue ? (\n          <span id={valueId} className=\"max-w-60 min-w-0 truncate text-sm text-fg-muted\">\n            {value}\n          </span>\n        ) : null}\n        {disabled ? null : (\n          <ChevronRightIcon aria-hidden=\"true\" className=\"size-4 shrink-0 text-fg-subtle\" />\n        )}\n      </span>\n    </>\n  );\n  const rowClass = cn(\n    \"-mx-3 grid min-h-14 w-[calc(100%+1.5rem)] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-6 rounded-[10px] px-3 py-3 text-left\",\n    !disabled &&\n      \"cursor-pointer transition-colors duration-[120ms] hover:bg-surface-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand/55 pointer-coarse:min-h-14\",\n  );\n  const labelledBy = joinIds(labelId, hasValue && valueId);\n  const describedBy = secondary ? descriptionId : undefined;\n  return (\n    <div data-slot=\"setting-nav-row\" className={cn(\"min-w-0\", className)} ref={ref} {...props}>\n      {disabled ? (\n        <div className={rowClass} aria-disabled=\"true\">\n          {inner}\n        </div>\n      ) : href ? (\n        <a\n          href={href}\n          onClick={onOpen}\n          aria-labelledby={labelledBy}\n          aria-describedby={describedBy}\n          className={rowClass}\n        >\n          {inner}\n        </a>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={onOpen}\n          aria-labelledby={labelledBy}\n          aria-describedby={describedBy}\n          className={rowClass}\n        >\n          {inner}\n        </button>\n      )}\n    </div>\n  );\n});\n\n/**\n * A quiet destructive action at the end of a settings list (\"Turn off\n * Codex\"): danger text that confirms in a dialog, with one muted line under\n * it. Not a filled button, and never a ⋯ menu floating above the rows.\n */\nexport function SettingDangerRow({\n  label,\n  description,\n  disabled = false,\n  onClick,\n  className,\n}: {\n  label: ReactNode;\n  description?: ReactNode | undefined;\n  disabled?: boolean | undefined;\n  onClick: () => void;\n  className?: string | undefined;\n}) {\n  const descriptionId = useId();\n  return (\n    <div\n      data-slot=\"setting-danger-row\"\n      className={cn(\"flex min-h-14 min-w-0 flex-col items-start justify-center py-3\", className)}\n    >\n      <button\n        type=\"button\"\n        disabled={disabled}\n        onClick={onClick}\n        aria-describedby={description ? descriptionId : undefined}\n        className=\"-mx-1.5 rounded-md px-1.5 text-sm font-medium text-danger transition-colors duration-[120ms] hover:bg-danger/10 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11\"\n      >\n        {label}\n      </button>\n      {description ? (\n        <p id={descriptionId} className=\"mt-0.5 text-xs leading-4.5 text-fg-muted\">\n          {description}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * The quiet \"fix it\" link under a row description: \"Connect AI Gateway\".\n * Renders an anchor when `href` is set, otherwise a button.\n */\nexport function SettingRowLink({\n  href,\n  onClick,\n  children,\n  className,\n  disabled = false,\n}: {\n  href?: string | undefined;\n  onClick?: (() => void) | undefined;\n  children: ReactNode;\n  className?: string | undefined;\n  disabled?: boolean | undefined;\n}) {\n  const classes = cn(\n    \"relative inline-flex min-h-6 items-center gap-1 rounded-sm text-xs font-medium og-link pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:-inset-y-2.5\",\n    className,\n  );\n  const content = (\n    <>\n      {children}\n      <ArrowRightIcon aria-hidden=\"true\" className=\"size-3.5\" />\n    </>\n  );\n  return href ? (\n    <a href={disabled ? undefined : href} aria-disabled={disabled || undefined} className={classes}>\n      {content}\n    </a>\n  ) : (\n    <button type=\"button\" onClick={onClick} disabled={disabled} className={classes}>\n      {content}\n    </button>\n  );\n}\n\n/** Loading placeholder with the same height and columns as a real row. */\nexport function SettingRowSkeleton({\n  controlWidth = \"compact\",\n  variant = \"control-right\",\n  description = true,\n  className,\n}: {\n  controlWidth?: SettingRowControlWidth | undefined;\n  variant?: SettingRowVariant | undefined;\n  description?: boolean | undefined;\n  className?: string | undefined;\n}) {\n  const pulse = \"animate-pulse rounded-full bg-surface-3 motion-reduce:animate-none\";\n  const controlShape = (\n    <div\n      className={cn(\n        \"animate-pulse bg-surface-3 motion-reduce:animate-none\",\n        controlWidth === \"compact\" && \"h-5 w-9 rounded-full\",\n        controlWidth === \"select\" && \"h-8 w-full rounded-[10px] @[640px]/setting-row:w-60\",\n        controlWidth === \"auto\" && \"h-8 w-full rounded-[10px] @[640px]/setting-row:w-48\",\n      )}\n    />\n  );\n  const leading = variant === \"control-left\" && controlWidth === \"compact\";\n  const below = variant === \"stacked\" || (variant === \"control-left\" && !leading);\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"setting-row-skeleton\"\n      className={cn(\"@container/setting-row min-w-0\", className)}\n    >\n      <div\n        className={cn(\n          \"grid min-h-14 min-w-0 gap-x-6 gap-y-3 py-3\",\n          variant === \"control-left\"\n            ? `${LEFT_COLUMNS} ${leading ? \"items-start\" : \"content-center *:col-start-2\"}`\n            : below\n              ? \"grid-cols-1 content-center\"\n              : controlWidth === \"compact\"\n                ? \"grid-cols-[minmax(0,1fr)_auto] items-center\"\n                : \"grid-cols-1 content-center @[640px]/setting-row:grid-cols-[minmax(0,1fr)_auto] @[640px]/setting-row:items-center\",\n        )}\n      >\n        {leading ? <div className=\"flex h-5 items-center\">{controlShape}</div> : null}\n        {/* Same line boxes as the label (20px) and description (18px), so nothing jumps on load. */}\n        <div className=\"min-w-0\">\n          <div className=\"flex h-5 items-center\">\n            <div className={cn(\"h-3.5 w-36 max-w-full\", pulse)} />\n          </div>\n          {description ? (\n            <div className=\"mt-0.5 flex h-4.5 items-center\">\n              <div className={cn(\"h-3 w-72 max-w-full\", pulse)} />\n            </div>\n          ) : null}\n        </div>\n        {leading ? null : controlShape}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["SettingRow","SettingRowGroup","SettingNavRow"]}

package/dist/chunk-YPWU5KPE.js

@@ -0,0 +1,147 @@
+"use client";
+import {
+  useActionShortcut
+} from "./chunk-HGKTHF2U.js";
+import {
+  TooltipWithKeys
+} from "./chunk-OHGG2G3A.js";
+import {
+  useWindowBarRowLeft
+} from "./chunk-KWASZVN4.js";
+import {
+  desktopPlatform
+} from "./chunk-5QBCQVKZ.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "./chunk-SS4QT7SL.js";
+import {
+  PageHeaderWindowBarContext
+} from "./chunk-HD5X76TP.js";
+import {
+  Button
+} from "./chunk-7QQN3KNP.js";
+
+// src/app/components/window-bar.tsx
+import { ChevronsLeftIcon, ChevronsRightIcon, PanelLeftIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIDEBAR_TOGGLE_IN_WINDOW_BAR = desktopPlatform === "macos";
+function windowBarRowActive(options) {
+  return options.platform === "macos" && !options.mobile;
+}
+function WindowBarControls({ children }) {
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-window-bar-controls": true,
+        className: "fixed left-[var(--og-window-bar-controls-left,84px)] top-0 z-[46] flex h-[calc(2*var(--og-window-controls-center,22px))] min-h-min items-center gap-1 [-webkit-app-region:no-drag] [app-region:no-drag]",
+        children
+      }
+    ),
+    windowBarHost()
+  );
+}
+function windowBarHost() {
+  let host = document.querySelector("body > [data-window-bar-host]");
+  if (!host) {
+    host = document.createElement("div");
+    host.setAttribute("data-window-bar-host", "");
+    document.body.prepend(host);
+  }
+  return host;
+}
+function SidebarToggleButton({
+  collapsed,
+  onToggle,
+  inWindowBar,
+  shortcut = true
+}) {
+  const appSidebarKeys = useActionShortcut("view.sidebar");
+  const sidebarKeys = shortcut ? appSidebarKeys : null;
+  const label = collapsed ? "Expand sidebar" : "Collapse sidebar";
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": label,
+        "aria-keyshortcuts": sidebarKeys?.ariaKeys,
+        onClick: onToggle,
+        className: "shrink-0 text-fg-label hover:text-fg pointer-coarse:size-10",
+        children: inWindowBar ? /* @__PURE__ */ jsx(PanelLeftIcon, { className: "size-4" }) : collapsed ? /* @__PURE__ */ jsx(ChevronsRightIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronsLeftIcon, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: inWindowBar ? "bottom" : "right", children: /* @__PURE__ */ jsx(TooltipWithKeys, { label, shortcut: sidebarKeys }) })
+  ] });
+}
+function WindowBarTitle({ children }) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "data-window-drag": true,
+      "data-titlebar": true,
+      "data-window-bar-title": true,
+      className: "flex min-w-0 shrink-0 items-center gap-1 pl-[max(clamp(0.5rem,2.5vw,1.25rem),env(safe-area-inset-left))] pr-[max(clamp(0.5rem,2.5vw,1.25rem),env(safe-area-inset-right))]",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "min-w-0 truncate text-[15px] font-semibold leading-6 tracking-[-0.01em] text-fg",
+          children
+        }
+      )
+    }
+  );
+}
+function useWindowBarRow(canvasRef, active) {
+  useWindowBarRowLeft(canvasRef, active);
+  return active ? { "data-window-bar-row": "" } : {};
+}
+function WindowBarPageTitle({
+  enabled,
+  fallbackTitle,
+  children
+}) {
+  const [claims, setClaims] = useState([]);
+  const [registry] = useState(() => ({
+    set(id, title2, fallback = false) {
+      setClaims((current) => {
+        const existing = current.find((claim) => claim.id === id);
+        if (existing?.title === title2 && existing.fallback === fallback) return current;
+        return existing ? current.map((claim) => claim.id === id ? { id, title: title2, fallback } : claim) : [...current, { id, title: title2, fallback }];
+      });
+    },
+    release(id) {
+      setClaims((current) => current.filter((claim) => claim.id !== id));
+    }
+  }));
+  const owner = claims.find((claim) => claim.title && !claim.fallback) ?? claims.find((claim) => claim.title);
+  const title = owner ? owner.title : fallbackTitle;
+  const ownerId = owner?.id ?? null;
+  const value = useMemo(
+    () => enabled ? { ...registry, owner: ownerId } : null,
+    [enabled, ownerId, registry]
+  );
+  return /* @__PURE__ */ jsxs(PageHeaderWindowBarContext.Provider, { value, children: [
+    enabled && title != null && title !== "" ? /* @__PURE__ */ jsx(WindowBarTitle, { children: title }) : null,
+    children
+  ] });
+}
+
+export {
+  SIDEBAR_TOGGLE_IN_WINDOW_BAR,
+  windowBarRowActive,
+  WindowBarControls,
+  SidebarToggleButton,
+  WindowBarTitle,
+  useWindowBarRow,
+  WindowBarPageTitle
+};
+//# sourceMappingURL=chunk-YPWU5KPE.js.map