@orangecheck/app-design 0.5.10 → 0.5.11

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 export { APP_ATTRIBUTE, APP_ID, appColors, appFonts } from './tokens.mjs';
 export { Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardProps, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, FieldProps, Input, Kbd, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollFade, ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, useTimedOut } from './primitives.mjs';
 export { AppIcon, AppIconProps, Crowd, CrowdProps, HalftoneCanvas, HalftoneCanvasProps, HalftoneSphere, HalftoneSphereProps, IsoCheck, IsoCheckProps, Lockup, LockupProps, MARK_FACES, Mark, MarkProps, SPHERE_GRADIENT, Tone, portraitTone } from './brand.mjs';
-export { Accent, ActivityItem, ActivityList, BrowserFrame, CodeBlock, Column, Container, CopyButton, DataTable, Display, DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PackageItem, PageHeader, PageHero, PageHeroProps, PhoneFrame, ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, Section, SectionIntro, SectionProps, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, Ticker, TocItem, TruthRow, TruthStatus, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.mjs';
+export { Accent, ActivityItem, ActivityList, BrowserFrame, CodeBlock, Column, Container, CopyButton, DataTable, Display, DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, ErrorBoundary, Eyebrow, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PackageItem, PageHeader, PageHero, PageHeroProps, PhoneFrame, ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, Section, SectionIntro, SectionProps, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, Ticker, TocItem, TruthRow, TruthStatus, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.mjs';
 export { AccountMenu, AccountMenuItem, AppShell, FooterColumn, NavItem, ShellContext, ShellNavGroup, ShellNavItem, ShellPlace, ShellSection, SiteFooter, SiteHeader, ThemeToggle, useShellPlace } from './chrome.mjs';
 export { toast } from 'sonner';
 import 'react';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { APP_ATTRIBUTE, APP_ID, appColors, appFonts } from './tokens.js';
 export { Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardProps, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, FieldProps, Input, Kbd, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollFade, ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, useTimedOut } from './primitives.js';
 export { AppIcon, AppIconProps, Crowd, CrowdProps, HalftoneCanvas, HalftoneCanvasProps, HalftoneSphere, HalftoneSphereProps, IsoCheck, IsoCheckProps, Lockup, LockupProps, MARK_FACES, Mark, MarkProps, SPHERE_GRADIENT, Tone, portraitTone } from './brand.js';
-export { Accent, ActivityItem, ActivityList, BrowserFrame, CodeBlock, Column, Container, CopyButton, DataTable, Display, DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PackageItem, PageHeader, PageHero, PageHeroProps, PhoneFrame, ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, Section, SectionIntro, SectionProps, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, Ticker, TocItem, TruthRow, TruthStatus, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.js';
+export { Accent, ActivityItem, ActivityList, BrowserFrame, CodeBlock, Column, Container, CopyButton, DataTable, Display, DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, ErrorBoundary, Eyebrow, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PackageItem, PageHeader, PageHero, PageHeroProps, PhoneFrame, ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, Section, SectionIntro, SectionProps, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, Ticker, TocItem, TruthRow, TruthStatus, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.js';
 export { AccountMenu, AccountMenuItem, AppShell, FooterColumn, NavItem, ShellContext, ShellNavGroup, ShellNavItem, ShellPlace, ShellSection, SiteFooter, SiteHeader, ThemeToggle, useShellPlace } from './chrome.js';
 export { toast } from 'sonner';
 import 'react';

package/dist/index.js

@@ -707,7 +707,13 @@ var DropdownMenuLabel = react.forwardRef(function DropdownMenuLabel2({ className
 var DropdownMenuSeparator = react.forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Separator, { ref, className: cn("my-1.5 h-px bg-border", className), ...props });
 });
-function ScrollFade({ fade = "var(--card)", className, innerClassName, children, ...props }) {
+function ScrollFade({
+  fade = "var(--card)",
+  className,
+  innerClassName,
+  children,
+  ...props
+}) {
   const ref = react.useRef(null);
   const [edges, setEdges] = react.useState({ left: false, right: false });
   const measure = react.useCallback(() => {
@@ -715,7 +721,9 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
     if (!el) return;
     const left = el.scrollLeft > 1;
     const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setEdges((e) => e.left === left && e.right === right ? e : { left, right });
+    setEdges(
+      (e) => e.left === left && e.right === right ? e : { left, right }
+    );
   }, []);
   react.useEffect(() => {
     const el = ref.current;
@@ -728,7 +736,19 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
     return () => ro.disconnect();
   }, [measure]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative min-w-0", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref, onScroll: measure, className: cn("overflow-x-auto overscroll-x-contain", innerClassName), children }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        onScroll: measure,
+        tabIndex: edges.left || edges.right ? 0 : void 0,
+        className: cn(
+          "overflow-x-auto overscroll-x-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          innerClassName
+        ),
+        children
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -737,7 +757,9 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
           "pointer-events-none absolute inset-y-0 left-0 w-8 transition-opacity duration-150",
           edges.left ? "opacity-100" : "opacity-0"
         ),
-        style: { background: `linear-gradient(to right, ${fade}, transparent)` }
+        style: {
+          background: `linear-gradient(to right, ${fade}, transparent)`
+        }
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -992,7 +1014,8 @@ function HalftoneCanvas({
       raf = busy && visible && !document.hidden ? requestAnimationFrame(frame) : 0;
     }
     const kick = () => {
-      if (!raf && visible && !document.hidden) raf = requestAnimationFrame(frame);
+      if (!raf && visible && !document.hidden)
+        raf = requestAnimationFrame(frame);
     };
     layout();
     setLive(true);
@@ -1034,22 +1057,41 @@ function HalftoneCanvas({
       el.removeEventListener("pointerleave", leave);
     };
   }, [tone, density, lens, intro, breathe, ink]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrap, className: cn("relative aspect-square w-full", className), style, "data-live": live || void 0, children: [
-    fallbackSrc ? (
-      // eslint-disable-next-line @next/next/no-img-element -- the still screen, until the live one draws
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: fallbackSrc,
-          alt: "",
-          "aria-hidden": true,
-          className: cn("absolute inset-0 size-full select-none transition-opacity duration-300", live && "opacity-0"),
-          draggable: false
-        }
-      )
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvas, role: "img", "aria-label": alt, className: "absolute inset-0 size-full" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: wrap,
+      className: cn("relative aspect-square w-full", className),
+      style,
+      "data-live": live || void 0,
+      children: [
+        fallbackSrc ? (
+          // eslint-disable-next-line @next/next/no-img-element -- the still screen, until the live one draws
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: fallbackSrc,
+              alt: "",
+              "aria-hidden": true,
+              className: cn(
+                "absolute inset-0 size-full select-none transition-opacity duration-300",
+                live && "opacity-0"
+              ),
+              draggable: false
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvas,
+            ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true },
+            className: "absolute inset-0 size-full"
+          }
+        )
+      ]
+    }
+  );
 }
 var SPHERE_GRADIENT = "radial-gradient(86% 86% at 36% 32%, #fff7f0 0%, #ffdec8 14%, #ffa069 34%, #ff7030 56%, #f65210 78%, #de4006 100%)";
 var SPHERE_DEPTH = "inset -14px -22px 44px rgb(150 40 0 / 0.16), 0 36px 70px -34px rgb(234 88 11 / 0.45)";
@@ -2397,7 +2439,49 @@ function Monogram({
     }
   );
 }
-function NavLink({ item, className, onNavigate }) {
+var ErrorBoundary = class extends react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false, key: this.props.resetKey };
+    this.reset = () => this.setState({ failed: false });
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.resetKey === state.key ? null : { failed: false, key: props.resetKey };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  render() {
+    if (!this.state.failed) return this.props.children;
+    if (this.props.fallback) return this.props.fallback(this.reset);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container py-16", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        title: "Something on this page broke.",
+        action: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: this.reset, children: "Try again" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => window.location.reload(),
+              children: "Reload the page"
+            }
+          )
+        ] }),
+        children: "Nothing you saved is affected. If it keeps happening, tell us at hello@ochk.io."
+      }
+    ) });
+  }
+};
+function NavLink({
+  item,
+  className,
+  onNavigate
+}) {
   const cls = cn(
     "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
     item.active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
@@ -2406,7 +2490,16 @@ function NavLink({ item, className, onNavigate }) {
   if (item.external) {
     return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Link2__default.default,
+    {
+      href: item.href,
+      className: cls,
+      "aria-current": item.active ? "page" : void 0,
+      onClick: onNavigate,
+      children: item.label
+    }
+  );
 }
 function SiteHeader({
   home = "/",
@@ -2424,7 +2517,10 @@ function SiteHeader({
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oca-container flex h-16 items-center justify-between gap-4 md:h-[4.5rem]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: home, className: "-ml-1 rounded-lg p-1", "aria-label": "Home", children: brand ?? /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 28 }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Link2__default.default, { href: home, className: "-ml-1 rounded-lg p-1", children: [
+          brand ?? /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 28 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " home" })
+        ] }),
         nav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map((n) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { item: n }, n.href)) }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           actions,
@@ -2473,27 +2569,46 @@ function SiteFooter({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("flex min-w-0 flex-col gap-1", spans && "col-span-2 md:col-span-1"),
+            className: cn(
+              "flex min-w-0 flex-col gap-1",
+              spans && "col-span-2 md:col-span-1"
+            ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-1", spans && "grid grid-cols-2 gap-x-6 md:flex md:flex-col"), children: col.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
-                NavLink,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  item: l,
-                  className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
-                },
-                l.href
-              )) })
+                  className: cn(
+                    "flex flex-col gap-1",
+                    spans && "grid grid-cols-2 gap-x-6 md:flex md:flex-col"
+                  ),
+                  children: col.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
+                    NavLink,
+                    {
+                      item: l,
+                      className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
+                    },
+                    l.href
+                  ))
+                }
+              )
             ]
           },
           col.heading
         );
       })
     ] }),
-    signature ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "oca-container select-none overflow-hidden pb-8 md:pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-[0.18em] text-[clamp(3rem,11.5vw,10rem)] leading-[0.78] tracking-[-0.065em] [font-family:var(--oc-font-display)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-[0.06em] inline-block w-[1.1em] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Mark, { className: "block h-auto w-full" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "orangecheck" })
-    ] }) }) : null,
+    signature ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "oca-container select-none overflow-hidden pb-8 md:pb-12",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-[0.18em] text-[clamp(3rem,11.5vw,10rem)] leading-[0.78] tracking-[-0.065em] [font-family:var(--oc-font-display)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-[0.06em] inline-block w-[1.1em] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Mark, { className: "block h-auto w-full" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "orangecheck" })
+        ] })
+      }
+    ) : null,
     meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oca-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: meta }) }) : null
   ] });
 }
@@ -2743,6 +2858,7 @@ exports.DropdownMenuSeparator = DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyLine = EmptyLine;
 exports.EmptyState = EmptyState;
+exports.ErrorBoundary = ErrorBoundary;
 exports.Eyebrow = Eyebrow;
 exports.Field = Field;
 exports.FloatChip = FloatChip;