@blurrow/ui 0.2.0 → 0.2.1

package/dist/ShareButtons.js

@@ -0,0 +1,107 @@
+"use client";
+
+// ../../components/ui/ShareButtons.tsx
+import { useState, useCallback } from "react";
+import { ButtonGroup } from "./ButtonGroup.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LinkIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function XIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
+}
+function LinkedInIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) });
+}
+function ShareButtons({
+  url,
+  title,
+  className = ""
+}) {
+  const [copied, setCopied] = useState(false);
+  const shareUrl = url ?? (typeof window !== "undefined" ? window.location.href : "");
+  const shareTitle = title ?? "";
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [shareUrl]);
+  const handleTwitter = useCallback(() => {
+    const params = new URLSearchParams({
+      text: shareTitle,
+      url: shareUrl
+    });
+    window.open(
+      `https://x.com/intent/tweet?${params.toString()}`,
+      "_blank",
+      "noopener,noreferrer"
+    );
+  }, [shareUrl, shareTitle]);
+  const handleLinkedIn = useCallback(() => {
+    const params = new URLSearchParams({
+      url: shareUrl
+    });
+    window.open(
+      `https://www.linkedin.com/sharing/share-offsite/?${params.toString()}`,
+      "_blank",
+      "noopener,noreferrer"
+    );
+  }, [shareUrl]);
+  const keys = [
+    {
+      label: copied ? "Link copied" : "Copy link",
+      onClick: handleCopy,
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: ["animate-checkbox-in", copied ? "text-success-soft" : ""].join(" "), children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(LinkIcon, {}) }, String(copied)),
+        /* @__PURE__ */ jsx("span", { className: "w-[62px] text-left", children: copied ? "copied" : "copy link" })
+      ] }),
+      wide: true
+    },
+    { label: "Share on X", onClick: handleTwitter, content: /* @__PURE__ */ jsx(XIcon, {}), wide: false },
+    { label: "Share on LinkedIn", onClick: handleLinkedIn, content: /* @__PURE__ */ jsx(LinkedInIcon, {}), wide: false }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[12px] font-medium text-ink-muted lowercase mb-3", children: "Share" }),
+    /* @__PURE__ */ jsx(ButtonGroup, { label: "Share", items: keys }),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Link copied to clipboard" : "" })
+  ] });
+}
+export {
+  ShareButtons
+};
+//# sourceMappingURL=ShareButtons.js.map

package/dist/ShareButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/ShareButtons.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport { ButtonGroup } from \"./ButtonGroup\";\n\ninterface ShareButtonsProps {\n  url?: string;\n  title?: string;\n  className?: string;\n}\n\n\nfunction LinkIcon() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\" />\n      <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"13\" height=\"13\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n    </svg>\n  );\n}\n\nfunction LinkedInIcon() {\n  return (\n    <svg width=\"13\" height=\"13\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" />\n    </svg>\n  );\n}\n\nexport function ShareButtons({\n  url,\n  title,\n  className = \"\",\n}: ShareButtonsProps) {\n  const [copied, setCopied] = useState(false);\n\n  const shareUrl = url ?? (typeof window !== \"undefined\" ? window.location.href : \"\");\n  const shareTitle = title ?? \"\";\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(shareUrl);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      // Fallback silently\n    }\n  }, [shareUrl]);\n\n  const handleTwitter = useCallback(() => {\n    const params = new URLSearchParams({\n      text: shareTitle,\n      url: shareUrl,\n    });\n    window.open(\n      `https://x.com/intent/tweet?${params.toString()}`,\n      \"_blank\",\n      \"noopener,noreferrer\"\n    );\n  }, [shareUrl, shareTitle]);\n\n  const handleLinkedIn = useCallback(() => {\n    const params = new URLSearchParams({\n      url: shareUrl,\n    });\n    window.open(\n      `https://www.linkedin.com/sharing/share-offsite/?${params.toString()}`,\n      \"_blank\",\n      \"noopener,noreferrer\"\n    );\n  }, [shareUrl]);\n\n  const keys = [\n    {\n      label: copied ? \"Link copied\" : \"Copy link\",\n      onClick: handleCopy as () => void,\n      content: (\n        <>\n          <span key={String(copied)} className={[\"animate-checkbox-in\", copied ? \"text-success-soft\" : \"\"].join(\" \")}>\n            {copied ? <CheckIcon /> : <LinkIcon />}\n          </span>\n          <span className=\"w-[62px] text-left\">{copied ? \"copied\" : \"copy link\"}</span>\n        </>\n      ),\n      wide: true,\n    },\n    { label: \"Share on X\", onClick: handleTwitter, content: <XIcon />, wide: false },\n    { label: \"Share on LinkedIn\", onClick: handleLinkedIn, content: <LinkedInIcon />, wide: false },\n  ];\n\n  return (\n    <div className={className}>\n      <p className=\"text-[12px] font-medium text-ink-muted lowercase mb-3\">\n        Share\n      </p>\n      <ButtonGroup label=\"Share\" items={keys} />\n      <span aria-live=\"polite\" className=\"sr-only\">{copied ? \"Link copied to clipboard\" : \"\"}</span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Sidebar.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface SidebarItem {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    badge?: string | number;
+    disabled?: boolean;
+}
+interface SidebarSection {
+    title?: string;
+    items: SidebarItem[];
+}
+interface SidebarHeader {
+    logo?: React.ReactNode;
+    title: string;
+    subtitle?: string;
+}
+interface SidebarProps {
+    sections: SidebarSection[];
+    header?: SidebarHeader;
+    defaultActive?: string;
+    active?: string;
+    onSelect?: (key: string) => void;
+    className?: string;
+}
+declare function Sidebar({ sections, header, defaultActive, active, onSelect, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+export { Sidebar };

package/dist/Sidebar.js

@@ -0,0 +1,140 @@
+"use client";
+
+// ../../components/ui/Sidebar.tsx
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Sidebar({
+  sections,
+  header,
+  defaultActive = "",
+  active,
+  onSelect,
+  className = ""
+}) {
+  const [internal, setInternal] = useState(defaultActive);
+  const current = active !== void 0 ? active : internal;
+  const [pill, setPill] = useState({ top: 0, height: 0, ready: false });
+  const navRef = useRef(null);
+  const btnRefs = useRef({});
+  const measurePill = (key) => {
+    const btn = btnRefs.current[key];
+    const nav = navRef.current;
+    if (!btn || !nav) return;
+    const nr = nav.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    setPill({ top: br.top - nr.top, height: br.height, ready: true });
+  };
+  useLayoutEffect(() => {
+    measurePill(current);
+  }, [current]);
+  useEffect(() => {
+    const ro = new ResizeObserver(() => measurePill(current));
+    if (navRef.current) ro.observe(navRef.current);
+    return () => ro.disconnect();
+  }, [current]);
+  const handleSelect = (key, disabled) => {
+    if (disabled) return;
+    setInternal(key);
+    onSelect?.(key);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["rounded-[20px] p-1.5", className].join(" "),
+      style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "bg-panel-face rounded-[15px] overflow-hidden", style: { boxShadow: "var(--panel-face-shadow)" }, children: [
+        header && /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 border-b border-line flex items-center gap-2.5", children: [
+          header.logo && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-7 h-7 rounded-[8px] flex items-center justify-center shrink-0 text-ink-inverse",
+              style: { background: "var(--face-inverse)", boxShadow: "var(--face-inverse-shadow)" },
+              children: header.logo
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[13px] font-semibold text-ink leading-none truncate", children: header.title }),
+            header.subtitle && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-ink-faint mt-0.5 leading-none truncate", children: header.subtitle })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Switch workspace",
+              className: "shrink-0 w-6 h-6 flex items-center justify-center text-ink-faint hover:text-ink transition-colors cursor-pointer rounded-[7px] hover:bg-surface-active",
+              children: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 9l4-4 4 4M8 15l4 4 4-4" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("nav", { ref: navRef, "aria-label": header?.title ?? "Sidebar", className: "relative p-2 flex flex-col gap-4", children: [
+          pill.ready && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute left-2 right-2 rounded-[11px] pointer-events-none z-0",
+              style: {
+                top: pill.top,
+                height: pill.height,
+                background: "var(--face-inverse)",
+                boxShadow: "var(--face-inverse-shadow)",
+                transition: "top 300ms var(--ease-spring), height 300ms var(--ease-spring)"
+              }
+            }
+          ),
+          sections.map((section, si) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            section.title && /* @__PURE__ */ jsx("p", { className: "relative z-10 px-2.5 pt-1 pb-1.5 text-[11.5px] font-medium text-ink-faint lowercase", children: section.title }),
+            section.items.map((item) => {
+              const isActive = current === item.key;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: (el) => {
+                    btnRefs.current[item.key] = el;
+                  },
+                  type: "button",
+                  onClick: () => handleSelect(item.key, item.disabled),
+                  disabled: item.disabled,
+                  "aria-current": isActive ? "page" : void 0,
+                  className: [
+                    "relative z-10 w-full flex items-center gap-2.5 px-2.5 py-2 rounded-[11px] text-[13px] font-medium text-left",
+                    "transition-colors duration-200 cursor-pointer",
+                    "disabled:opacity-35 disabled:pointer-events-none",
+                    isActive ? "text-ink-inverse" : "text-ink-body hover:text-ink hover:bg-surface-active/80"
+                  ].join(" "),
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: [
+                          "shrink-0 w-[22px] h-[22px] rounded-md flex items-center justify-center transition-colors duration-200",
+                          isActive ? "bg-ink-inverse/12 shadow-[inset_0_1px_0_var(--inverse-lip)]" : "text-ink-muted [background:var(--face)] [box-shadow:var(--face-shadow)]"
+                        ].join(" "),
+                        children: item.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+                    item.badge !== void 0 && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: [
+                          "shrink-0 text-[11px] font-medium px-1.5 py-0.5 rounded-md tabular-nums leading-none transition-colors duration-200",
+                          isActive ? "bg-ink-inverse/20 text-ink-inverse/80" : "bg-surface-active text-ink-muted"
+                        ].join(" "),
+                        children: item.badge
+                      }
+                    )
+                  ]
+                },
+                item.key
+              );
+            })
+          ] }, si))
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  Sidebar
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useEffect, useLayoutEffect } from \"react\";\n\ninterface SidebarItem {\n  key: string;\n  label: string;\n  icon?: React.ReactNode;\n  badge?: string | number;\n  disabled?: boolean;\n}\n\ninterface SidebarSection {\n  title?: string;\n  items: SidebarItem[];\n}\n\ninterface SidebarHeader {\n  logo?: React.ReactNode;\n  title: string;\n  subtitle?: string;\n}\n\ninterface SidebarProps {\n  sections: SidebarSection[];\n  header?: SidebarHeader;\n  defaultActive?: string;\n  active?: string;\n  onSelect?: (key: string) => void;\n  className?: string;\n}\n\nexport function Sidebar({\n  sections,\n  header,\n  defaultActive = \"\",\n  active,\n  onSelect,\n  className = \"\",\n}: SidebarProps) {\n  const [internal, setInternal] = useState(defaultActive);\n  const current = active !== undefined ? active : internal;\n  const [pill, setPill] = useState({ top: 0, height: 0, ready: false });\n  const navRef = useRef<HTMLElement>(null);\n  const btnRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n  const measurePill = (key: string) => {\n    const btn = btnRefs.current[key];\n    const nav = navRef.current;\n    if (!btn || !nav) return;\n    const nr = nav.getBoundingClientRect();\n    const br = btn.getBoundingClientRect();\n    setPill({ top: br.top - nr.top, height: br.height, ready: true });\n  };\n\n  // Before paint, so the pill is never seen out of place\n  useLayoutEffect(() => { measurePill(current); }, [current]);\n\n  useEffect(() => {\n    const ro = new ResizeObserver(() => measurePill(current));\n    if (navRef.current) ro.observe(navRef.current);\n    return () => ro.disconnect();\n  }, [current]);\n\n  const handleSelect = (key: string, disabled?: boolean) => {\n    if (disabled) return;\n    setInternal(key);\n    onSelect?.(key);\n  };\n\n  return (\n    <div\n      className={[\"rounded-[20px] p-1.5\", className].join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n    >\n      <div className=\"bg-panel-face rounded-[15px] overflow-hidden\" style={{ boxShadow: \"var(--panel-face-shadow)\" }}>\n      {header && (\n        <div className=\"px-3 py-3 border-b border-line flex items-center gap-2.5\">\n          {header.logo && (\n            <div\n              className=\"w-7 h-7 rounded-[8px] flex items-center justify-center shrink-0 text-ink-inverse\"\n              style={{ background: \"var(--face-inverse)\", boxShadow: \"var(--face-inverse-shadow)\" }}\n            >\n              {header.logo}\n            </div>\n          )}\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-[13px] font-semibold text-ink leading-none truncate\">{header.title}</p>\n            {header.subtitle && (\n              <p className=\"text-[11px] text-ink-faint mt-0.5 leading-none truncate\">{header.subtitle}</p>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            aria-label=\"Switch workspace\"\n            className=\"shrink-0 w-6 h-6 flex items-center justify-center text-ink-faint hover:text-ink transition-colors cursor-pointer rounded-[7px] hover:bg-surface-active\"\n          >\n            <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8 9l4-4 4 4M8 15l4 4 4-4\" />\n            </svg>\n          </button>\n        </div>\n      )}\n\n      <nav ref={navRef} aria-label={header?.title ?? \"Sidebar\"} className=\"relative p-2 flex flex-col gap-4\">\n        {pill.ready && (\n          <span\n            aria-hidden\n            className=\"absolute left-2 right-2 rounded-[11px] pointer-events-none z-0\"\n            style={{\n              top: pill.top,\n              height: pill.height,\n              background: \"var(--face-inverse)\",\n              boxShadow: \"var(--face-inverse-shadow)\",\n              transition: \"top 300ms var(--ease-spring), height 300ms var(--ease-spring)\",\n            }}\n          />\n        )}\n\n        {sections.map((section, si) => (\n          <div key={si} className=\"flex flex-col gap-0.5\">\n            {section.title && (\n              <p className=\"relative z-10 px-2.5 pt-1 pb-1.5 text-[11.5px] font-medium text-ink-faint lowercase\">\n                {section.title}\n              </p>\n            )}\n            {section.items.map((item) => {\n              const isActive = current === item.key;\n              return (\n                <button\n                  key={item.key}\n                  ref={(el) => { btnRefs.current[item.key] = el; }}\n                  type=\"button\"\n                  onClick={() => handleSelect(item.key, item.disabled)}\n                  disabled={item.disabled}\n                  aria-current={isActive ? \"page\" : undefined}\n                  className={[\n                    \"relative z-10 w-full flex items-center gap-2.5 px-2.5 py-2 rounded-[11px] text-[13px] font-medium text-left\",\n                    \"transition-colors duration-200 cursor-pointer\",\n                    \"disabled:opacity-35 disabled:pointer-events-none\",\n                    isActive\n                      ? \"text-ink-inverse\"\n                      : \"text-ink-body hover:text-ink hover:bg-surface-active/80\",\n                  ].join(\" \")}\n                >\n                  {item.icon && (\n                    <span\n                      className={[\n                        \"shrink-0 w-[22px] h-[22px] rounded-md flex items-center justify-center transition-colors duration-200\",\n                        isActive\n                          ? \"bg-ink-inverse/12 shadow-[inset_0_1px_0_var(--inverse-lip)]\"\n                          : \"text-ink-muted [background:var(--face)] [box-shadow:var(--face-shadow)]\",\n                      ].join(\" \")}\n                    >\n                      {item.icon}\n                    </span>\n                  )}\n\n                  <span className=\"flex-1 truncate\">{item.label}</span>\n\n                  {item.badge !== undefined && (\n                    <span\n                      className={[\n                        \"shrink-0 text-[11px] font-medium px-1.5 py-0.5 rounded-md tabular-nums leading-none transition-colors duration-200\",\n                        isActive\n                          ? \"bg-ink-inverse/20 text-ink-inverse/80\"\n                          : \"bg-surface-active text-ink-muted\",\n                      ].join(\" \")}\n                    >\n                      {item.badge}\n                    </span>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </nav>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Skeleton.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type SkeletonVariant = "text" | "circle" | "rect" | "card";
+interface SkeletonProps {
+    variant?: SkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+    lines?: number;
+    className?: string;
+    /** What is loading, for screen readers */
+    label?: string;
+}
+declare function Skeleton({ variant, width, height, lines, className, label, }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { Skeleton };

package/dist/Skeleton.js

@@ -0,0 +1,67 @@
+// ../../components/ui/Skeleton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var base = "skeleton-sheen relative overflow-hidden rounded-[8px]";
+var well = { background: "var(--well)", boxShadow: "var(--well-shadow)" };
+function Skeleton({
+  variant = "text",
+  width,
+  height,
+  lines = 1,
+  className = "",
+  label = "Loading"
+}) {
+  const a11y = { role: "status", "aria-busy": true, "aria-label": label };
+  if (variant === "circle") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...a11y,
+        className: [base, "rounded-full", className].join(" "),
+        style: { ...well, width: width ?? 40, height: height ?? 40 }
+      }
+    );
+  }
+  if (variant === "card") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...a11y,
+        className: ["rounded-[20px] p-1.5", className].join(" "),
+        style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+        children: /* @__PURE__ */ jsxs("div", { className: "bg-panel-face rounded-[15px] p-1.5", style: { boxShadow: "var(--panel-face-shadow)" }, children: [
+          /* @__PURE__ */ jsx("div", { className: [base, "w-full rounded-[11px]"].join(" "), style: { ...well, height: height ?? 160 } }),
+          /* @__PURE__ */ jsxs("div", { className: "px-3.5 pt-4 pb-3.5 flex flex-col gap-2.5", children: [
+            /* @__PURE__ */ jsx("div", { className: [base, "h-3.5 w-3/5"].join(" "), style: well }),
+            /* @__PURE__ */ jsx("div", { className: [base, "h-2.5 w-full"].join(" "), style: well }),
+            /* @__PURE__ */ jsx("div", { className: [base, "h-2.5 w-4/5"].join(" "), style: well })
+          ] })
+        ] })
+      }
+    );
+  }
+  if (variant === "rect") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...a11y,
+        className: [base, "rounded-[12px]", className].join(" "),
+        style: { ...well, width: width ?? "100%", height: height ?? 80 }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { ...a11y, className: ["flex flex-col gap-2", className].join(" "), children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [base, "h-2.5 rounded-full"].join(" "),
+      style: {
+        ...well,
+        width: width ?? (i === lines - 1 && lines > 1 ? "60%" : "100%")
+      }
+    },
+    i
+  )) });
+}
+export {
+  Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\n\ntype SkeletonVariant = \"text\" | \"circle\" | \"rect\" | \"card\";\n\ninterface SkeletonProps {\n  variant?: SkeletonVariant;\n  width?: string | number;\n  height?: string | number;\n  lines?: number;\n  className?: string;\n  /** What is loading, for screen readers */\n  label?: string;\n}\n\n/* Placeholders are empty sunken wells — the shape of what will fill them —\n   with a light sweep travelling across, rather than a blink.            */\nconst base = \"skeleton-sheen relative overflow-hidden rounded-[8px]\";\nconst well: React.CSSProperties = { background: \"var(--well)\", boxShadow: \"var(--well-shadow)\" };\n\nexport function Skeleton({\n  variant = \"text\",\n  width,\n  height,\n  lines = 1,\n  className = \"\",\n  label = \"Loading\",\n}: SkeletonProps) {\n  const a11y = { role: \"status\", \"aria-busy\": true, \"aria-label\": label } as const;\n\n  if (variant === \"circle\") {\n    return (\n      <div\n        {...a11y}\n        className={[base, \"rounded-full\", className].join(\" \")}\n        style={{ ...well, width: width ?? 40, height: height ?? 40 }}\n      />\n    );\n  }\n\n  if (variant === \"card\") {\n    return (\n      <div\n        {...a11y}\n        className={[\"rounded-[20px] p-1.5\", className].join(\" \")}\n        style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n      >\n        <div className=\"bg-panel-face rounded-[15px] p-1.5\" style={{ boxShadow: \"var(--panel-face-shadow)\" }}>\n          <div className={[base, \"w-full rounded-[11px]\"].join(\" \")} style={{ ...well, height: height ?? 160 }} />\n          <div className=\"px-3.5 pt-4 pb-3.5 flex flex-col gap-2.5\">\n            <div className={[base, \"h-3.5 w-3/5\"].join(\" \")} style={well} />\n            <div className={[base, \"h-2.5 w-full\"].join(\" \")} style={well} />\n            <div className={[base, \"h-2.5 w-4/5\"].join(\" \")} style={well} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (variant === \"rect\") {\n    return (\n      <div\n        {...a11y}\n        className={[base, \"rounded-[12px]\", className].join(\" \")}\n        style={{ ...well, width: width ?? \"100%\", height: height ?? 80 }}\n      />\n    );\n  }\n\n  return (\n    <div {...a11y} className={[\"flex flex-col gap-2\", className].join(\" \")}>\n      {Array.from({ length: lines }).map((_, i) => (\n        <div\n          key={i}\n          className={[base, \"h-2.5 rounded-full\"].join(\" \")}\n          style={{\n            ...well,\n            width: width ?? (i === lines - 1 && lines > 1 ? \"60%\" : \"100%\"),\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AA+BM,cAiBI,YAjBJ;AAfN,IAAM,OAAO;AACb,IAAM,OAA4B,EAAE,YAAY,eAAe,WAAW,qBAAqB;AAExF,SAAS,SAAS;AAAA,EACvB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,QAAQ;AACV,GAAkB;AAChB,QAAM,OAAO,EAAE,MAAM,UAAU,aAAa,MAAM,cAAc,MAAM;AAEtE,MAAI,YAAY,UAAU;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,CAAC,MAAM,gBAAgB,SAAS,EAAE,KAAK,GAAG;AAAA,QACrD,OAAO,EAAE,GAAG,MAAM,OAAO,SAAS,IAAI,QAAQ,UAAU,GAAG;AAAA;AAAA,IAC7D;AAAA,EAEJ;AAEA,MAAI,YAAY,QAAQ;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,CAAC,wBAAwB,SAAS,EAAE,KAAK,GAAG;AAAA,QACvD,OAAO,EAAE,YAAY,sBAAsB,WAAW,sBAAsB;AAAA,QAE5E,+BAAC,SAAI,WAAU,sCAAqC,OAAO,EAAE,WAAW,2BAA2B,GACjG;AAAA,8BAAC,SAAI,WAAW,CAAC,MAAM,uBAAuB,EAAE,KAAK,GAAG,GAAG,OAAO,EAAE,GAAG,MAAM,QAAQ,UAAU,IAAI,GAAG;AAAA,UACtG,qBAAC,SAAI,WAAU,4CACb;AAAA,gCAAC,SAAI,WAAW,CAAC,MAAM,aAAa,EAAE,KAAK,GAAG,GAAG,OAAO,MAAM;AAAA,YAC9D,oBAAC,SAAI,WAAW,CAAC,MAAM,cAAc,EAAE,KAAK,GAAG,GAAG,OAAO,MAAM;AAAA,YAC/D,oBAAC,SAAI,WAAW,CAAC,MAAM,aAAa,EAAE,KAAK,GAAG,GAAG,OAAO,MAAM;AAAA,aAChE;AAAA,WACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,MAAI,YAAY,QAAQ;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,CAAC,MAAM,kBAAkB,SAAS,EAAE,KAAK,GAAG;AAAA,QACvD,OAAO,EAAE,GAAG,MAAM,OAAO,SAAS,QAAQ,QAAQ,UAAU,GAAG;AAAA;AAAA,IACjE;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAK,GAAG,MAAM,WAAW,CAAC,uBAAuB,SAAS,EAAE,KAAK,GAAG,GAClE,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MACrC;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW,CAAC,MAAM,oBAAoB,EAAE,KAAK,GAAG;AAAA,MAChD,OAAO;AAAA,QACL,GAAG;AAAA,QACH,OAAO,UAAU,MAAM,QAAQ,KAAK,QAAQ,IAAI,QAAQ;AAAA,MAC1D;AAAA;AAAA,IALK;AAAA,EAMP,CACD,GACH;AAEJ;","names":[]}

package/dist/Slider.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type SliderValue = number | [number, number];
+interface SliderProps<V extends SliderValue> {
+    /** One number for a slider, two for a range */
+    value?: V;
+    defaultValue?: V;
+    onChange?: (value: V) => void;
+    /** Fires once the knob is let go, for work too heavy to do while dragging */
+    onCommit?: (value: V) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    /** Show the value beside the label; pass a function to format it */
+    showValue?: boolean | ((value: V) => React.ReactNode);
+    /** Small labels under the track, at these values */
+    marks?: number[];
+    disabled?: boolean;
+    /** Name of a hidden input (two for a range: name[0], name[1]) */
+    name?: string;
+    className?: string;
+}
+declare function Slider<V extends SliderValue = number>({ value, defaultValue, onChange, onCommit, min, max, step, label, showValue, marks, disabled, name, className, }: SliderProps<V>): react_jsx_runtime.JSX.Element;
+
+export { Slider };

package/dist/Slider.js

@@ -0,0 +1,182 @@
+"use client";
+
+// ../../components/ui/Slider.tsx
+import { useId, useRef, useState } from "react";
+import { FieldLabel } from "./FieldMessage.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+var decimals = (n) => (String(n).split(".")[1] ?? "").length;
+function Slider({
+  value,
+  defaultValue,
+  onChange,
+  onCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  marks,
+  disabled = false,
+  name,
+  className = ""
+}) {
+  const uid = useId();
+  const trackRef = useRef(null);
+  const knobs = useRef([]);
+  const isRange = Array.isArray(value ?? defaultValue);
+  const [internal, setInternal] = useState(() => defaultValue ?? value ?? min);
+  const current = value !== void 0 ? value : internal;
+  const values = Array.isArray(current) ? [...current] : [current];
+  const [dragging, setDragging] = useState(null);
+  const digits = decimals(step);
+  const snap = (n) => Number(clamp(Math.round((n - min) / step) * step + min, min, max).toFixed(digits));
+  const pct = (n) => (n - min) / (max - min) * 100;
+  const emit = (next, commit = false) => {
+    const v = isRange ? [next[0], next[1]] : next[0];
+    setInternal(v);
+    if (next.some((n, i) => n !== values[i])) onChange?.(v);
+    if (commit) onCommit?.(v);
+  };
+  const setAt = (i, n, commit = false) => {
+    const next = [...values];
+    next[i] = snap(n);
+    if (isRange) next[i] = i === 0 ? Math.min(next[0], values[1]) : Math.max(next[1], values[0]);
+    emit(next, commit);
+  };
+  const fromPointer = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    return min + clamp((clientX - r.left) / r.width, 0, 1) * (max - min);
+  };
+  const onPointerDown = (e) => {
+    if (disabled || e.button !== 0) return;
+    e.preventDefault();
+    const n = fromPointer(e.clientX);
+    let i = 0;
+    if (isRange) {
+      const d0 = Math.abs(n - values[0]);
+      const d1 = Math.abs(n - values[1]);
+      i = d1 < d0 || d0 === d1 && n > values[1] ? 1 : 0;
+    }
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDragging(i);
+    knobs.current[i]?.focus();
+    setAt(i, n);
+  };
+  const onKeyDown = (i) => (e) => {
+    const big = Math.max(step, (max - min) / 10);
+    const moves = {
+      ArrowRight: step * (e.shiftKey ? 10 : 1),
+      ArrowUp: step * (e.shiftKey ? 10 : 1),
+      ArrowLeft: -step * (e.shiftKey ? 10 : 1),
+      ArrowDown: -step * (e.shiftKey ? 10 : 1),
+      PageUp: big,
+      PageDown: -big
+    };
+    if (e.key in moves) {
+      e.preventDefault();
+      setAt(i, values[i] + moves[e.key], true);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setAt(i, min, true);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setAt(i, max, true);
+    }
+  };
+  const shown = typeof showValue === "function" ? showValue(current) : showValue ? values.join(" \u2013 ") : null;
+  const lo = isRange ? pct(values[0]) : 0;
+  const hi = pct(values[isRange ? 1 : 0]);
+  return /* @__PURE__ */ jsxs("div", { className: ["flex w-full flex-col gap-2.5", disabled ? "opacity-40" : "", className].join(" "), children: [
+    (label || shown !== null) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      label && /* @__PURE__ */ jsx(FieldLabel, { id: `${uid}-label`, children: label }),
+      shown !== null && /* @__PURE__ */ jsx("span", { className: "text-[12.5px] tabular-nums text-ink-muted", children: shown })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: ["relative flex h-6 touch-none items-center", disabled ? "pointer-events-none" : "cursor-pointer"].join(" "),
+        onPointerDown,
+        onPointerMove: (e) => dragging !== null && setAt(dragging, fromPointer(e.clientX)),
+        onPointerUp: () => {
+          if (dragging !== null) onCommit?.(current);
+          setDragging(null);
+        },
+        onPointerCancel: () => setDragging(null),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: trackRef,
+              className: "relative h-2 w-full rounded-full",
+              style: { background: "var(--track)", boxShadow: "var(--track-shadow)" },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-y-px rounded-full",
+                  style: {
+                    left: `calc(${lo}% + ${isRange ? 0 : 1}px)`,
+                    width: `calc(${hi - lo}% - ${isRange ? 0 : 1}px)`,
+                    background: "var(--face-inverse)",
+                    boxShadow: "var(--fill-shadow)",
+                    transition: dragging === null ? "left 200ms var(--ease-out-soft), width 200ms var(--ease-out-soft)" : "none"
+                  }
+                }
+              )
+            }
+          ),
+          values.map((v, i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: (el) => {
+                knobs.current[i] = el;
+              },
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              "aria-labelledby": label ? `${uid}-label` : void 0,
+              "aria-label": isRange ? i === 0 ? "minimum" : "maximum" : label ? void 0 : "value",
+              "aria-valuemin": isRange && i === 1 ? values[0] : min,
+              "aria-valuemax": isRange && i === 0 ? values[1] : max,
+              "aria-valuenow": v,
+              "aria-disabled": disabled || void 0,
+              onKeyDown: onKeyDown(i),
+              className: "absolute top-1/2 h-5 w-5 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-page",
+              style: {
+                left: `${pct(v)}%`,
+                // the last-dragged knob of a range sits on top, so two at one spot can be pulled apart
+                zIndex: dragging === i ? 2 : 1,
+                background: "var(--face)",
+                boxShadow: "var(--knob-shadow)",
+                transform: `translate(-50%, -50%) scale(${dragging === i ? 1.15 : 1})`,
+                transition: dragging === null ? "left 200ms var(--ease-out-soft), transform 220ms var(--ease-spring)" : "transform 220ms var(--ease-spring)"
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
+                  style: { background: "var(--track)", boxShadow: "var(--track-shadow)" }
+                }
+              )
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    marks && marks.length > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "relative h-4", children: marks.map((m) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute -translate-x-1/2 text-[11px] tabular-nums text-ink-faint",
+        style: { left: `${pct(m)}%` },
+        children: m
+      },
+      m
+    )) }),
+    name && values.map((v, i) => /* @__PURE__ */ jsx("input", { type: "hidden", name: isRange ? `${name}[${i}]` : name, value: v }, i))
+  ] });
+}
+export {
+  Slider
+};
+//# sourceMappingURL=Slider.js.map