@adea-ai/ui 0.60.4 → 0.61.1

package/dist/components/ui/sheet/sheet.js

@@ -0,0 +1,118 @@
+import { cn } from "../../../lib/utils.js";
+import { cva } from "../../../lib/variants.js";
+import { DialogOverlay } from "../dialog/dialog.js";
+import { createComponent, memo, mergeProps, spread, template } from "solid-js/web";
+import { X } from "lucide-solid";
+import { Show, splitProps } from "solid-js";
+import { Dialog } from "@kobalte/core/dialog";
+//#region src/components/ui/sheet/sheet.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=sheet-header>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=sheet-body>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=sheet-footer>`);
+/**
+* Sheet.
+*
+* A dialog anchored to an edge of the window rather than centred. Use it when
+* the content is a *panel beside* the work — a details inspector, a filter rail,
+* a settings flyout — so the user keeps the context it belongs to in view.
+* A centred dialog interrupts; a sheet is inspected.
+*
+* `side` decides which edge; the panel is a full-height column for `start` and
+* `end`, and a full-width row for `top` and `bottom`. The slide-in direction
+* follows from the side, so a caller never pairs them by hand.
+*/
+var sheetVariants = cva("bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col gap-4 border-border shadow-lg", {
+	variants: { side: {
+		top: "inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b data-expanded:slide-in-from-top data-closed:slide-out-to-top",
+		bottom: "inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom",
+		start: "inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e data-expanded:slide-in-from-left data-closed:slide-out-to-left",
+		end: "inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s data-expanded:slide-in-from-right data-closed:slide-out-to-right"
+	} },
+	defaultVariants: { side: "end" }
+});
+function SheetContent(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"side",
+		"children",
+		"closeButton"
+	]);
+	return createComponent(Dialog.Portal, { get children() {
+		return [createComponent(DialogOverlay, {}), createComponent(Dialog.Content, mergeProps({ get ["class"]() {
+			return cn(sheetVariants({ side: local.side }), "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200", "data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150", local.class);
+		} }, rest, { get children() {
+			return [memo(() => local.children), createComponent(Show, {
+				get when() {
+					return local.closeButton !== false;
+				},
+				get children() {
+					return createComponent(Dialog.CloseButton, {
+						"aria-label": "Close",
+						"class": "absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle",
+						get children() {
+							return local.closeButton ?? createComponent(X, { "class": "size-4" });
+						}
+					});
+				}
+			})];
+		} }))];
+	} });
+}
+function Sheet(props) {
+	return createComponent(Dialog, props);
+}
+function SheetTrigger(props) {
+	return createComponent(Dialog.Trigger, props);
+}
+function SheetCloseButton(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Dialog.CloseButton, mergeProps({ get ["class"]() {
+		return cn(local.class);
+	} }, rest));
+}
+function SheetHeader(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("flex flex-col gap-1.5 border-b border-border p-4 pe-12 text-start", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+function SheetBody(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("flex-1 overflow-y-auto px-4 pb-4", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+function SheetFooter(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return cn("flex items-center justify-end gap-2 border-t border-border p-4", local.class);
+		} }, rest), false, false);
+		return _el$3;
+	})();
+}
+function SheetTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Dialog.Title, mergeProps({ get ["class"]() {
+		return cn("text-sm leading-none font-semibold", local.class);
+	} }, rest));
+}
+function SheetDescription(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Dialog.Description, mergeProps({ get ["class"]() {
+		return cn("text-muted-foreground text-sm", local.class);
+	} }, rest));
+}
+//#endregion
+export { Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, sheetVariants };
+
+//# sourceMappingURL=sheet.js.map

package/dist/components/ui/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","X","ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","DialogOverlay","sheetVariants","variants","side","top","bottom","start","end","defaultVariants","SheetContentProps","Content","closeButton","Element","SheetContent","props","local","rest","_$createComponent","Portal","children","_$mergeProps","class","_$memo","when","CloseButton","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","SheetDescription","Description","_$createComponent","KobalteDialog","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import { Dialog as KobalteDialog } from '@kobalte/core/dialog'\nimport { X } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { DialogOverlay } from '../dialog/dialog'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n */\nconst sheetVariants = cva(\n  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col gap-4 border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom:\n          'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start:\n          'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n    },\n    defaultVariants: { side: 'end' },\n  }\n)\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialog.Content> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'side', 'children', 'closeButton'])\n\n  return (\n    <KobalteDialog.Portal>\n      <DialogOverlay />\n      <KobalteDialog.Content\n        class={cn(\n          sheetVariants({ side: local.side }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          <KobalteDialog.CloseButton\n            aria-label=\"Close\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialog.Content>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\nexport function SheetHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn('flex flex-col gap-1.5 border-b border-border p-4 pe-12 text-start', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('flex-1 overflow-y-auto px-4 pb-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn('flex items-center justify-end gap-2 border-t border-border p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Title class={cn('text-sm leading-none font-semibold', local.class)} {...rest} />\n  )\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":"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"}

package/dist/components/ui/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './skeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/ui/skeleton/skeleton.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'solid-js';
+/**
+ * Skeleton.
+ *
+ * A placeholder that stands in for content whose shape is already known. It
+ * carries `aria-hidden` and no text, because the loading state is announced by
+ * the region that owns it — a skeleton that says "loading" would announce it
+ * once per bar.
+ *
+ * The shimmer is a background animation rather than a moving gradient element
+ * so it costs one paint and no layout, and it stops under `prefers-reduced-motion`
+ * (base.css).
+ */
+export declare function Skeleton(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/ui/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAWpD"}

package/dist/components/ui/skeleton/skeleton.js

@@ -0,0 +1,31 @@
+import { cn } from "../../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/skeleton/skeleton.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=skeleton aria-hidden=true>`);
+/**
+* Skeleton.
+*
+* A placeholder that stands in for content whose shape is already known. It
+* carries `aria-hidden` and no text, because the loading state is announced by
+* the region that owns it — a skeleton that says "loading" would announce it
+* once per bar.
+*
+* The shimmer is a background animation rather than a moving gradient element
+* so it costs one paint and no layout, and it stops under `prefers-reduced-motion`
+* (base.css).
+*/
+function Skeleton(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("bg-muted animate-shimmer rounded-md", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/components/ui/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":["ComponentProps","splitProps","cn","Skeleton","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","_$mergeProps"],"sources":["../../../../src/components/ui/skeleton/skeleton.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Skeleton.\n *\n * A placeholder that stands in for content whose shape is already known. It\n * carries `aria-hidden` and no text, because the loading state is announced by\n * the region that owns it — a skeleton that says \"loading\" would announce it\n * once per bar.\n *\n * The shimmer is a background animation rather than a moving gradient element\n * so it costs one paint and no layout, and it stops under `prefers-reduced-motion`\n * (base.css).\n */\nexport function Skeleton(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <div\n      data-slot=\"skeleton\"\n      aria-hidden=\"true\"\n      class={cn('bg-muted animate-shimmer rounded-md', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,SAAgBG,SAASC,OAA8B;CACrD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAIWR,GAAG,uCAAuCG,MAAMM,KAAK;EAAC,EAAA,GACzDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/ui/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider, type SliderProps } from './slider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA"}

package/dist/components/ui/slider/slider.d.ts

@@ -0,0 +1,22 @@
+import { Slider as KobalteSlider } from '@kobalte/core/slider';
+import type { ComponentProps } from 'solid-js';
+/**
+ * Slider.
+ *
+ * For a value on a continuum where position matters more than precision — a
+ * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so
+ * the value is both adjustable *and* readable; a bare slider is a control
+ * nobody can set exactly.
+ *
+ * Kobalte handles pointer capture, keyboard stepping and the ARIA value
+ * wiring; this paints the track, fill and thumb.
+ */
+export type SliderProps = ComponentProps<typeof KobalteSlider> & {
+    trackClass?: string;
+    rangeClass?: string;
+    thumbClass?: string;
+    /** Show the current value beside the thumb while dragging. */
+    valueLabel?: boolean;
+};
+export declare function Slider(props: SliderProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/ui/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAwDxC"}

package/dist/components/ui/slider/slider.js

@@ -0,0 +1,59 @@
+import { cn } from "../../../lib/utils.js";
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+import { Slider } from "@kobalte/core/slider";
+//#region src/components/ui/slider/slider.tsx
+function Slider$1(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"trackClass",
+		"rangeClass",
+		"thumbClass",
+		"valueLabel",
+		"children",
+		"aria-label",
+		"aria-labelledby"
+	]);
+	return createComponent(Slider, mergeProps({ get ["class"]() {
+		return cn("relative flex touch-none flex-col justify-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full", "data-[disabled]:opacity-50", local.class);
+	} }, rest, { get children() {
+		return [
+			createComponent(Slider.Track, {
+				get ["class"]() {
+					return cn("bg-input relative grow overflow-hidden rounded-full", "data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", local.trackClass);
+				},
+				get children() {
+					return createComponent(Slider.Fill, { get ["class"]() {
+						return cn("bg-primary absolute rounded-full", "data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", local.rangeClass);
+					} });
+				}
+			}),
+			memo(() => local.children),
+			createComponent(Slider.Thumb, {
+				get ["aria-label"]() {
+					return local["aria-label"];
+				},
+				get ["aria-labelledby"]() {
+					return local["aria-labelledby"];
+				},
+				get ["class"]() {
+					return cn("border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs", "transition-[color,box-shadow] ease-out outline-none", "hover:ring-4 hover:ring-primary-subtle", "focus-visible:ring-4 focus-visible:ring-primary-subtle", local.thumbClass);
+				},
+				get children() {
+					return createComponent(Show, {
+						get when() {
+							return local.valueLabel;
+						},
+						get children() {
+							return createComponent(Slider.ValueLabel, { "class": "bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" });
+						}
+					});
+				}
+			})
+		];
+	} }));
+}
+//#endregion
+export { Slider$1 as Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/components/ui/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["Slider","KobalteSlider","ComponentProps","Show","splitProps","cn","SliderProps","trackClass","rangeClass","thumbClass","valueLabel","props","local","rest","_$createComponent","_$mergeProps","class","children","Track","Fill","_$memo","Thumb","aria-label","aria-labelledby","when","ValueLabel","Slider","_$createComponent","KobalteSlider","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/slider/slider.tsx"],"sourcesContent":["import { Slider as KobalteSlider } from '@kobalte/core/slider'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Slider.\n *\n * For a value on a continuum where position matters more than precision — a\n * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so\n * the value is both adjustable *and* readable; a bare slider is a control\n * nobody can set exactly.\n *\n * Kobalte handles pointer capture, keyboard stepping and the ARIA value\n * wiring; this paints the track, fill and thumb.\n */\nexport type SliderProps = ComponentProps<typeof KobalteSlider> & {\n  trackClass?: string\n  rangeClass?: string\n  thumbClass?: string\n  /** Show the current value beside the thumb while dragging. */\n  valueLabel?: boolean\n}\n\nexport function Slider(props: SliderProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'rangeClass',\n    'thumbClass',\n    'valueLabel',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n  ])\n\n  return (\n    <KobalteSlider\n      class={cn(\n        'relative flex touch-none flex-col justify-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',\n        'data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteSlider.Track\n        class={cn(\n          'bg-input relative grow overflow-hidden rounded-full',\n          'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',\n          'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',\n          local.trackClass\n        )}\n      >\n        <KobalteSlider.Fill\n          class={cn(\n            'bg-primary absolute rounded-full',\n            'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',\n            local.rangeClass\n          )}\n        />\n      </KobalteSlider.Track>\n      {local.children}\n      <KobalteSlider.Thumb\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n        class={cn(\n          'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',\n          'transition-[color,box-shadow] ease-out outline-none',\n          'hover:ring-4 hover:ring-primary-subtle',\n          'focus-visible:ring-4 focus-visible:ring-primary-subtle',\n          local.thumbClass\n        )}\n      >\n        <Show when={local.valueLabel}>\n          <KobalteSlider.ValueLabel class=\"bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums\" />\n        </Show>\n      </KobalteSlider.Thumb>\n    </KobalteSlider>\n  )\n}\n"],"mappings":";;;;;AAwBA,SAAgBA,SAAOW,OAAoB;CACzC,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,OAAAG,gBACGb,QAAac,WAAA,EAAA,KAAA,WAAA;EAAA,OACLV,GACL,gEACA,2GACA,8BACAO,MAAMI,KACR;CAAC,EAAA,GACGH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA;GAAAH,gBAEPb,OAAciB,OAAK;IAAA,KAAA,WAAA;KAAA,OACXb,GACL,uDACA,4EACA,wEACAO,MAAML,UACR;IAAC;IAAA,IAAAU,WAAA;KAAA,OAAAH,gBAEAb,OAAckB,MAAI,EAAA,KAAA,WAAA;MAAA,OACVd,GACL,oCACA,2EACAO,MAAMJ,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAY,WAGJR,MAAMK,QAAQ;GAAAH,gBACdb,OAAcoB,OAAK;IAAA,KAAA,gBAAA;KAAA,OACNT,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;IAAA,KAAA,WAAA;KAAA,OAClCP,GACL,sFACA,uDACA,0CACA,0DACAO,MAAMH,UACR;IAAC;IAAA,IAAAQ,WAAA;KAAA,OAAAH,gBAEAX,MAAI;MAAA,IAACqB,OAAI;OAAA,OAAEZ,MAAMF;MAAU;MAAA,IAAAO,WAAA;OAAA,OAAAH,gBACzBb,OAAcwB,YAAU,EAAA,SAAA,0IAAA,CAAA;MAAA;KAAA,CAAA;IAAA;GAAA,CAAA;EAAA;CAAA,EAAA,CAAA,CAAA;AAKnC"}

package/dist/components/ui/spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner, type SpinnerProps } from './spinner';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/ui/spinner/spinner.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'solid-js';
+import { type VariantProps } from '#lib/variants';
+/**
+ * Spinner.
+ *
+ * A determinate-length activity indicator with no progress to report. When
+ * there *is* progress, use Progress instead — a spinner next to a known
+ * percentage is a lie about what the app knows.
+ *
+ * The glyph spins continuously, so it is the one thing in the system that
+ * keeps moving under `prefers-reduced-motion`; base.css only shortens
+ * `animation-duration` for the *entrance* animations and leaves this loop
+ * alone. A frozen spinner reads as a hang, which is worse than motion.
+ */
+declare const spinnerVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SpinnerVariants = VariantProps<typeof spinnerVariants>;
+export type SpinnerProps = Omit<ComponentProps<'svg'>, 'size'> & SpinnerVariants & {
+    /** An accessible name. Defaults to "Loading"; pass `false` to hide it. */
+    label?: string | false;
+};
+export declare function Spinner(props: SpinnerProps): import("solid-js").JSX.Element;
+export {};
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/ui/spinner/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/spinner/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,eAAe;;8EAWnB,CAAA;AAEF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,GAC5D,eAAe,GAAG;IAChB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACvB,CAAA;AAEH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,kCAkB1C"}

package/dist/components/ui/spinner/spinner.js

@@ -0,0 +1,57 @@
+import { cn } from "../../../lib/utils.js";
+import { cva } from "../../../lib/variants.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { LoaderCircle } from "lucide-solid";
+import { splitProps } from "solid-js";
+//#region src/components/ui/spinner/spinner.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=visually-hidden>`);
+/**
+* Spinner.
+*
+* A determinate-length activity indicator with no progress to report. When
+* there *is* progress, use Progress instead — a spinner next to a known
+* percentage is a lie about what the app knows.
+*
+* The glyph spins continuously, so it is the one thing in the system that
+* keeps moving under `prefers-reduced-motion`; base.css only shortens
+* `animation-duration` for the *entrance* animations and leaves this loop
+* alone. A frozen spinner reads as a hang, which is worse than motion.
+*/
+var spinnerVariants = cva("animate-spin shrink-0", {
+	variants: { size: {
+		xs: "size-3",
+		sm: "size-3.5",
+		md: "size-4",
+		lg: "size-5",
+		xl: "size-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+function Spinner(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"size",
+		"label"
+	]);
+	return [createComponent(LoaderCircle, mergeProps({
+		"data-slot": "spinner",
+		role: "status",
+		get ["aria-label"]() {
+			return memo(() => local.label === false)() ? void 0 : local.label ?? "Loading";
+		},
+		get ["aria-hidden"]() {
+			return local.label === false ? "true" : void 0;
+		},
+		get ["class"]() {
+			return cn(spinnerVariants({ size: local.size }), local.class);
+		}
+	}, rest)), memo(() => memo(() => local.label === false)() ? null : (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => local.label ?? "Loading");
+		return _el$;
+	})())];
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/components/ui/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":["LoaderCircle","ComponentProps","splitProps","cva","VariantProps","cn","spinnerVariants","variants","size","xs","sm","md","lg","xl","defaultVariants","SpinnerVariants","SpinnerProps","Omit","label","Spinner","props","local","rest","_$createComponent","_$mergeProps","role","aria-label","_$memo","undefined","aria-hidden","class","_el$","_tmpl$","_$insert","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/spinner/spinner.tsx"],"sourcesContent":["import { LoaderCircle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Spinner.\n *\n * A determinate-length activity indicator with no progress to report. When\n * there *is* progress, use Progress instead — a spinner next to a known\n * percentage is a lie about what the app knows.\n *\n * The glyph spins continuously, so it is the one thing in the system that\n * keeps moving under `prefers-reduced-motion`; base.css only shortens\n * `animation-duration` for the *entrance* animations and leaves this loop\n * alone. A frozen spinner reads as a hang, which is worse than motion.\n */\nconst spinnerVariants = cva('animate-spin shrink-0', {\n  variants: {\n    size: {\n      xs: 'size-3',\n      sm: 'size-3.5',\n      md: 'size-4',\n      lg: 'size-5',\n      xl: 'size-6',\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\ntype SpinnerVariants = VariantProps<typeof spinnerVariants>\n\nexport type SpinnerProps = Omit<ComponentProps<'svg'>, 'size'> &\n  SpinnerVariants & {\n    /** An accessible name. Defaults to \"Loading\"; pass `false` to hide it. */\n    label?: string | false\n  }\n\nexport function Spinner(props: SpinnerProps) {\n  const [local, rest] = splitProps(props, ['class', 'size', 'label'])\n\n  return (\n    <>\n      <LoaderCircle\n        data-slot=\"spinner\"\n        role=\"status\"\n        aria-label={local.label === false ? undefined : (local.label ?? 'Loading')}\n        aria-hidden={local.label === false ? 'true' : undefined}\n        class={cn(spinnerVariants({ size: local.size }), local.class)}\n        {...rest}\n      />\n      {local.label === false ? null : (\n        <span class=\"visually-hidden\">{local.label ?? 'Loading'}</span>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,IAAMM,kBAAkBH,IAAI,yBAAyB;CACnDI,UAAU,EACRC,MAAM;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;CACN,EACF;CACAC,iBAAiB,EAAEN,MAAM,KAAK;AAChC,CAAC;AAUD,SAAgBW,QAAQC,OAAqB;CAC3C,MAAM,CAACC,OAAOC,QAAQpB,WAAWkB,OAAO;EAAC;EAAS;EAAQ;CAAO,CAAC;CAElE,OAAA,CAAAG,gBAEKvB,cAAYwB,WAAA;EAAA,aAAA;EAEXC,MAAI;EAAA,KAAA,gBAAA;GAAA,OACQE,WAAAN,MAAMH,UAAU,KAAK,CAAA,CAAA,IAAGU,KAAAA,IAAaP,MAAMH,SAAS;EAAU;EAAA,KAAA,iBAAA;GAAA,OAC7DG,MAAMH,UAAU,QAAQ,SAASU,KAAAA;EAAS;EAAA,KAAA,WAAA;GAAA,OAChDvB,GAAGC,gBAAgB,EAAEE,MAAMa,MAAMb,KAAK,CAAC,GAAGa,MAAMS,KAAK;EAAC;CAAA,GACzDR,IAAI,CAAA,GAAAK,WAETA,WAAAN,MAAMH,UAAU,KAAK,CAAA,CAAA,IAAG,cAAI;EAAA,IAAAa,OAAAC,OAAA;EAAAC,OAAAF,YACIV,MAAMH,SAAS,SAAS;EAAA,OAAAa;CAAA,EAAA,CAAA,CACxD,CAAA;AAGP"}

package/dist/components/ui/status-chip/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusChip, StatusList, statusDotVariants, type StatusChipProps, type StatusEntry, type StatusTone, } from './status-chip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/status-chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/status-chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,eAAe,CAAA"}

package/dist/components/ui/status-chip/status-chip.d.ts

@@ -0,0 +1,70 @@
+import { type ComponentProps, type JSX } from 'solid-js';
+/**
+ * StatusChip.
+ *
+ * A state, said in one word, with the reason available on hover. It exists
+ * because a status readout has three parts that are always the same three parts —
+ * a tone, a label, and the detail that justifies the label — and rendering them
+ * ad hoc produces the two failures this component is here to prevent: a colour
+ * with no text (unreadable to anyone who cannot see it) and a bare word with no
+ * explanation ("Needs configuration" — of what?).
+ *
+ * The tones are deliberately not a rainbow. Six cover what a status can actually
+ * mean:
+ *
+ * - `neutral` — fine, and there is nothing to say about it.
+ * - `success` — a check passed, a capability is ready, a job finished.
+ * - `warning` — degraded, or needs a decision from the user.
+ * - `danger` — blocked, failed, unrecoverable without intervention.
+ * - `info` — in flight or scheduled; work is happening, nothing is wrong.
+ * - `unknown` — the honest absence of information.
+ *
+ * `unknown` is not the same as `neutral`, and collapsing them is the mistake
+ * worth avoiding: "this is idle" and "we have not been told yet" are different
+ * facts, and a product that shows the second as the first is lying quietly. The
+ * ring is hollow so it also reads as different in greyscale.
+ *
+ * The dot is `aria-hidden` and the label carries the meaning, so a tone is never
+ * the only signal.
+ */
+export declare const statusDotVariants: (props?: ({
+    tone?: "success" | "warning" | "info" | "neutral" | "danger" | "unknown" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown';
+export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
+    tone?: StatusTone;
+    label: string;
+    /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */
+    detail?: string;
+    /** A trailing slot: a timestamp, a retry affordance, a count. */
+    trailing?: JSX.Element;
+};
+export declare function StatusChip(props: StatusChipProps): JSX.Element;
+export type StatusEntry = Readonly<{
+    /** A stable key for the row. */
+    id: string;
+    /** What is being reported — "Configuration", "Runtime", "Sync". */
+    name: string;
+    tone: StatusTone;
+    label: string;
+    detail?: string;
+}>;
+/**
+ * StatusList.
+ *
+ * The several-facts-about-one-thing shape: an agent with a configuration state, a
+ * runtime state and an activity state; a service with a build, a deploy and a
+ * health check. It is a definition list rather than a table because there is no
+ * column to sort or compare — the rows are facets of a single subject, and a
+ * screen reader should hear them as such.
+ *
+ * Fixed width on the name column is what makes a column of these scannable; the
+ * rows line up without a table's semantics.
+ */
+export declare function StatusList(props: {
+    entries: readonly StatusEntry[];
+    class?: string;
+    /** Hide the name column and show only the chips — for a compact badge strip. */
+    compact?: boolean;
+}): JSX.Element;
+//# sourceMappingURL=status-chip.d.ts.map

package/dist/components/ui/status-chip/status-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB;;8EAY5B,CAAA;AAWF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1F,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA8BhD;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC,CAAA;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,eAeA"}

package/dist/components/ui/status-chip/status-chip.js

@@ -0,0 +1,140 @@
+import { cn } from "../../../lib/utils.js";
+import { cva } from "../../../lib/variants.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { className, createComponent, effect, insert, mergeProps, spread, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/ui/status-chip/status-chip.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span><span aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<dl>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<dt class=text-muted-foreground>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div class="flex items-baseline justify-between gap-4"><dd>`);
+/**
+* StatusChip.
+*
+* A state, said in one word, with the reason available on hover. It exists
+* because a status readout has three parts that are always the same three parts —
+* a tone, a label, and the detail that justifies the label — and rendering them
+* ad hoc produces the two failures this component is here to prevent: a colour
+* with no text (unreadable to anyone who cannot see it) and a bare word with no
+* explanation ("Needs configuration" — of what?).
+*
+* The tones are deliberately not a rainbow. Six cover what a status can actually
+* mean:
+*
+* - `neutral` — fine, and there is nothing to say about it.
+* - `success` — a check passed, a capability is ready, a job finished.
+* - `warning` — degraded, or needs a decision from the user.
+* - `danger` — blocked, failed, unrecoverable without intervention.
+* - `info` — in flight or scheduled; work is happening, nothing is wrong.
+* - `unknown` — the honest absence of information.
+*
+* `unknown` is not the same as `neutral`, and collapsing them is the mistake
+* worth avoiding: "this is idle" and "we have not been told yet" are different
+* facts, and a product that shows the second as the first is lying quietly. The
+* ring is hollow so it also reads as different in greyscale.
+*
+* The dot is `aria-hidden` and the label carries the meaning, so a tone is never
+* the only signal.
+*/
+var statusDotVariants = cva("size-2 shrink-0 rounded-full", {
+	variants: { tone: {
+		neutral: "bg-muted-foreground",
+		success: "bg-success",
+		warning: "bg-warning",
+		danger: "bg-destructive",
+		info: "bg-info",
+		unknown: "border border-muted-foreground bg-transparent"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+var labelTone = {
+	neutral: "text-foreground",
+	success: "text-success",
+	warning: "text-warning",
+	danger: "text-destructive",
+	info: "text-info",
+	unknown: "text-muted-foreground"
+};
+function StatusChip(props) {
+	const [local, rest] = splitProps(props, [
+		"tone",
+		"label",
+		"detail",
+		"trailing",
+		"class"
+	]);
+	const chip = (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap", labelTone[local.tone ?? "neutral"], local.class);
+		} }, rest), false, true);
+		insert(_el$, () => local.label, null);
+		insert(_el$, () => local.trailing, null);
+		effect(() => className(_el$2, statusDotVariants({ tone: local.tone })));
+		return _el$;
+	})();
+	return createComponent(Show, {
+		get when() {
+			return local.detail;
+		},
+		fallback: chip,
+		children: (detail) => createComponent(Tooltip, { get children() {
+			return [createComponent(TooltipTrigger, {
+				as: "span",
+				"class": "inline-flex",
+				children: chip
+			}), createComponent(TooltipContent, { get children() {
+				return detail();
+			} })];
+		} })
+	});
+}
+/**
+* StatusList.
+*
+* The several-facts-about-one-thing shape: an agent with a configuration state, a
+* runtime state and an activity state; a service with a build, a deploy and a
+* health check. It is a definition list rather than a table because there is no
+* column to sort or compare — the rows are facets of a single subject, and a
+* screen reader should hear them as such.
+*
+* Fixed width on the name column is what makes a column of these scannable; the
+* rows line up without a table's semantics.
+*/
+function StatusList(props) {
+	return (() => {
+		var _el$3 = _tmpl$2();
+		insert(_el$3, () => props.entries.map((entry) => (() => {
+			var _el$4 = _tmpl$4(), _el$6 = _el$4.firstChild;
+			insert(_el$4, createComponent(Show, {
+				get when() {
+					return !props.compact;
+				},
+				get children() {
+					var _el$5 = _tmpl$3();
+					insert(_el$5, () => entry.name);
+					return _el$5;
+				}
+			}), _el$6);
+			insert(_el$6, createComponent(StatusChip, {
+				get tone() {
+					return entry.tone;
+				},
+				get label() {
+					return entry.label;
+				},
+				get detail() {
+					return entry.detail;
+				}
+			}));
+			effect(() => className(_el$6, cn(!props.compact && "shrink-0")));
+			return _el$4;
+		})()));
+		effect(() => className(_el$3, cn("grid gap-2 text-sm", props.class)));
+		return _el$3;
+	})();
+}
+//#endregion
+export { StatusChip, StatusList, statusDotVariants };
+
+//# sourceMappingURL=status-chip.js.map