@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/date-picker.js

@@ -0,0 +1,117 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useDatePickerContext as m, DatePicker as n } from "@ark-ui/react/date-picker";
+import { Portal as g } from "@ark-ui/react/portal";
+import { CalendarIcon as k, ClockIcon as h } from "lucide-react";
+import { cn as s } from "../lib/cn.js";
+import { Button as f } from "./button.js";
+import { Calendar as P, CalendarPresetTrigger as x } from "./calendar.js";
+import { InputGroup as l, InputGroupInput as d, InputGroupAddon as p, InputGroupButton as C } from "./input-group.js";
+const y = m, G = (t) => {
+  const { positioning: r = { placement: "top" }, slot: o, ...a } = t;
+  return /* @__PURE__ */ e(
+    P,
+    {
+      inline: !1,
+      positioning: r,
+      ...a,
+      slot: o ?? "date-picker"
+    }
+  );
+}, j = (t) => {
+  const { className: r, children: o, slot: a, ...i } = t;
+  return /* @__PURE__ */ e(n.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ e(
+    n.Trigger,
+    {
+      className: s(
+        "justify-start",
+        "text-start data-placeholder-shown:[&>span]:text-muted-foreground",
+        "active:scale-100",
+        "[&_svg:not([class*='text-'])]:opacity-64",
+        r
+      ),
+      ...i,
+      "data-slot": a ?? "date-picker-trigger",
+      children: o
+    }
+  ) });
+}, V = (t) => {
+  const { size: r, className: o, slot: a, ...i } = t;
+  return /* @__PURE__ */ e(n.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ c(l, { size: r, children: [
+    /* @__PURE__ */ e(n.Input, { asChild: !0, ...i, children: /* @__PURE__ */ e(d, { slot: a ?? "date-picker-input" }) }),
+    /* @__PURE__ */ e(p, { align: "inline-end", children: /* @__PURE__ */ e(C, { asChild: !0, size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ e(n.Trigger, { asChild: !0, children: /* @__PURE__ */ e(f, { slot: "date-picker-trigger", variant: "ghost", children: /* @__PURE__ */ e(k, { "aria-hidden": !0, className: "text-muted-foreground" }) }) }) }) })
+  ] }) });
+}, B = (t) => {
+  const { id: r, value: o, defaultValue: a, className: i, ...u } = t;
+  return /* @__PURE__ */ c(l, { ...u, children: [
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(h, {}) }),
+    /* @__PURE__ */ e(
+      d,
+      {
+        className: s(
+          "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
+          i
+        ),
+        defaultValue: a,
+        id: r,
+        step: "1",
+        type: "time",
+        value: o
+      }
+    )
+  ] });
+}, A = (t) => {
+  const { className: r, slot: o, ...a } = t;
+  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(n.Positioner, { "data-slot": "date-picker-positioner", children: /* @__PURE__ */ e(
+    n.Content,
+    {
+      className: s(
+        "[--cell-size:--spacing(8)]",
+        "z-[calc(50+var(--layer-index,0))]",
+        "w-fit min-w-72",
+        "p-3",
+        "bg-popover",
+        "text-popover-foreground",
+        "rounded-box border shadow-lg/5",
+        "outline-none",
+        "origin-(--transform-origin)",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]",
+        "motion-reduce:animate-none!",
+        r
+      ),
+      ...a,
+      "data-slot": o ?? "date-picker-content"
+    }
+  ) }) });
+}, _ = (t) => {
+  const { className: r, slot: o, ...a } = t;
+  return /* @__PURE__ */ e(
+    n.ValueText,
+    {
+      className: s("font-medium text-sm", r),
+      ...a,
+      "data-slot": o ?? "date-picker-value"
+    }
+  );
+}, $ = ({
+  slot: t,
+  ...r
+}) => /* @__PURE__ */ e(
+  x,
+  {
+    ...r,
+    slot: t ?? "date-picker-preset-trigger"
+  }
+);
+export {
+  G as DatePicker,
+  A as DatePickerContent,
+  V as DatePickerInput,
+  $ as DatePickerPresetTrigger,
+  B as DatePickerTimer,
+  j as DatePickerTrigger,
+  _ as DatePickerValue,
+  y as useDatePicker
+};
+//# sourceMappingURL=date-picker.js.map

package/dist/simples/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sources":["../../src/simples/date-picker.tsx"],"sourcesContent":["import {\n  DatePicker as ArkDatePicker,\n  useDatePickerContext,\n} from \"@ark-ui/react/date-picker\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { CalendarIcon, ClockIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport {\n  Calendar,\n  CalendarPresetTrigger,\n} from \"./calendar\";\nimport type { Input, InputProps } from \"./input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\";\n\nexport const useDatePicker = useDatePickerContext;\n\nexport const DatePicker = (props: React.ComponentProps<typeof Calendar>) => {\n  const { positioning = { placement: \"top\" }, slot, ...rest } = props;\n\n  return (\n    <Calendar\n      inline={false}\n      positioning={positioning}\n      {...rest}\n      slot={slot ?? \"date-picker\"}\n    />\n  );\n};\n\nexport const DatePickerTrigger = (\n  props: React.ComponentProps<typeof ArkDatePicker.Trigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <ArkDatePicker.Trigger\n        className={cn(\n          \"justify-start\",\n          \"text-start data-placeholder-shown:[&>span]:text-muted-foreground\",\n          \"active:scale-100\",\n          \"[&_svg:not([class*='text-'])]:opacity-64\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"date-picker-trigger\"}\n      >\n        {children}\n      </ArkDatePicker.Trigger>\n    </ArkDatePicker.Control>\n  );\n};\n\ninterface DatePickerInputProps\n  extends Omit<React.ComponentProps<typeof ArkDatePicker.Input>, \"size\">,\n    InputProps {}\n\nexport const DatePickerInput = (props: DatePickerInputProps) => {\n  const { size, className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <InputGroup size={size}>\n        <ArkDatePicker.Input asChild {...rest}>\n          <InputGroupInput slot={slot ?? \"date-picker-input\"} />\n        </ArkDatePicker.Input>\n\n        <InputGroupAddon align=\"inline-end\">\n          {/* One size for the chain, and it used to declare two: the outer `InputGroupButton` asked\n              for `icon-sm` and the inner `Button` — which exists only because Ark's Trigger needs a\n              child to hand its props to — overrode it with `icon-md`. The outer one is the size a\n              control inside a group has, so the inner declares none. */}\n          <InputGroupButton asChild size=\"icon-sm\" variant=\"ghost\">\n            <ArkDatePicker.Trigger asChild>\n              <Button slot=\"date-picker-trigger\" variant=\"ghost\">\n                <CalendarIcon aria-hidden className=\"text-muted-foreground\" />\n              </Button>\n            </ArkDatePicker.Trigger>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </ArkDatePicker.Control>\n  );\n};\n\nexport const DatePickerTimer = (props: React.ComponentProps<typeof Input>) => {\n  const { id, value, defaultValue, className, ...rest } = props;\n\n  return (\n    <InputGroup {...rest}>\n      <InputGroupAddon>\n        <ClockIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        className={cn(\n          \"[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\",\n          className\n        )}\n        defaultValue={defaultValue}\n        id={id}\n        step=\"1\"\n        type=\"time\"\n        value={value}\n      />\n    </InputGroup>\n  );\n};\n\nexport const DatePickerContent = (\n  props: React.ComponentProps<typeof ArkDatePicker.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkDatePicker.Positioner data-slot=\"date-picker-positioner\">\n        <ArkDatePicker.Content\n          className={cn(\n            \"[--cell-size:--spacing(8)]\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"w-fit min-w-72\",\n            \"p-3\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-none\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"date-picker-content\"}\n        />\n      </ArkDatePicker.Positioner>\n    </Portal>\n  );\n};\n\nexport const DatePickerValue = (\n  props: React.ComponentProps<typeof ArkDatePicker.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.ValueText\n      className={cn(\"font-medium text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"date-picker-value\"}\n    />\n  );\n};\n\nexport const DatePickerPresetTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkDatePicker.PresetTrigger>) => (\n  <CalendarPresetTrigger\n    {...rest}\n    slot={slot ?? \"date-picker-preset-trigger\"}\n  />\n);\n"],"names":["useDatePicker","useDatePickerContext","DatePicker","props","positioning","slot","rest","jsx","Calendar","DatePickerTrigger","className","children","ArkDatePicker","cn","DatePickerInput","size","jsxs","InputGroup","InputGroupInput","InputGroupAddon","InputGroupButton","Button","CalendarIcon","DatePickerTimer","id","value","defaultValue","ClockIcon","DatePickerContent","Portal","DatePickerValue","DatePickerPresetTrigger","CalendarPresetTrigger"],"mappings":"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"}

package/dist/simples/diagnostic.d.ts

@@ -0,0 +1,138 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { Badge } from './badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
+export declare const DiagnosticList: (props: React.ComponentProps<typeof ark.ul>) => React.JSX.Element;
+declare const diagnosticVariants: import('tailwind-variants').TVReturnType<{
+    /**
+     * **The reference's surface, not a coloured rail.**
+     *
+     * This used to be `border-s-2` in the family's colour over a neutral `bg-foreground/14` — a card with
+     * a bar down one edge, which is a shape that appears nowhere in Shark UI and nowhere else in
+     * this library. It is the generic callout, and it is what made a diagnostic read as machine
+     * furniture rather than as one of these components.
+     *
+     * `Alert` is the surface a message with a severity has here, and these are its exact steps:
+     * the wash at `-a3`, the whole outline at `-a6`, the glyph at the family. It stacks — the
+     * reference stacks alerts, and the argument that six of them would read as decoration was made
+     * about the rail, not about this.
+     */
+    variant: {
+        destructive: string[];
+        warning: string[];
+        info: string[];
+    };
+}, undefined, string[], {
+    /**
+     * **The reference's surface, not a coloured rail.**
+     *
+     * This used to be `border-s-2` in the family's colour over a neutral `bg-foreground/14` — a card with
+     * a bar down one edge, which is a shape that appears nowhere in Shark UI and nowhere else in
+     * this library. It is the generic callout, and it is what made a diagnostic read as machine
+     * furniture rather than as one of these components.
+     *
+     * `Alert` is the surface a message with a severity has here, and these are its exact steps:
+     * the wash at `-a3`, the whole outline at `-a6`, the glyph at the family. It stacks — the
+     * reference stacks alerts, and the argument that six of them would read as decoration was made
+     * about the rail, not about this.
+     */
+    variant: {
+        destructive: string[];
+        warning: string[];
+        info: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    /**
+     * **The reference's surface, not a coloured rail.**
+     *
+     * This used to be `border-s-2` in the family's colour over a neutral `bg-foreground/14` — a card with
+     * a bar down one edge, which is a shape that appears nowhere in Shark UI and nowhere else in
+     * this library. It is the generic callout, and it is what made a diagnostic read as machine
+     * furniture rather than as one of these components.
+     *
+     * `Alert` is the surface a message with a severity has here, and these are its exact steps:
+     * the wash at `-a3`, the whole outline at `-a6`, the glyph at the family. It stacks — the
+     * reference stacks alerts, and the argument that six of them would read as decoration was made
+     * about the rail, not about this.
+     */
+    variant: {
+        destructive: string[];
+        warning: string[];
+        info: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface DiagnosticProps extends Omit<React.ComponentProps<typeof Collapsible>, "asChild">, VariantProps<typeof diagnosticVariants> {
+}
+/**
+ * One diagnostic, collapsed to its header until it is opened. Open state, animation and the
+ * trigger/content ARIA come from Ark's Collapsible, so `defaultOpen`, `open` and `onOpenChange`
+ * pass through unchanged — the machine's root is handed to the `<li>` through `asChild`, which is
+ * how a diagnostic is a real item of `DiagnosticList`'s `<ul>` and a collapsible at the same time.
+ *
+ * `variant` is written once, here. Repeating it as a prop on the badge is how the two drift.
+ */
+export declare const Diagnostic: (props: DiagnosticProps) => React.JSX.Element;
+/**
+ * One line **until the caller says otherwise**, and it was `flex-nowrap` — which is not the same
+ * thing and cost the message.
+ *
+ * The argument for nowrap was real: a header that wraps turns a list of six into six different
+ * shapes, and the message that overflows is the one `DiagnosticDescription` repeats in full once the
+ * row is open. What it did not survive is a narrow column. Measured on the `metadata-form` showcase,
+ * whose findings panel is 24 % of the workspace: **a 143 px header, with the title 0 px wide and
+ * starting at x=215** — 72 px past its own right edge. The severity, the source and the trigger are
+ * all `shrink-0`, so they take the width and `DiagnosticTitle`'s `flex-1` shrinks to nothing. Not
+ * truncated with an ellipsis: gone, and the row said only *This field is required.* three times over
+ * with nothing to tell the three apart.
+ *
+ * `flex-wrap` changes nothing for a header that fits, and nothing for a wide list either: the title
+ * is `basis-0`, so it never forces a break on its own. What it does is make `basis-full` on the
+ * title mean what a reader would expect — *this goes on its own line* — which is what the showcase
+ * had already written, with a comment claiming this component wrapped. It did not. Now it does, and
+ * an item that cannot fit wraps instead of overflowing the box.
+ */
+export declare const DiagnosticHeader: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+/**
+ * The severity, as an icon and whatever word the call site gives it. The icon comes from the root
+ * and is not the caller's to pass; the text is.
+ *
+ * **It is a `Badge`**, and it used to be a `Badge` respelled: `h-5 min-w-5 px-1.5 rounded-md
+ * font-medium text-xs` beside three `group-data-[severity=…]` lines that repainted, by hand, the
+ * three soft variants `Badge` already ships. `Tool`'s state chip has always used the real one.
+ * Nothing is lost by the swap — the size is `Badge`'s `sm`, the fills are the same tokens — and the
+ * three selector lines go with it.
+ */
+export declare const DiagnosticSeverity: (props: React.ComponentProps<typeof Badge>) => React.JSX.Element;
+export declare const DiagnosticTitle: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const DiagnosticSource: (props: React.ComponentProps<typeof ark.span>) => React.JSX.Element;
+export declare const DiagnosticActions: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const DiagnosticTrigger: (props: React.ComponentProps<typeof CollapsibleTrigger>) => React.JSX.Element;
+export declare const DiagnosticContent: (props: React.ComponentProps<typeof CollapsibleContent>) => React.JSX.Element;
+export declare const DiagnosticDescription: (props: React.ComponentProps<typeof ark.p>) => React.JSX.Element;
+export declare const DiagnosticFrames: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export interface DiagnosticFrameProps extends Omit<React.ComponentProps<typeof ark.button>, "onSelect" | "children"> {
+    /** The file, graph or node the position is in. */
+    path: string;
+    line?: number;
+    column?: number;
+    /** A short note beside the position — the property path, the frame's function. */
+    label?: string;
+    /**
+     * An inferred or upstream position rather than one the author wrote — the counterpart of a
+     * `node_modules` frame. Dimmed, never hidden: it is usually the frame that explains the others.
+     */
+    secondary?: boolean;
+    onSelect?: () => void;
+}
+/**
+ * One position, read as a location rather than a string: the directory recedes, the file carries
+ * the weight, and the line and column are tabular so a column of frames lines up.
+ *
+ * With `onSelect` it is a real `<button>` wearing the arrow that says it goes somewhere; without
+ * one it is static text, because a control that does nothing is announced as a control and answers
+ * to nothing.
+ */
+export declare const DiagnosticFrame: (props: DiagnosticFrameProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=diagnostic.d.ts.map

package/dist/simples/diagnostic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagnostic.d.ts","sourceRoot":"","sources":["../../src/simples/diagnostic.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EACL,WAAW,EACX,kBAAkB,EAElB,kBAAkB,EACnB,MAAM,eAAe,CAAC;AAmCvB,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,sBAWxE,CAAC;AAEF,QAAA,MAAM,kBAAkB;IAQpB;;;;;;;;;;;;OAYG;;;;;;;IAZH;;;;;;;;;;;;OAYG;;;;;;;IAZH;;;;;;;;;;;;OAYG;;;;;;qDAUL,CAAC;AAGH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,CAAC,EAC/D,YAAY,CAAC,OAAO,kBAAkB,CAAC;CAAG;AAE9C;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAgBhD,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAU3E,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAiB3E,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAe1E,CAAC;AAIF,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAa5E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAU5E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAwBvF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAUvF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,sBAU9E,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAY3E,CAAC;AAqCF,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC9E,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAwE1D,CAAC"}

package/dist/simples/diagnostic.js

@@ -0,0 +1,288 @@
+"use client";
+import { jsx as a, jsxs as d, Fragment as C } from "react/jsx-runtime";
+import { ark as o } from "@ark-ui/react/factory";
+import { ArrowUpRightIcon as D, InfoIcon as k, TriangleAlertIcon as I, CircleAlertIcon as _ } from "lucide-react";
+import v from "react";
+import { tv as b } from "tailwind-variants";
+import { cn as i } from "../lib/cn.js";
+import { Badge as $ } from "./badge.js";
+import { Collapsible as A, CollapsibleContent as V, CollapsibleTrigger as z, CollapsibleIndicator as T } from "./collapsible.js";
+const F = {
+  destructive: _,
+  warning: I,
+  info: k
+}, N = v.createContext("destructive"), E = (n) => {
+  const { className: t, slot: e, ...s } = n;
+  return /* @__PURE__ */ a(
+    o.ul,
+    {
+      className: i("flex w-full list-none flex-col gap-1.5", t),
+      role: "list",
+      ...s,
+      "data-slot": e ?? "diagnostic-list"
+    }
+  );
+}, j = b({
+  base: [
+    "group/diagnostic",
+    "w-full",
+    "rounded-xl border",
+    "text-card-foreground text-sm"
+  ],
+  variants: {
+    /**
+     * **The reference's surface, not a coloured rail.**
+     *
+     * This used to be `border-s-2` in the family's colour over a neutral `bg-foreground/14` — a card with
+     * a bar down one edge, which is a shape that appears nowhere in Shark UI and nowhere else in
+     * this library. It is the generic callout, and it is what made a diagnostic read as machine
+     * furniture rather than as one of these components.
+     *
+     * `Alert` is the surface a message with a severity has here, and these are its exact steps:
+     * the wash at `-a3`, the whole outline at `-a6`, the glyph at the family. It stacks — the
+     * reference stacks alerts, and the argument that six of them would read as decoration was made
+     * about the rail, not about this.
+     */
+    variant: {
+      destructive: ["bg-destructive/7", "border-destructive/30"],
+      warning: ["bg-warning/7", "border-warning/30"],
+      info: ["bg-info/7", "border-info/30"]
+    }
+  },
+  defaultVariants: {
+    variant: "destructive"
+  }
+}), G = (n) => {
+  const { variant: t = "destructive", className: e, children: s, slot: r, ...c } = n;
+  return /* @__PURE__ */ a(N.Provider, { value: t, children: /* @__PURE__ */ a(A, { ...c, asChild: !0, children: /* @__PURE__ */ a(
+    o.li,
+    {
+      className: i(j({ variant: t }), e),
+      "data-slot": r ?? "diagnostic",
+      "data-variant": t,
+      children: s
+    }
+  ) }) });
+}, J = (n) => {
+  const { className: t, slot: e, ...s } = n;
+  return /* @__PURE__ */ a(
+    o.div,
+    {
+      className: i("flex w-full min-w-0 flex-wrap items-center gap-2 px-3 py-2", t),
+      ...s,
+      "data-slot": e ?? "diagnostic-header"
+    }
+  );
+}, K = (n) => {
+  const { className: t, children: e, slot: s, ...r } = n, c = v.useContext(N), l = F[c];
+  return /* @__PURE__ */ d(
+    $,
+    {
+      className: i("shrink-0", t),
+      size: "sm",
+      variant: c,
+      ...r,
+      slot: s ?? "diagnostic-severity",
+      children: [
+        /* @__PURE__ */ a(l, { "aria-hidden": "true" }),
+        e
+      ]
+    }
+  );
+}, M = (n) => {
+  const { className: t, slot: e, ...s } = n;
+  return /* @__PURE__ */ a(
+    o.div,
+    {
+      className: i(
+        "min-w-0 flex-1 truncate font-medium text-sm leading-snug",
+        // Opening a row is the one moment the whole message is worth more than the alignment.
+        "group-data-[state=open]/diagnostic:whitespace-normal",
+        t
+      ),
+      ...s,
+      "data-slot": e ?? "diagnostic-title"
+    }
+  );
+}, Q = (n) => {
+  const { className: t, slot: e, ...s } = n;
+  return /* @__PURE__ */ a(
+    o.span,
+    {
+      className: i(
+        "shrink-0 whitespace-nowrap font-mono text-muted-foreground text-xs max-sm:hidden",
+        t
+      ),
+      ...s,
+      "data-slot": e ?? "diagnostic-source"
+    }
+  );
+}, W = (n) => {
+  const { className: t, slot: e, ...s } = n;
+  return /* @__PURE__ */ a(
+    o.div,
+    {
+      className: i("flex shrink-0 items-center gap-1", t),
+      ...s,
+      "data-slot": e ?? "diagnostic-actions"
+    }
+  );
+}, X = (n) => {
+  const { className: t, children: e, slot: s, ...r } = n;
+  return /* @__PURE__ */ d(
+    z,
+    {
+      className: i(
+        "inline-flex items-center justify-center gap-1",
+        // WCAG 2.5.8 asks 24×24 CSS pixels, and every `rem` here is measured against a root the
+        // density axis sets — 14px at compact, where `min-h-6` would be 21. `DiagnosticFrame`'s
+        // floor is the same number for the same reason.
+        "min-h-[24px] min-w-[24px] px-2",
+        "rounded-md font-medium text-muted-foreground text-xs tabular-nums",
+        "hover:bg-accent hover:text-accent-foreground",
+        "outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+        "[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0",
+        t
+      ),
+      ...r,
+      slot: s ?? "diagnostic-trigger",
+      children: [
+        e,
+        /* @__PURE__ */ a(T, {})
+      ]
+    }
+  );
+}, Y = (n) => {
+  const { className: t, slot: e, ...s } = n;
+  return /* @__PURE__ */ a(
+    V,
+    {
+      className: i("flex flex-col gap-2 border-t px-3 pt-2.5 pb-2.5", t),
+      ...s,
+      slot: e ?? "diagnostic-content"
+    }
+  );
+}, Z = (n) => {
+  const { className: t, slot: e, ...s } = n;
+  return /* @__PURE__ */ a(
+    o.p,
+    {
+      className: i("text-muted-foreground text-sm leading-normal", t),
+      ...s,
+      "data-slot": e ?? "diagnostic-description"
+    }
+  );
+}, tt = (n) => {
+  const { className: t, slot: e, ...s } = n;
+  return (
+    // Pulled out by the frame's own padding, so a frame's text lines up with the description above
+    // it and its hover fill is a full-width row rather than an inset one.
+    /* @__PURE__ */ a(
+      o.div,
+      {
+        className: i("-ms-2 -me-2 flex flex-col", t),
+        ...s,
+        "data-slot": e ?? "diagnostic-frames"
+      }
+    )
+  );
+}, R = b({
+  base: [
+    "flex w-full items-center gap-1.5",
+    "min-h-[24px] rounded-md px-2 py-1",
+    "text-start font-mono text-xs",
+    "[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "[button&]:cursor-pointer [button&]:hover:bg-accent [button&]:hover:text-accent-foreground",
+    "[button&]:outline-none [button&]:focus-visible:ring-[3px] [button&]:focus-visible:ring-ring"
+  ],
+  variants: {
+    // Two channels, so the distinction survives a reader who is scanning rather than reading: the
+    // row drops a tier, and the file loses the weight that marks an authored position.
+    //
+    // The tier is `--muted-foreground` and not `--faint`, which is what a dimmed thing usually
+    // reaches for here: `--faint` is solved against the page, and a diagnostic is a wash over it.
+    // Measured 2026-08 over the six documents in `packages/theme/palettes`, both modes: faint on
+    // that surface is 3.96–6.62:1 and lands under WCAG AA's 4.5 in seven of the twelve;
+    // muted-foreground is 6.54–9.48 in all of them. Every dimmed part below reads the same way.
+    //
+    // **Those numbers were taken against `bg-foreground/14`, and the card is now `bg-destructive/7` /
+    // `-warning-a3` / `-info-a3`** — the surface moved with the `Alert` alignment. The direction
+    // is not in doubt (a family wash at `-a3` is a comparably light tint, and the gap between the
+    // two tiers is ~2.5 stops), but the figures no longer describe what is painted. Re-measuring
+    // over the three washes on both modes is owed, and until it happens this is a claim about a
+    // surface that has been replaced.
+    secondary: {
+      true: ["text-muted-foreground", "[&_[data-slot=diagnostic-frame-file]]:font-normal"],
+      false: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    secondary: !1
+  }
+}), et = (n) => {
+  const { path: t, line: e, column: s, label: r, secondary: c = !1, onSelect: l, className: w, slot: u, ...g } = n, f = t.lastIndexOf("/") + 1, p = t.slice(0, f), y = t.slice(f), m = e === void 0 ? "" : s === void 0 ? `:${e}` : `:${e}:${s}`, x = /* @__PURE__ */ d(C, { children: [
+    /* @__PURE__ */ d(o.span, { className: "flex min-w-0 items-baseline", children: [
+      p ? /* @__PURE__ */ a(o.span, { className: "truncate text-muted-foreground", "data-slot": "diagnostic-frame-directory", children: p }) : null,
+      /* @__PURE__ */ a(o.span, { className: "shrink-0 font-medium", "data-slot": "diagnostic-frame-file", children: y }),
+      m ? /* @__PURE__ */ a(
+        o.span,
+        {
+          className: "shrink-0 text-muted-foreground tabular-nums",
+          "data-slot": "diagnostic-frame-position",
+          children: m
+        }
+      ) : null
+    ] }),
+    r || l ? /* @__PURE__ */ d(o.span, { className: "ms-auto flex shrink-0 items-center gap-1.5 font-sans text-muted-foreground", children: [
+      r ? /* @__PURE__ */ a(o.span, { "data-slot": "diagnostic-frame-label", children: r }) : null,
+      l ? /* @__PURE__ */ a(D, { "aria-hidden": "true" }) : null
+    ] }) : null
+  ] }), h = {
+    className: i(R({ secondary: c }), w),
+    "data-secondary": c ? "" : void 0
+  };
+  return l ? (
+    // Ark ships no equivalent, so the ARIA contract is ours: the button is named by the position
+    // and its label joined with a dash. Without it the name is the spans run together —
+    // "ledgerQ-1058:12:7as claimed" — because the rhythm that separates them is visual only.
+    /* @__PURE__ */ a(
+      o.button,
+      {
+        "aria-label": r ? `${t}${m} — ${r}` : `${t}${m}`,
+        onClick: l,
+        type: "button",
+        ...h,
+        ...g,
+        "data-slot": u ?? "diagnostic-frame",
+        children: x
+      }
+    )
+  ) : (
+    // One props type cannot describe two elements, and `ref` is the member that conflicts: which
+    // element this is depends on `onSelect`, which the type system sees no earlier than we do.
+    /* @__PURE__ */ a(
+      o.span,
+      {
+        ...h,
+        ...g,
+        "data-slot": u ?? "diagnostic-frame",
+        children: x
+      }
+    )
+  );
+};
+export {
+  G as Diagnostic,
+  W as DiagnosticActions,
+  Y as DiagnosticContent,
+  Z as DiagnosticDescription,
+  et as DiagnosticFrame,
+  tt as DiagnosticFrames,
+  J as DiagnosticHeader,
+  E as DiagnosticList,
+  K as DiagnosticSeverity,
+  Q as DiagnosticSource,
+  M as DiagnosticTitle,
+  X as DiagnosticTrigger
+};
+//# sourceMappingURL=diagnostic.js.map

package/dist/simples/diagnostic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagnostic.js","sources":["../../src/simples/diagnostic.tsx"],"sourcesContent":["\"use client\";\n\n// A machine's complaint, shown: a severity, a message, and the positions it points at. A SHACL\n// violation, an LSP diagnostic and a stack trace are the same three things, so the vocabulary is\n// theirs and the domain is nobody's. Client, because `DiagnosticFrame` hands `onSelect` to a real\n// `onClick` — a function prop a Server Component may not pass.\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { ArrowUpRightIcon, CircleAlertIcon, InfoIcon, TriangleAlertIcon } from \"lucide-react\";\nimport React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Badge } from \"./badge\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleIndicator,\n  CollapsibleTrigger,\n} from \"./collapsible\";\n\n/**\n * **`variant`, and the families are the house's.**\n *\n * It was `severity`, with `error | warning | info`. Both halves were a second vocabulary for\n * something the library already says: `Alert`, `Badge`, `Status` and `Button` all colour by\n * `variant`, and the family that means *this went wrong* is `destructive` everywhere else — the\n * word `error` appears in no other recipe here and in none of the reference's. A diagnostic is a\n * severity in the domain sense and a variant in the surface sense, and this is the surface.\n */\ntype Variant = \"destructive\" | \"warning\" | \"info\";\n\nconst VARIANT_ICON: Record<Variant, typeof InfoIcon> = {\n  destructive: CircleAlertIcon,\n  warning: TriangleAlertIcon,\n  info: InfoIcon,\n};\n\n/**\n * The variant, for the two parts CSS cannot carry: the icon, which is a React element no selector\n * can produce, and the `Badge` the header wears, which takes it as a prop. Declared once on the\n * root and read here — not a second source of truth, which is why `DiagnosticSeverity` still takes\n * no variant of its own.\n */\nconst VariantContext = React.createContext<Variant>(\"destructive\");\n\n// A real `<ul>` rather than a div wearing `role=\"list\"`: an implicit role belongs to the element\n// and no merge can hand it away, which is the trap `Item` documents seen from the other side.\n//\n// **And an explicit `role=\"list\"` on top of it, because `list-none` takes the implicit one away.**\n// WebKit drops list semantics from a `<ul>` whose `list-style` is `none` — the whole list, items\n// included — so a styled list announces nothing in VoiceOver while `<ul>`/`<li>` sit right there in\n// the DOM. jsdom does not model that, so `getByRole(\"listitem\")` passed the entire time. The\n// element stays a `<ul>`; the role is the belt.\nexport const DiagnosticList = (props: React.ComponentProps<typeof ark.ul>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.ul\n      className={cn(\"flex w-full list-none flex-col gap-1.5\", className)}\n      role=\"list\"\n      {...rest}\n      data-slot={slot ?? \"diagnostic-list\"}\n    />\n  );\n};\n\nconst diagnosticVariants = tv({\n  base: [\n    \"group/diagnostic\",\n    \"w-full\",\n    \"rounded-xl border\",\n    \"text-card-foreground text-sm\",\n  ],\n  variants: {\n    /**\n     * **The reference's surface, not a coloured rail.**\n     *\n     * This used to be `border-s-2` in the family's colour over a neutral `bg-foreground/14` — a card with\n     * a bar down one edge, which is a shape that appears nowhere in Shark UI and nowhere else in\n     * this library. It is the generic callout, and it is what made a diagnostic read as machine\n     * furniture rather than as one of these components.\n     *\n     * `Alert` is the surface a message with a severity has here, and these are its exact steps:\n     * the wash at `-a3`, the whole outline at `-a6`, the glyph at the family. It stacks — the\n     * reference stacks alerts, and the argument that six of them would read as decoration was made\n     * about the rail, not about this.\n     */\n    variant: {\n      destructive: [\"bg-destructive/7\", \"border-destructive/30\"],\n      warning: [\"bg-warning/7\", \"border-warning/30\"],\n      info: [\"bg-info/7\", \"border-info/30\"],\n    },\n  },\n  defaultVariants: {\n    variant: \"destructive\",\n  },\n});\n\n// `asChild` is consumed here — the element is the `<li>` — so it is not a prop a caller may pass.\nexport interface DiagnosticProps\n  extends Omit<React.ComponentProps<typeof Collapsible>, \"asChild\">,\n    VariantProps<typeof diagnosticVariants> {}\n\n/**\n * One diagnostic, collapsed to its header until it is opened. Open state, animation and the\n * trigger/content ARIA come from Ark's Collapsible, so `defaultOpen`, `open` and `onOpenChange`\n * pass through unchanged — the machine's root is handed to the `<li>` through `asChild`, which is\n * how a diagnostic is a real item of `DiagnosticList`'s `<ul>` and a collapsible at the same time.\n *\n * `variant` is written once, here. Repeating it as a prop on the badge is how the two drift.\n */\nexport const Diagnostic = (props: DiagnosticProps) => {\n  const { variant = \"destructive\", className, children, slot, ...rest } = props;\n\n  return (\n    <VariantContext.Provider value={variant}>\n      <Collapsible {...rest} asChild>\n        <ark.li\n          className={cn(diagnosticVariants({ variant }), className)}\n          data-slot={slot ?? \"diagnostic\"}\n          data-variant={variant}\n        >\n          {children}\n        </ark.li>\n      </Collapsible>\n    </VariantContext.Provider>\n  );\n};\n\n/**\n * One line **until the caller says otherwise**, and it was `flex-nowrap` — which is not the same\n * thing and cost the message.\n *\n * The argument for nowrap was real: a header that wraps turns a list of six into six different\n * shapes, and the message that overflows is the one `DiagnosticDescription` repeats in full once the\n * row is open. What it did not survive is a narrow column. Measured on the `metadata-form` showcase,\n * whose findings panel is 24 % of the workspace: **a 143 px header, with the title 0 px wide and\n * starting at x=215** — 72 px past its own right edge. The severity, the source and the trigger are\n * all `shrink-0`, so they take the width and `DiagnosticTitle`'s `flex-1` shrinks to nothing. Not\n * truncated with an ellipsis: gone, and the row said only *This field is required.* three times over\n * with nothing to tell the three apart.\n *\n * `flex-wrap` changes nothing for a header that fits, and nothing for a wide list either: the title\n * is `basis-0`, so it never forces a break on its own. What it does is make `basis-full` on the\n * title mean what a reader would expect — *this goes on its own line* — which is what the showcase\n * had already written, with a comment claiming this component wrapped. It did not. Now it does, and\n * an item that cannot fit wraps instead of overflowing the box.\n */\nexport const DiagnosticHeader = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"flex w-full min-w-0 flex-wrap items-center gap-2 px-3 py-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"diagnostic-header\"}\n    />\n  );\n};\n\n/**\n * The severity, as an icon and whatever word the call site gives it. The icon comes from the root\n * and is not the caller's to pass; the text is.\n *\n * **It is a `Badge`**, and it used to be a `Badge` respelled: `h-5 min-w-5 px-1.5 rounded-md\n * font-medium text-xs` beside three `group-data-[severity=…]` lines that repainted, by hand, the\n * three soft variants `Badge` already ships. `Tool`'s state chip has always used the real one.\n * Nothing is lost by the swap — the size is `Badge`'s `sm`, the fills are the same tokens — and the\n * three selector lines go with it.\n */\nexport const DiagnosticSeverity = (props: React.ComponentProps<typeof Badge>) => {\n  const { className, children, slot, ...rest } = props;\n  const variant = React.useContext(VariantContext);\n  const Icon = VARIANT_ICON[variant];\n\n  return (\n    <Badge\n      className={cn(\"shrink-0\", className)}\n      size=\"sm\"\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"diagnostic-severity\"}\n    >\n      <Icon aria-hidden=\"true\" />\n      {children}\n    </Badge>\n  );\n};\n\nexport const DiagnosticTitle = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"min-w-0 flex-1 truncate font-medium text-sm leading-snug\",\n        // Opening a row is the one moment the whole message is worth more than the alignment.\n        \"group-data-[state=open]/diagnostic:whitespace-normal\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"diagnostic-title\"}\n    />\n  );\n};\n\n// What produced the diagnostic — a shape name, a rule id. Monospace because it is an identifier\n// somebody has to type back into a tool, not prose.\nexport const DiagnosticSource = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"shrink-0 whitespace-nowrap font-mono text-muted-foreground text-xs max-sm:hidden\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"diagnostic-source\"}\n    />\n  );\n};\n\nexport const DiagnosticActions = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"flex shrink-0 items-center gap-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"diagnostic-actions\"}\n    />\n  );\n};\n\nexport const DiagnosticTrigger = (props: React.ComponentProps<typeof CollapsibleTrigger>) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        \"inline-flex items-center justify-center gap-1\",\n        // WCAG 2.5.8 asks 24×24 CSS pixels, and every `rem` here is measured against a root the\n        // density axis sets — 14px at compact, where `min-h-6` would be 21. `DiagnosticFrame`'s\n        // floor is the same number for the same reason.\n        \"min-h-[24px] min-w-[24px] px-2\",\n        \"rounded-md font-medium text-muted-foreground text-xs tabular-nums\",\n        \"hover:bg-accent hover:text-accent-foreground\",\n        \"outline-none focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0\",\n        className\n      )}\n      {...rest}\n      slot={slot ?? \"diagnostic-trigger\"}\n    >\n      {children}\n      <CollapsibleIndicator />\n    </CollapsibleTrigger>\n  );\n};\n\nexport const DiagnosticContent = (props: React.ComponentProps<typeof CollapsibleContent>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <CollapsibleContent\n      className={cn(\"flex flex-col gap-2 border-t px-3 pt-2.5 pb-2.5\", className)}\n      {...rest}\n      slot={slot ?? \"diagnostic-content\"}\n    />\n  );\n};\n\nexport const DiagnosticDescription = (props: React.ComponentProps<typeof ark.p>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.p\n      className={cn(\"text-muted-foreground text-sm leading-normal\", className)}\n      {...rest}\n      data-slot={slot ?? \"diagnostic-description\"}\n    />\n  );\n};\n\n// Not a list, deliberately, and `DiagnosticList`'s `<ul>` is the contrast: a frame is a `<button>`\n// whenever it can be pressed, so it can be neither an `<li>` nor a `role=\"listitem\"` without losing\n// the role it already has — the trap `Item` documents.\nexport const DiagnosticFrames = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    // Pulled out by the frame's own padding, so a frame's text lines up with the description above\n    // it and its hover fill is a full-width row rather than an inset one.\n    <ark.div\n      className={cn(\"-ms-2 -me-2 flex flex-col\", className)}\n      {...rest}\n      data-slot={slot ?? \"diagnostic-frames\"}\n    />\n  );\n};\n\nconst diagnosticFrameVariants = tv({\n  base: [\n    \"flex w-full items-center gap-1.5\",\n    \"min-h-[24px] rounded-md px-2 py-1\",\n    \"text-start font-mono text-xs\",\n    \"[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[button&]:cursor-pointer [button&]:hover:bg-accent [button&]:hover:text-accent-foreground\",\n    \"[button&]:outline-none [button&]:focus-visible:ring-[3px] [button&]:focus-visible:ring-ring\",\n  ],\n  variants: {\n    // Two channels, so the distinction survives a reader who is scanning rather than reading: the\n    // row drops a tier, and the file loses the weight that marks an authored position.\n    //\n    // The tier is `--muted-foreground` and not `--faint`, which is what a dimmed thing usually\n    // reaches for here: `--faint` is solved against the page, and a diagnostic is a wash over it.\n    // Measured 2026-08 over the six documents in `packages/theme/palettes`, both modes: faint on\n    // that surface is 3.96–6.62:1 and lands under WCAG AA's 4.5 in seven of the twelve;\n    // muted-foreground is 6.54–9.48 in all of them. Every dimmed part below reads the same way.\n    //\n    // **Those numbers were taken against `bg-foreground/14`, and the card is now `bg-destructive/7` /\n    // `-warning-a3` / `-info-a3`** — the surface moved with the `Alert` alignment. The direction\n    // is not in doubt (a family wash at `-a3` is a comparably light tint, and the gap between the\n    // two tiers is ~2.5 stops), but the figures no longer describe what is painted. Re-measuring\n    // over the three washes on both modes is owed, and until it happens this is a claim about a\n    // surface that has been replaced.\n    secondary: {\n      true: [\"text-muted-foreground\", \"[&_[data-slot=diagnostic-frame-file]]:font-normal\"],\n      false: \"text-foreground\",\n    },\n  },\n  defaultVariants: {\n    secondary: false,\n  },\n});\n\nexport interface DiagnosticFrameProps\n  extends Omit<React.ComponentProps<typeof ark.button>, \"onSelect\" | \"children\"> {\n  /** The file, graph or node the position is in. */\n  path: string;\n  line?: number;\n  column?: number;\n  /** A short note beside the position — the property path, the frame's function. */\n  label?: string;\n  /**\n   * An inferred or upstream position rather than one the author wrote — the counterpart of a\n   * `node_modules` frame. Dimmed, never hidden: it is usually the frame that explains the others.\n   */\n  secondary?: boolean;\n  onSelect?: () => void;\n}\n\n/**\n * One position, read as a location rather than a string: the directory recedes, the file carries\n * the weight, and the line and column are tabular so a column of frames lines up.\n *\n * With `onSelect` it is a real `<button>` wearing the arrow that says it goes somewhere; without\n * one it is static text, because a control that does nothing is announced as a control and answers\n * to nothing.\n */\nexport const DiagnosticFrame = (props: DiagnosticFrameProps) => {\n  const { path, line, column, label, secondary = false, onSelect, className, slot, ...rest } = props;\n\n  const cut = path.lastIndexOf(\"/\") + 1;\n  const directory = path.slice(0, cut);\n  const file = path.slice(cut);\n  const position =\n    line === undefined ? \"\" : column === undefined ? `:${line}` : `:${line}:${column}`;\n\n  const body = (\n    <>\n      <ark.span className=\"flex min-w-0 items-baseline\">\n        {directory ? (\n          <ark.span className=\"truncate text-muted-foreground\" data-slot=\"diagnostic-frame-directory\">\n            {directory}\n          </ark.span>\n        ) : null}\n        <ark.span className=\"shrink-0 font-medium\" data-slot=\"diagnostic-frame-file\">\n          {file}\n        </ark.span>\n        {position ? (\n          <ark.span\n            className=\"shrink-0 text-muted-foreground tabular-nums\"\n            data-slot=\"diagnostic-frame-position\"\n          >\n            {position}\n          </ark.span>\n        ) : null}\n      </ark.span>\n      {label || onSelect ? (\n        <ark.span className=\"ms-auto flex shrink-0 items-center gap-1.5 font-sans text-muted-foreground\">\n          {label ? <ark.span data-slot=\"diagnostic-frame-label\">{label}</ark.span> : null}\n          {onSelect ? <ArrowUpRightIcon aria-hidden=\"true\" /> : null}\n        </ark.span>\n      ) : null}\n    </>\n  );\n\n  const shared = {\n    className: cn(diagnosticFrameVariants({ secondary }), className),\n    \"data-secondary\": secondary ? \"\" : undefined,\n  };\n\n  if (onSelect) {\n    return (\n      // Ark ships no equivalent, so the ARIA contract is ours: the button is named by the position\n      // and its label joined with a dash. Without it the name is the spans run together —\n      // \"ledgerQ-1058:12:7as claimed\" — because the rhythm that separates them is visual only.\n      <ark.button\n        aria-label={label ? `${path}${position} — ${label}` : `${path}${position}`}\n        onClick={onSelect}\n        type=\"button\"\n        {...shared}\n        {...rest}\n        data-slot={slot ?? \"diagnostic-frame\"}\n      >\n        {body}\n      </ark.button>\n    );\n  }\n\n  return (\n    // One props type cannot describe two elements, and `ref` is the member that conflicts: which\n    // element this is depends on `onSelect`, which the type system sees no earlier than we do.\n    <ark.span\n      {...shared}\n      {...(rest as React.ComponentProps<typeof ark.span>)}\n      data-slot={slot ?? \"diagnostic-frame\"}\n    >\n      {body}\n    </ark.span>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA+BA;AAAuD;AACxC;AACJ;AAEX;AAmBE;AAEA;AACE;AAAK;AAAJ;AACkE;AAC5D;AACD;AACe;AAAA;AAGzB;AAE8B;AACtB;AACJ;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcC;AACkD;AACZ;AACT;AAAA;AACtC;AAEe;AACN;AAEb;AAgBE;AAEA;AAGM;AAAK;AAAJ;AACyD;AACrC;AACL;AAEb;AAAA;AAKX;AAsBE;AAEA;AACE;AAAK;AAAJ;AACsF;AACjF;AACe;AAAA;AAGzB;AAaE;AAIA;AACE;AAAC;AAAA;AACoC;AAC9B;AACL;AACI;AACU;AAEd;AAAyB;AACxB;AAAA;AAAA;AAGP;AAGE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AAAA;AAEA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAAK;AAAJ;AAC4D;AACvD;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AAAA;AAAA;AAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACU;AAEb;AAAA;AACqB;AAAA;AAAA;AAG5B;AAGE;AAEA;AACE;AAAC;AAAA;AAC2E;AACtE;AACU;AAAA;AAGpB;AAGE;AAEA;AACE;AAAK;AAAJ;AACwE;AACnE;AACe;AAAA;AAGzB;AAME;AAEA;AAAA;AAAA;AAAA;AAGE;AAAK;AAAJ;AACqD;AAChD;AACe;AAAA;AAAA;AAGzB;AAEmC;AAC3B;AACJ;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBG;AAC0E;AAC5E;AAAA;AACT;AAEe;AACJ;AAEf;AA2BE;AAUI;AACG;AAIG;AAGJ;AAEE;AAAK;AAAJ;AACW;AACA;AAET;AAAA;AAED;AACN;AAGK;AAA0E;AACrB;AAEtD;AAIO;AACkD;AAC5B;AAGrC;AAAI;AAAA;AAAA;AAAA;AAKA;AAAK;AAAJ;AACyE;AAC/D;AACJ;AACD;AACA;AACe;AAElB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQL;AAAK;AAAJ;AACK;AACC;AACc;AAElB;AAAA;AAAA;AAGP;;;;;;;;;;;;;;;"}