@orangecheck/app-design 0.5.10 → 0.5.12

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

@@ -728,7 +728,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",
       {
@@ -1048,7 +1060,14 @@ function HalftoneCanvas({
         }
       )
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvas, role: "img", "aria-label": alt, className: "absolute inset-0 size-full" })
+    /* @__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%)";
@@ -2397,6 +2416,37 @@ function Monogram({
     }
   );
 }
+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",
@@ -2423,35 +2473,50 @@ function SiteHeader({
         "sticky top-0 z-40 w-full border-b border-transparent bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/70",
         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 }) }),
-        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,
-          nav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SheetTrigger,
-              {
-                className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
-                "aria-label": "Open menu",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "pt-16", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
-              /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
-                NavLink,
-                {
-                  item: n,
-                  className: "rounded-xl px-3 py-3 text-[1.0625rem]",
-                  onNavigate: () => setOpen(false)
-                },
-                n.href
-              )) })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "oca-container flex h-16 items-center justify-between gap-4 md:h-[4.5rem]",
+            // Three columns, the outer two each at least their content: the
+            // navigation stays centred whatever the actions hold, so it does
+            // not shift when they change (signed out to signed in).
+            nav.length > 0 && "md:grid md:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Link2__default.default, { href: home, className: "-ml-1 justify-self-start 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 justify-self-end", children: [
+              actions,
+              nav.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SheetTrigger,
+                  {
+                    className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
+                    "aria-label": "Open menu",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "pt-16", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+                    NavLink,
+                    {
+                      item: n,
+                      className: "rounded-xl px-3 py-3 text-[1.0625rem]",
+                      onNavigate: () => setOpen(false)
+                    },
+                    n.href
+                  )) })
+                ] })
+              ] }) : null
             ] })
-          ] }) : null
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -2743,6 +2808,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;