@hackcove/ui-react 0.10.8 → 0.10.10

package/dist/AppShell.d.ts

@@ -78,21 +78,33 @@ export declare function AppShellHideBelow({ breakpoint, children, ...rest }: Pas
  * reachable and nothing scrolls sideways. The menu is a native `<details>`, so it works with the
  * keyboard, with a screen reader and on a page that never hydrates. From `md` the header is the
  * row, and the `subnav` row, as they are.
+ *
+ * `controls` stay in the row at every width, so keep them few (a theme toggle, the viewer's avatar);
+ * on a phone a crowded `controls` clips, and the Menu button is never the part cut off. Pickers and
+ * actions that do not fit a phone row go in `menuControls`: rendered once, they sit in the row after
+ * `controls` from `md`, and below `md` at the top of the Menu, above `nav` and `subnav`.
  */
-export declare function AppShell({ brand, nav, controls, header, subnav, menuLabel, footer, bleed, hideChromeInPrint, children, ...rest }: {
+export declare function AppShell({ brand, nav, controls, menuControls, header, subnav, menuLabel, footer, bleed, hideChromeInPrint, children, ...rest }: {
     /** The brand: a logo and a name, in the header's brand type, with the gap between them. `AppShellBrand` makes both one link. */
     brand?: ReactNode;
     /** The main navigation, e.g. a `Tabs variant="pill"` of links (it is already a `<nav>`). Below `md` it is in the menu. */
     nav?: ReactNode;
     /** The end of the row: a picker, a theme toggle. Gap-2, vertically centred; no child shrinks, and a full-width control (a `Select` at its default) sizes to its content. */
     controls?: ReactNode;
+    /**
+     * Pickers and actions that do not fit a phone row, such as a project `Select` and a Sign out
+     * `Button`. From `md` they sit in the row after `controls`; below `md` they are at the top of the
+     * Menu, above `nav` and `subnav`. Rendered once, so a field keeps its state and ids stay unique.
+     * `controls` stay in the row at every width, so keep those few.
+     */
+    menuControls?: ReactNode;
     /** The escape hatch: a free node in the header row, after `brand` and `nav`. */
     header?: ReactNode;
     /** A second fixed-height row under the header from `md`, e.g. a `Tabs variant="pill"` of links. Below `md` it is in the menu with `nav`. */
     subnav?: ReactNode;
     /**
      * The phone menu button's name, for an app in another language. Only drawn below `md`, and only
-     * when `nav` or `subnav` is given.
+     * when `nav`, `subnav` or `menuControls` is given.
      * @default Menu
      */
     menuLabel?: string;

package/dist/AppShell.js

@@ -62,17 +62,20 @@ function ScrollRow({ className, children }) {
     return (_jsx(ContainerFrame, { elementRef: setRow, className: cx(ROW, FADE, className), children: children }));
 }
 /**
- * The header row's slots in order: brand, nav (from `md`), the free `children`, then controls and,
- * below `md`, the menu at the end.
+ * The header row's slots in order: brand, nav (from `md`), the free `children`, then `controls` and
+ * the menu at the end. `controls` have a wrapper of their own that shrinks and clips, and the menu
+ * sits beside it, so a crowded `controls` never pushes the Menu off a phone screen. From `md` the
+ * menu is the inline row of `menuControls` after `controls`.
  */
-function HeaderSlots({ brand, nav, controls, menu, children, }) {
-    return (_jsxs(_Fragment, { children: [brand && (_jsx("div", { className: "flex items-center gap-2 text-base font-bold tracking-tight text-slate-900", children: brand })), nav && _jsx("div", { className: "hidden items-center gap-4 *:shrink-0 md:flex", children: nav }), children, (controls || menu) && (_jsxs("div", { className: controls
-                    ? "ml-auto flex items-center gap-2 *:shrink-0 [&>.w-full]:w-auto"
-                    : "ml-auto flex items-center gap-2 *:shrink-0 md:hidden", children: [controls, menu] }))] }));
+function HeaderSlots({ brand, nav, controls, menu, menuInline, children, }) {
+    return (_jsxs(_Fragment, { children: [brand && (_jsx("div", { className: "flex items-center gap-2 text-base font-bold tracking-tight text-slate-900", children: brand })), nav && _jsx("div", { className: "hidden items-center gap-4 *:shrink-0 md:flex", children: nav }), children, (controls || menu) && (_jsxs("div", { className: cx(
+                // Below `md` this wrapper may shrink (the row's `*:shrink-0` is overridden), so a crowded
+                // `controls` clips inside its own box; from `md` it keeps its width and the row scrolls.
+                "ml-auto flex min-w-0 items-center gap-2 max-md:shrink!", !controls && !menuInline && "md:hidden"), children: [controls && (_jsx("div", { className: "flex min-w-0 items-center gap-2 *:shrink-0 max-md:-mx-1 max-md:overflow-x-clip max-md:px-1 [&>.w-full]:w-auto", children: controls })), menu] }))] }));
 }
 /** The sticky header: the one-row slots, and from `md` the `subnav` row under them. */
-function AppShellHeader({ brand, nav, controls, subnav, menuLabel, hideChromeInPrint, children, }) {
-    return (_jsxs("header", { className: cx("sticky top-0 z-10 border-b border-slate-200 bg-white", hideChromeInPrint && "print:hidden"), children: [_jsx(ScrollRow, { className: "flex h-14", children: _jsx(HeaderSlots, { brand: brand, nav: nav, controls: controls, menu: (nav || subnav) && (_jsxs(AppShellMenu, { label: menuLabel, children: [nav, subnav] })), children: children }) }), subnav && _jsx(ScrollRow, { className: "hidden h-12 md:flex", children: subnav })] }));
+function AppShellHeader({ brand, nav, controls, menuControls, subnav, menuLabel, hideChromeInPrint, children, }) {
+    return (_jsxs("header", { className: cx("sticky top-0 z-10 border-b border-slate-200 bg-white", hideChromeInPrint && "print:hidden"), children: [_jsx(ScrollRow, { className: "flex h-14", children: _jsx(HeaderSlots, { brand: brand, nav: nav, controls: controls, menuInline: !!menuControls, menu: (nav || subnav || menuControls) && (_jsxs(AppShellMenu, { label: menuLabel, controls: menuControls, children: [nav, subnav] })), children: children }) }), subnav && _jsx(ScrollRow, { className: "hidden h-12 md:flex", children: subnav })] }));
 }
 /**
  * The page frame: it paints the page canvas and sets the type face, ink and font smoothing
@@ -93,10 +96,15 @@ function AppShellHeader({ brand, nav, controls, subnav, menuLabel, hideChromeInP
  * reachable and nothing scrolls sideways. The menu is a native `<details>`, so it works with the
  * keyboard, with a screen reader and on a page that never hydrates. From `md` the header is the
  * row, and the `subnav` row, as they are.
+ *
+ * `controls` stay in the row at every width, so keep them few (a theme toggle, the viewer's avatar);
+ * on a phone a crowded `controls` clips, and the Menu button is never the part cut off. Pickers and
+ * actions that do not fit a phone row go in `menuControls`: rendered once, they sit in the row after
+ * `controls` from `md`, and below `md` at the top of the Menu, above `nav` and `subnav`.
  */
-export function AppShell({ brand, nav, controls, header, subnav, menuLabel = "Menu", footer, bleed = false, hideChromeInPrint = false, children, ...rest }) {
+export function AppShell({ brand, nav, controls, menuControls, header, subnav, menuLabel = "Menu", footer, bleed = false, hideChromeInPrint = false, children, ...rest }) {
     return (_jsxs("div", { ...rest, className: cx("flex min-h-dvh flex-col bg-gray-50 font-sans text-slate-900 antialiased", 
         // The sticky header's height (its rows and the bottom border), for a bar that sticks under it.
         // Below `md` it is one row whatever the slots are: the subnav is in the menu.
-        "[--app-header:calc(3.5rem+1px)]", subnav ? "md:[--app-header:calc(6.5rem+1px)]" : undefined), children: [_jsx(AppShellHeader, { brand: brand, nav: nav, controls: controls, subnav: subnav, menuLabel: menuLabel, hideChromeInPrint: hideChromeInPrint, children: header }), _jsx("main", { className: "flex flex-1 flex-col", children: bleed ? (children) : (_jsx(ContainerFrame, { className: cx("py-8", hideChromeInPrint && "print:p-0"), children: children })) }), footer && (_jsx("footer", { className: cx("border-t border-slate-200", hideChromeInPrint && "print:hidden"), children: _jsx(ContainerFrame, { className: "py-6 text-sm text-slate-500", children: footer }) }))] }));
+        "[--app-header:calc(3.5rem+1px)]", subnav ? "md:[--app-header:calc(6.5rem+1px)]" : undefined), children: [_jsx(AppShellHeader, { brand: brand, nav: nav, controls: controls, menuControls: menuControls, subnav: subnav, menuLabel: menuLabel, hideChromeInPrint: hideChromeInPrint, children: header }), _jsx("main", { className: "flex flex-1 flex-col", children: bleed ? (children) : (_jsx(ContainerFrame, { className: cx("py-8", hideChromeInPrint && "print:p-0"), children: children })) }), footer && (_jsx("footer", { className: cx("border-t border-slate-200", hideChromeInPrint && "print:hidden"), children: _jsx(ContainerFrame, { className: "py-6 text-sm text-slate-500", children: footer }) }))] }));
 }

package/dist/AppShellMenu.d.ts

@@ -6,8 +6,15 @@ import { type ReactElement, type ReactNode } from "react";
  * is out of flow (it hangs under the header, `top-full`), so the header keeps its one height open
  * or closed. With script it also closes on Escape (focus returns to the button) and when a link in
  * it is followed, for a router that changes the page without a reload.
+ *
+ * `controls` (AppShell's `menuControls`) sit at the top of the panel, above the links. From `md`
+ * the `<details>` drops its own box and shows only them, inline at the row's end, whether it is
+ * open or not: the summary and the link copies are hidden (the links render in their own rows from
+ * `md`) and the panel is a plain row. They are rendered once, so a field keeps its state.
  */
-export declare function AppShellMenu({ label, children, }: {
+export declare function AppShellMenu({ label, controls, children, }: {
     label: string;
+    /** Rendered once: at the top of the panel below `md`, inline in the row from `md`. */
+    controls?: ReactNode;
     children: ReactNode;
 }): ReactElement;

package/dist/AppShellMenu.js

@@ -21,8 +21,13 @@ const ICON = {
  * is out of flow (it hangs under the header, `top-full`), so the header keeps its one height open
  * or closed. With script it also closes on Escape (focus returns to the button) and when a link in
  * it is followed, for a router that changes the page without a reload.
+ *
+ * `controls` (AppShell's `menuControls`) sit at the top of the panel, above the links. From `md`
+ * the `<details>` drops its own box and shows only them, inline at the row's end, whether it is
+ * open or not: the summary and the link copies are hidden (the links render in their own rows from
+ * `md`) and the panel is a plain row. They are rendered once, so a field keeps its state.
  */
-export function AppShellMenu({ label, children, }) {
+export function AppShellMenu({ label, controls, children, }) {
     const details = useRef(null);
     const close = (focusButton) => {
         const el = details.current;
@@ -32,11 +37,17 @@ export function AppShellMenu({ label, children, }) {
         if (focusButton)
             el.querySelector("summary")?.focus();
     };
-    return (_jsxs("details", { ref: details, className: "group md:hidden", onKeyDown: (event) => {
-            if (event.key === "Escape")
+    return (_jsxs("details", { ref: details, className: cx("group shrink-0", controls
+            ? "md:contents md:[&::details-content]:contents md:[&::details-content]:[content-visibility:visible]"
+            : "md:hidden"), onKeyDown: (event) => {
+            // A dialog opened from a control in the menu takes its own Escape; the menu stays open.
+            if (event.key === "Escape" &&
+                !(event.target instanceof Element && event.target.closest("dialog")))
                 close(true);
-        }, children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 [&::-webkit-details-marker]:hidden", focusRing), children: [_jsx("svg", { ...ICON, className: cx(ICON.className, "group-open:hidden"), children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14" }) }), _jsx("svg", { ...ICON, className: cx(ICON.className, "hidden group-open:block"), children: _jsx("path", { d: "M5 5l10 10M15 5L5 15" }) }), label] }), _jsx("div", { className: "absolute inset-x-0 top-full max-h-[calc(100dvh-var(--app-header))] overflow-y-auto overscroll-contain border-y border-slate-200 bg-white shadow-lg", onClick: (event) => {
+        }, children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none md:hidden items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 [&::-webkit-details-marker]:hidden", focusRing), children: [_jsx("svg", { ...ICON, className: cx(ICON.className, "group-open:hidden"), children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14" }) }), _jsx("svg", { ...ICON, className: cx(ICON.className, "hidden group-open:block"), children: _jsx("path", { d: "M5 5l10 10M15 5L5 15" }) }), label] }), _jsx("div", { 
+                // From `md` the panel draws no box (`contents`), so its dropdown look applies below `md` only.
+                className: "absolute inset-x-0 top-full max-h-[calc(100dvh-var(--app-header))] overflow-y-auto overscroll-contain border-y border-slate-200 bg-white shadow-lg md:contents", onClick: (event) => {
                     if (event.target instanceof Element && event.target.closest("a[href]"))
                         close(false);
-                }, children: _jsx(ContainerFrame, { className: "flex flex-col gap-3 py-3", children: children }) })] }));
+                }, children: _jsxs(ContainerFrame, { className: "flex flex-col gap-3 py-3 md:contents", children: [controls && (_jsx("div", { className: "flex flex-wrap items-center gap-2 md:flex-nowrap md:*:shrink-0 md:[&>.w-full]:w-auto", children: controls })), _jsx("div", { className: "flex flex-col gap-3 md:hidden", children: children })] }) })] }));
 }

package/dist/Card.d.ts

@@ -47,6 +47,8 @@ type CardPanelProps = CardBase & {
     actions?: ReactNode;
     /** A tinted strip across the bottom of the card, under a hairline, for the card's own actions or a total. It stays at the foot when the card is stretched in a `CardGrid`. Ignored with `dashed`. */
     footer?: ReactNode;
+    /** Take the parent's full height: the title or bar stays put and the body scrolls. The parent sets the height. Ignored with `dashed`. */
+    fill?: boolean;
     /**
      * The root element. A `div` takes no name from the title. Not on a card that is a link.
      * @default section
@@ -59,6 +61,7 @@ type CardPanelProps = CardBase & {
 type CardLinkProps = CardBase & {
     actions?: undefined;
     footer?: undefined;
+    fill?: undefined;
     as?: undefined;
     /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
     external?: boolean | undefined;
@@ -97,6 +100,9 @@ type CardLinkProps = CardBase & {
  * total; in a `CardGrid` it stays at the foot of a card that is stretched to the row's height. It
  * suits a panel, not a card that is a link, and `dashed` has none.
  *
+ * `fill` makes a panel take its parent's full height (the parent sets it): the title or bar stays
+ * put and the body scrolls. Not on a link card.
+ *
  * `href` makes the whole card one link: a hover border and the focus ring, with the link stretched
  * over the card, so it takes no `actions`, `footer` or `as`. A `TextLink`, `Button` or `Checkbox` in
  * the body sits above the link and is clickable on its own. With `render` it draws the app's own router `<Link>`

package/dist/Card.js

@@ -1,8 +1,9 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { TONE_SURFACE } from "./Callout.js";
 import { CardBadge } from "./CardBadge.js";
-import { CardBar, CardFooter, CardHeader, CardHeading, CardIcon, CardInset } from "./CardParts.js";
+import { BODY_PAD, cardBody } from "./CardBody.js";
+import { CardFooter } from "./CardParts.js";
 import { cx, focusRing, liftInteractive } from "./cx.js";
 import { renderLink } from "./link.js";
 /** A card with a `footer`: a `dashed` card stands alone and has none. */
@@ -29,12 +30,11 @@ function cardForm(asked, hasHeader) {
         tone: dashed || bar ? undefined : asked.tone,
         attention: on(asked.attention, dashed),
         icon: paddedIcon(asked, dashed || bar),
+        fill: on(asked.fill, dashed),
         size: asked.size,
         footer: false,
     };
 }
-/** The padding of a card's body by `size`. */
-const BODY_PAD = { sm: "p-3", md: "p-5", lg: "p-6" };
 function cardBorder(form) {
     if (form.dashed)
         return "border-dashed border-slate-300";
@@ -49,10 +49,10 @@ function cardPadding(form) {
     if (form.dashed) {
         return cx(form.filled ? "p-10" : "p-8", "text-center text-sm text-slate-500");
     }
-    return !form.flush && !form.bar && !form.footer && BODY_PAD[form.size];
+    return !form.flush && !form.bar && !form.footer && !form.fill && BODY_PAD[form.size];
 }
 function cardClass(form) {
-    return cx("relative scroll-mt-28 rounded-xl border target:outline-2 target:outline-violet-600", liftInteractive, cardBorder(form), form.filled && "bg-white", cardPadding(form), !form.dashed && !form.tone && "shadow-sm", (form.flush || form.bar || form.footer) && "overflow-hidden", form.footer && "flex flex-col");
+    return cx("relative scroll-mt-28 rounded-xl border target:outline-2 target:outline-violet-600", liftInteractive, cardBorder(form), form.filled && "bg-white", cardPadding(form), !form.dashed && !form.tone && "shadow-sm", (form.flush || form.bar || form.footer || form.fill) && "overflow-hidden", form.fill ? "flex h-full min-h-0 flex-col" : form.footer && "flex flex-col");
 }
 function isCardLink(props) {
     return props.href !== undefined || props.render !== undefined;
@@ -81,6 +81,9 @@ function isCardLink(props) {
  * total; in a `CardGrid` it stays at the foot of a card that is stretched to the row's height. It
  * suits a panel, not a card that is a link, and `dashed` has none.
  *
+ * `fill` makes a panel take its parent's full height (the parent sets it): the title or bar stays
+ * put and the body scrolls. Not on a link card.
+ *
  * `href` makes the whole card one link: a hover border and the focus ring, with the link stretched
  * over the card, so it takes no `actions`, `footer` or `as`. A `TextLink`, `Button` or `Checkbox` in
  * the body sits above the link and is clickable on its own. With `render` it draws the app's own router `<Link>`
@@ -95,10 +98,10 @@ export function Card(props) {
 }
 /** A card that is not a link: `as` (a `section` by default) named by its heading. */
 function PanelCard(props) {
-    const { title, titleStyle, count, status, actions, footer, bar, flush, dashed, tone, badge, inset, attention, icon, size = "md", children, ...panel } = props;
+    const { title, titleStyle, count, status, actions, footer, bar, flush, dashed, tone, badge, inset, attention, icon, fill, size = "md", children, ...panel } = props;
     const { as: Tag = "section", ...rest } = panel;
     const headingId = useId();
-    const form = withFooter(cardForm({ flush, bar, dashed, tone, attention, icon, size }, Boolean(title || actions)), footer);
+    const form = withFooter(cardForm({ flush, bar, dashed, tone, attention, icon, fill, size }, Boolean(title || actions)), footer);
     // The title names the section or article; a caller's own name wins, and a bare `div` takes none.
     const named = title &&
         Tag !== "div" &&
@@ -143,19 +146,3 @@ function LinkCard(props) {
                 headingId: undefined,
             }), badge && _jsx(CardBadge, { size: form.size, children: badge })] }));
 }
-function insetBand(form, inset) {
-    if (!inset || form.dashed)
-        return null;
-    return (_jsx(CardInset, { size: form.size, bleed: !form.flush, children: inset }));
-}
-function cardBody(form, { title, titleStyle, count, status, actions, inset, children, headingId, }) {
-    const heading = title && (_jsx(CardHeading, { id: headingId, title: title, titleStyle: titleStyle, count: count, status: status, bar: form.bar, spaced: !form.bar && !actions, size: form.size }));
-    const grow = form.footer && "flex-1";
-    const band = insetBand(form, inset);
-    if (form.bar) {
-        return (_jsxs(_Fragment, { children: [_jsx(CardBar, { heading: heading, actions: actions, size: form.size }), _jsxs("div", { className: cx(grow, !form.flush && BODY_PAD[form.size]) || undefined, children: [band, children] })] }));
-    }
-    const content = (_jsxs(_Fragment, { children: [form.icon && _jsx(CardIcon, { name: form.icon, size: form.size }), _jsx(CardHeader, { heading: heading, actions: actions, size: form.size }), band, children] }));
-    // With a footer the root has no padding, so the body pads itself and takes the room left over.
-    return form.footer ? (_jsx("div", { className: cx(grow, !form.flush && BODY_PAD[form.size]), children: content })) : (content);
-}

package/dist/CardBody.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import type { IconName } from "./icons.js";
+import type { Size } from "./size.js";
+/** The padding of a card's body by `size`. */
+export declare const BODY_PAD: Record<Size, string>;
+/** The options a card resolved (`cardForm` in `Card.tsx`) that shape its body. */
+type BodyForm = {
+    flush: boolean;
+    bar: boolean;
+    dashed: boolean;
+    icon: IconName | undefined;
+    fill: boolean;
+    footer: boolean;
+    size: Size;
+};
+type BodyParts = {
+    title: string | undefined;
+    titleStyle: "overline" | "name" | undefined;
+    count: number | undefined;
+    status: ReactNode;
+    actions: ReactNode;
+    inset: ReactNode;
+    children: ReactNode;
+    headingId: string | undefined;
+};
+export declare function cardBody(form: BodyForm, parts: BodyParts): ReactNode;
+export {};

package/dist/CardBody.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBar, CardHeader, CardHeading, CardIcon, CardInset } from "./CardParts.js";
+import { cx } from "./cx.js";
+/** The padding of a card's body by `size`. */
+export const BODY_PAD = { sm: "p-3", md: "p-5", lg: "p-6" };
+function insetBand(form, inset) {
+    if (!inset || form.dashed)
+        return null;
+    return (_jsx(CardInset, { size: form.size, bleed: !form.flush, children: inset }));
+}
+/** With `fill` the body takes the room the header (and a footer) leave, and only it scrolls. */
+const SCROLL = "min-h-0 flex-1 overflow-y-auto";
+/** The padding the body takes itself, when the root has none: never on a flush card. */
+const pad = (form) => !form.flush && BODY_PAD[form.size];
+/** The icon, header, inset band and children of a card with no bar. */
+function plainBody(form, heading, parts) {
+    const content = (_jsxs(_Fragment, { children: [form.icon && _jsx(CardIcon, { name: form.icon, size: form.size }), _jsx(CardHeader, { heading: heading, actions: parts.actions, size: form.size }), insetBand(form, parts.inset), form.fill ? _jsx("div", { className: SCROLL, children: parts.children }) : parts.children] }));
+    if (form.fill) {
+        return _jsx("div", { className: cx("flex min-h-0 flex-1 flex-col", pad(form)), children: content });
+    }
+    // With a footer the root has no padding, so the body pads itself and takes the room left over.
+    return form.footer ? _jsx("div", { className: cx("flex-1", pad(form)), children: content }) : content;
+}
+export function cardBody(form, parts) {
+    const heading = parts.title && (_jsx(CardHeading, { id: parts.headingId, title: parts.title, titleStyle: parts.titleStyle, count: parts.count, status: parts.status, bar: form.bar, spaced: !form.bar && !parts.actions, size: form.size }));
+    if (!form.bar)
+        return plainBody(form, heading, parts);
+    const grow = form.fill ? SCROLL : form.footer && "flex-1";
+    return (_jsxs(_Fragment, { children: [_jsx(CardBar, { heading: heading, actions: parts.actions, size: form.size }), _jsxs("div", { className: cx(grow, pad(form)) || undefined, children: [insetBand(form, parts.inset), parts.children] })] }));
+}

package/dist/Markdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // A minimal, SAFE markdown renderer (headings / bullets / bold). No
-// dangerouslySetInnerHTML — text is rendered as React nodes, so it can't inject HTML.
+// dangerouslySetInnerHTML: text is rendered as React nodes, so it can't inject HTML.
 function inline(text) {
     return text.split(/(\*\*[^*]+\*\*)/g).map((p, i) => p.startsWith("**") && p.endsWith("**") ? (_jsx("strong", { className: "font-semibold text-slate-900", children: p.slice(2, -2) }, i)) : (_jsx("span", { children: p }, i)));
 }

package/dist/ProgressBar.d.ts

@@ -7,16 +7,16 @@ export type BarTone = "accent" | "positive" | "warn" | "negative";
 export type BarSize = Size;
 export declare const BAR_FILL: Record<BarTone, string>;
 export declare const BAR_TRACK: Record<BarSize, string>;
-/** `part` as a percent of `whole`, held to 0–100; 0 when either is not positive. */
+/** `part` as a percent of `whole`, held between 0 and 100; 0 when either is not positive. */
 export declare function sharePercent(part: number, whole: number): number;
 /** The share as a whole percent for a screen reader: never 0 or 100 unless it truly is. */
 export declare function announcedPercent(part: number, whole: number): number;
 /**
- * A thin horizontal bar with a filled share, for progress toward a total. `value` is held to
- * 0–`max`. `label` names what it measures, for a screen reader, which also hears the percentage.
+ * A thin horizontal bar with a filled share, for progress toward a total. `value` is held
+ * between 0 and `max`. `label` names what it measures, for a screen reader, which also hears the percentage.
  */
 export declare function ProgressBar({ value, max, label, tone, size, ...rest }: {
-    /** How far along, held to 0–`max`. */
+    /** How far along, held between 0 and `max`. */
     value: number;
     /** Defaults to 100. */
     max?: number;

package/dist/ProgressBar.js

@@ -11,7 +11,7 @@ export const BAR_TRACK = {
     md: "h-2",
     lg: "h-3",
 };
-/** `part` as a percent of `whole`, held to 0–100; 0 when either is not positive. */
+/** `part` as a percent of `whole`, held between 0 and 100; 0 when either is not positive. */
 export function sharePercent(part, whole) {
     if (!(whole > 0) || !(part > 0))
         return 0;
@@ -23,8 +23,8 @@ export function announcedPercent(part, whole) {
     return share <= 0 || share >= 100 ? share : Math.min(99, Math.max(1, Math.round(share)));
 }
 /**
- * A thin horizontal bar with a filled share, for progress toward a total. `value` is held to
- * 0–`max`. `label` names what it measures, for a screen reader, which also hears the percentage.
+ * A thin horizontal bar with a filled share, for progress toward a total. `value` is held
+ * between 0 and `max`. `label` names what it measures, for a screen reader, which also hears the percentage.
  */
 export function ProgressBar({ value, max = 100, label, tone = "accent", size = "md", ...rest }) {
     const share = sharePercent(value, max);

package/dist/highlight.d.ts

@@ -3,7 +3,7 @@
  * else: no HTML, no client JS. `CodeText` maps a run to a palette utility, so a theme recolours
  * highlighted code exactly as it recolours everything else.
  *
- * The grammars are deliberately shallow — enough for examples, not a compiler front end. `text`
+ * The grammars are deliberately shallow: enough for examples, not a compiler front end. `text`
  * returns the code as one plain run, so nothing is coloured where no language is named. The
  * languages: `text`, `tsx`, `ts`, `js`, `json`, `bash`, `console` (a shell session: `$ ` commands
  * scanned as bash, everything else output), `css`, `html` (with `<script>` scanned as JS and

package/dist/highlight.js

@@ -3,7 +3,7 @@
  * else: no HTML, no client JS. `CodeText` maps a run to a palette utility, so a theme recolours
  * highlighted code exactly as it recolours everything else.
  *
- * The grammars are deliberately shallow — enough for examples, not a compiler front end. `text`
+ * The grammars are deliberately shallow: enough for examples, not a compiler front end. `text`
  * returns the code as one plain run, so nothing is coloured where no language is named. The
  * languages: `text`, `tsx`, `ts`, `js`, `json`, `bash`, `console` (a shell session: `$ ` commands
  * scanned as bash, everything else output), `css`, `html` (with `<script>` scanned as JS and
@@ -210,7 +210,7 @@ function childrenStep(scan) {
     takeChar(scan);
 }
 /**
- * JS, TS and TSX. Three modes — code, inside a tag, and children text — keep an apostrophe in
+ * JS, TS and TSX. Three modes (code, inside a tag, and children text) keep an apostrophe in
  * `<p>Don't</p>` as text rather than the start of a runaway string, and every open element records
  * the mode to return to, so a `{…}` expression that holds JSX closes back into code.
  */

package/dist/typography.d.ts

@@ -56,7 +56,7 @@ export type InlineTypographyProps<E extends ElementType> = Own & {
     as?: E;
 } & Omit<ComponentPropsWithoutRef<E>, keyof Own | "as" | "className" | "style">;
 /**
- * Marketing-scale headline — the one line at the top of a public page. `h1`,
+ * Marketing-scale headline: the one line at the top of a public page. `h1`,
  * text-4xl/tight semibold, primary text, growing to text-6xl on wider screens.
  * `PageHeading` is the title of an ordinary page, a step below; a brochure hero needs a display
  * scale, so it gets its own pinned role rather than callers overriding PageHeading's size.

package/dist/typography.js

@@ -25,7 +25,7 @@ const ALIGN = {
 /**
  * Build a semantic component that pins `variantClass` (size + weight + tracking)
  * and a default colour. The scale/weight for each role therefore lives in exactly
- * one place (the call below), and callers can only vary the colour and the element —
+ * one place (the call below), and callers can only vary the colour and the element,
  * never the pinned size/weight, and never with a class.
  */
 function typography(displayName, defaultAs, variantClass, defaultColor) {
@@ -70,7 +70,7 @@ function plainText(children) {
 }
 // --- Structural roles (block by default) -----------------------------------
 /**
- * Marketing-scale headline — the one line at the top of a public page. `h1`,
+ * Marketing-scale headline: the one line at the top of a public page. `h1`,
  * text-4xl/tight semibold, primary text, growing to text-6xl on wider screens.
  * `PageHeading` is the title of an ordinary page, a step below; a brochure hero needs a display
  * scale, so it gets its own pinned role rather than callers overriding PageHeading's size.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.10.8",
+  "version": "0.10.10",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a theme from @hackcove/themes.",
   "keywords": [
     "components",