@hoardodile/ui 0.0.0

package/dist/components/page-header.js

@@ -0,0 +1,44 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+var mergeTheme = {
+  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
+  spacing: ["chip", "control", "nav", "sidebar", "panel"],
+  tracking: ["label"],
+  shadow: ["card", "dialog"],
+  container: ["reading", "medium", "content"],
+  font: ["doc", "heading"],
+  ease: ["standard"],
+  animate: ["skel", "pop"]
+};
+var twMerge = extendTailwindMerge({
+  extend: { theme: mergeTheme }
+});
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function PageHeader(props) {
+  const { title, count, description, actions, className } = props;
+  return /* @__PURE__ */ jsxs("header", { className: cn("mb-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-x-6 gap-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-3", children: [
+        title !== void 0 ? /* @__PURE__ */ jsx("h1", { className: "text-doc-heading font-bold text-foreground", children: title }) : null,
+        count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-ui text-muted-foreground", children: count }) : null
+      ] }),
+      actions !== void 0 ? (
+        // `ml-auto` keeps a wrapped actions line right-aligned on
+        // narrow viewports, matching the same-line justify-between.
+        /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center gap-4 pb-1", children: actions })
+      ) : null
+    ] }),
+    description !== void 0 ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-ui text-muted-foreground", children: description }) : null
+  ] });
+}
+
+export { PageHeader };
+//# sourceMappingURL=page-header.js.map
+//# sourceMappingURL=page-header.js.map

package/dist/components/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/page-header.tsx"],"names":[],"mappings":";;;;;AAQO,IAAM,UAAA,GAAa;AAAA,EACzB,MAAM,CAAC,MAAA,EAAQ,MAAM,KAAA,EAAO,WAAA,EAAa,eAAe,OAAO,CAAA;AAAA,EAC/D,SAAS,CAAC,MAAA,EAAQ,SAAA,EAAW,KAAA,EAAO,WAAW,OAAO,CAAA;AAAA,EACtD,QAAA,EAAU,CAAC,OAAO,CAAA;AAAA,EAClB,MAAA,EAAQ,CAAC,MAAA,EAAQ,QAAQ,CAAA;AAAA,EACzB,SAAA,EAAW,CAAC,SAAA,EAAW,QAAA,EAAU,SAAS,CAAA;AAAA,EAC1C,IAAA,EAAM,CAAC,KAAA,EAAO,SAAS,CAAA;AAAA,EACvB,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,EACjB,OAAA,EAAS,CAAC,MAAA,EAAQ,KAAK;AACxB,CAAA;AAEO,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAC1C,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA;AAClB,CAAC,CAAA;;;AClBM,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACaO,SAAS,WAAW,KAAA,EAAwB;AAClD,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,WAAU,GAAI,KAAA;AAC1D,EAAA,4BACE,QAAA,EAAA,EAAO,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,SAAS,CAAA,EACtC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0DAAA,EACd,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,QAAA,KAAA,KAAU,yBACV,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,4CAAA,EACZ,iBACF,CAAA,GACG,IAAA;AAAA,QACH,UAAU,MAAA,mBACV,GAAA,CAAC,UAAK,SAAA,EAAU,+BAAA,EAAiC,iBAAM,CAAA,GACpD;AAAA,OAAA,EACL,CAAA;AAAA,MACC,OAAA,KAAY,MAAA;AAAA;AAAA;AAAA,wBAGZ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACb,QAAA,EAAA,OAAA,EACF;AAAA,UACG;AAAA,KAAA,EACL,CAAA;AAAA,IACC,gBAAgB,MAAA,mBAChB,GAAA,CAAC,OAAE,SAAA,EAAU,oCAAA,EAAsC,uBAAY,CAAA,GAC5D;AAAA,GAAA,EACL,CAAA;AAEF","file":"page-header.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\nimport type { ReactNode } from \"react\"\n\ntype PageHeaderProps = {\n\treadonly title?: ReactNode\n\t/** Muted total on the title baseline (e.g. the item count). */\n\treadonly count?: string\n\treadonly description?: ReactNode\n\treadonly actions?: ReactNode\n\treadonly className?: string\n}\n\n/**\n * Page header — 28px bold title with the total count muted on its baseline,\n * optional muted description below, page actions on the right. The literary\n * serif (font-doc) is scoped to the documents section; chrome and index\n * pages speak in the app sans.\n */\nexport function PageHeader(props: PageHeaderProps) {\n\tconst { title, count, description, actions, className } = props\n\treturn (\n\t\t<header className={cn(\"mb-6\", className)}>\n\t\t\t<div className=\"flex flex-wrap items-end justify-between gap-x-6 gap-y-3\">\n\t\t\t\t<div className=\"flex min-w-0 items-baseline gap-3\">\n\t\t\t\t\t{title !== undefined ? (\n\t\t\t\t\t\t<h1 className=\"text-doc-heading font-bold text-foreground\">\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{count !== undefined ? (\n\t\t\t\t\t\t<span className=\"text-ui text-muted-foreground\">{count}</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{actions !== undefined ? (\n\t\t\t\t\t// `ml-auto` keeps a wrapped actions line right-aligned on\n\t\t\t\t\t// narrow viewports, matching the same-line justify-between.\n\t\t\t\t\t<div className=\"ml-auto flex shrink-0 flex-wrap items-center gap-4 pb-1\">\n\t\t\t\t\t\t{actions}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{description !== undefined ? (\n\t\t\t\t<p className=\"mt-2 text-ui text-muted-foreground\">{description}</p>\n\t\t\t) : null}\n\t\t</header>\n\t)\n}\n"]}

package/dist/components/page-scaffold.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+/** Content widths (DESIGN.md — Layout): the three fixed measures
+    index/detail pages are held to, centered beyond them. The measure is
+    the content width — padding never counts toward it (DESIGN.md),
+    so it lives on the outer wrapper, not on the measure element. Desktop
+    padding is `px-10 pt-10 pb-16`; mobile
+    and tablet keep their own tighter gutters. */
+type PageScaffoldWidth = "reading" | "medium" | "content";
+type PageScaffoldProps = {
+    readonly children: ReactNode;
+    /** Center the page at one of the three content measures; omitted when
+        the page's own component owns the measure. */
+    readonly width?: PageScaffoldWidth;
+    /** Drop the desktop bottom padding — pages ending in a sticky ActionBar. */
+    readonly bottomPad?: boolean;
+    readonly className?: string;
+};
+declare function PageScaffold(props: PageScaffoldProps): React.JSX.Element;
+type SurfaceProps = {
+    readonly children: ReactNode;
+    readonly className?: string;
+};
+declare function FlatSurface(props: SurfaceProps): React.JSX.Element;
+type PillProps = {
+    readonly children: ReactNode;
+    readonly tone?: "primary" | "secondary" | "accent" | "muted";
+    readonly className?: string;
+};
+declare function InfoPill(props: PillProps): React.JSX.Element;
+declare function RoutePendingFallback(): React.JSX.Element;
+
+export { FlatSurface, InfoPill, PageScaffold, type PageScaffoldWidth, RoutePendingFallback };

package/dist/components/page-scaffold.js

@@ -0,0 +1,157 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+var mergeTheme = {
+  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
+  spacing: ["chip", "control", "nav", "sidebar", "panel"],
+  tracking: ["label"],
+  shadow: ["card", "dialog"],
+  container: ["reading", "medium", "content"],
+  font: ["doc", "heading"],
+  ease: ["standard"],
+  animate: ["skel", "pop"]
+};
+var twMerge = extendTailwindMerge({
+  extend: { theme: mergeTheme }
+});
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Skeleton({
+  className,
+  element: Element = "div",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+function Surface({
+  as,
+  size = "default",
+  tone = "flat",
+  className,
+  ...props
+}) {
+  const Component = as || "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      "data-slot": "surface",
+      "data-size": size,
+      "data-tone": tone,
+      className: cn(
+        "rounded-md border bg-card text-card-foreground",
+        size === "default" && "p-4",
+        size === "compact" && "p-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PageHeader(props) {
+  const { title, count, description, actions, className } = props;
+  return /* @__PURE__ */ jsxs("header", { className: cn("mb-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-x-6 gap-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-3", children: [
+        title !== void 0 ? /* @__PURE__ */ jsx("h1", { className: "text-doc-heading font-bold text-foreground", children: title }) : null,
+        count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-ui text-muted-foreground", children: count }) : null
+      ] }),
+      actions !== void 0 ? (
+        // `ml-auto` keeps a wrapped actions line right-aligned on
+        // narrow viewports, matching the same-line justify-between.
+        /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center gap-4 pb-1", children: actions })
+      ) : null
+    ] }),
+    description !== void 0 ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-ui text-muted-foreground", children: description }) : null
+  ] });
+}
+var widthClasses = {
+  reading: "max-w-reading",
+  medium: "max-w-medium",
+  content: "max-w-content"
+};
+function frameClassName(props) {
+  return cn(
+    "pb-4 pt-2 px-3 md:px-4 md:pt-4.5 lg:px-10",
+    props.bottomPad !== false && "lg:pb-16",
+    props.className
+  );
+}
+function PageScaffold(props) {
+  if (props.width === void 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col", frameClassName(props)), children: props.children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: frameClassName(props), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-full flex-col",
+        widthClasses[props.width]
+      ),
+      children: props.children
+    }
+  ) });
+}
+function FlatSurface(props) {
+  return /* @__PURE__ */ jsx(Surface, { as: "section", size: "compact", className: props.className, children: props.children });
+}
+function InfoPill(props) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium",
+        pillToneClassName(props.tone),
+        props.className
+      ),
+      children: props.children
+    }
+  );
+}
+function RoutePendingFallback() {
+  return /* @__PURE__ */ jsxs(PageScaffold, { children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: (
+          // Span elements: the header wraps title in h1 and description
+          // in p, and a block div inside either is invalid HTML.
+          /* @__PURE__ */ jsx(Skeleton, { element: "span", className: "block h-8 w-64 max-w-full" })
+        ),
+        description: /* @__PURE__ */ jsx(Skeleton, { element: "span", className: "block h-4 w-full max-w-lg" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-32 rounded-lg" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-32 rounded-lg" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-32 rounded-lg md:col-span-2 xl:col-span-1" })
+    ] })
+  ] });
+}
+function pillToneClassName(tone) {
+  if (tone === "primary") {
+    return "bg-primary/10 text-primary";
+  }
+  if (tone === "secondary") {
+    return "bg-secondary text-secondary-foreground";
+  }
+  if (tone === "accent") {
+    return "bg-accent text-accent-foreground";
+  }
+  return "bg-muted text-muted-foreground";
+}
+
+export { FlatSurface, InfoPill, PageScaffold, RoutePendingFallback };
+//# sourceMappingURL=page-scaffold.js.map
+//# sourceMappingURL=page-scaffold.js.map

package/dist/components/page-scaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/skeleton.tsx","../../src/components/surface.tsx","../../src/components/page-header.tsx","../../src/components/page-scaffold.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"page-scaffold.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\nimport type { ElementType } from \"react\"\n\nfunction Skeleton({\n  className,\n  element: Element = \"div\",\n  ...props\n}: React.ComponentProps<\"div\"> & { readonly element?: ElementType }) {\n  return (\n    <Element\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n","import { cn } from \"@hoardodile/ui/lib/utils\"\nimport type * as React from \"react\"\n\ntype SurfaceProps<C extends React.ElementType = \"div\"> = {\n\tas?: C\n\tsize?: \"default\" | \"compact\"\n\t/**\n\t * Visual tone. `flat` (default) is the hairline card\n\t */\n\ttone?: \"flat\"\n} & Omit<React.ComponentPropsWithoutRef<C>, \"as\" | \"size\" | \"tone\">\n\nfunction Surface<C extends React.ElementType = \"div\">({\n\tas,\n\tsize = \"default\",\n\ttone = \"flat\",\n\tclassName,\n\t...props\n}: SurfaceProps<C>) {\n\tconst Component = as || \"div\"\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"surface\"\n\t\t\tdata-size={size}\n\t\t\tdata-tone={tone}\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-md border bg-card text-card-foreground\",\n\t\t\t\tsize === \"default\" && \"p-4\",\n\t\t\t\tsize === \"compact\" && \"p-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport { Surface }\n","import { cn } from \"@hoardodile/ui/lib/utils\"\nimport type { ReactNode } from \"react\"\n\ntype PageHeaderProps = {\n\treadonly title?: ReactNode\n\t/** Muted total on the title baseline (e.g. the item count). */\n\treadonly count?: string\n\treadonly description?: ReactNode\n\treadonly actions?: ReactNode\n\treadonly className?: string\n}\n\n/**\n * Page header — 28px bold title with the total count muted on its baseline,\n * optional muted description below, page actions on the right. The literary\n * serif (font-doc) is scoped to the documents section; chrome and index\n * pages speak in the app sans.\n */\nexport function PageHeader(props: PageHeaderProps) {\n\tconst { title, count, description, actions, className } = props\n\treturn (\n\t\t<header className={cn(\"mb-6\", className)}>\n\t\t\t<div className=\"flex flex-wrap items-end justify-between gap-x-6 gap-y-3\">\n\t\t\t\t<div className=\"flex min-w-0 items-baseline gap-3\">\n\t\t\t\t\t{title !== undefined ? (\n\t\t\t\t\t\t<h1 className=\"text-doc-heading font-bold text-foreground\">\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{count !== undefined ? (\n\t\t\t\t\t\t<span className=\"text-ui text-muted-foreground\">{count}</span>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t{actions !== undefined ? (\n\t\t\t\t\t// `ml-auto` keeps a wrapped actions line right-aligned on\n\t\t\t\t\t// narrow viewports, matching the same-line justify-between.\n\t\t\t\t\t<div className=\"ml-auto flex shrink-0 flex-wrap items-center gap-4 pb-1\">\n\t\t\t\t\t\t{actions}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{description !== undefined ? (\n\t\t\t\t<p className=\"mt-2 text-ui text-muted-foreground\">{description}</p>\n\t\t\t) : null}\n\t\t</header>\n\t)\n}\n","import { Skeleton } from \"@hoardodile/ui/components/skeleton\"\nimport { Surface } from \"@hoardodile/ui/components/surface\"\nimport { cn } from \"@hoardodile/ui/lib/utils\"\nimport type { ReactNode } from \"react\"\nimport { PageHeader } from \"./page-header\"\n\n/** Content widths (DESIGN.md — Layout): the three fixed measures\n    index/detail pages are held to, centered beyond them. The measure is\n    the content width — padding never counts toward it (DESIGN.md),\n    so it lives on the outer wrapper, not on the measure element. Desktop\n    padding is `px-10 pt-10 pb-16`; mobile\n    and tablet keep their own tighter gutters. */\nexport type PageScaffoldWidth = \"reading\" | \"medium\" | \"content\"\n\nconst widthClasses: Record<PageScaffoldWidth, string> = {\n\treading: \"max-w-reading\",\n\tmedium: \"max-w-medium\",\n\tcontent: \"max-w-content\",\n}\n\ntype PageScaffoldProps = {\n\treadonly children: ReactNode\n\t/** Center the page at one of the three content measures; omitted when\n\t    the page's own component owns the measure. */\n\treadonly width?: PageScaffoldWidth\n\t/** Drop the desktop bottom padding — pages ending in a sticky ActionBar. */\n\treadonly bottomPad?: boolean\n\treadonly className?: string\n}\n\nfunction frameClassName(props: PageScaffoldProps) {\n\treturn cn(\n\t\t\"pb-4 pt-2 px-3 md:px-4 md:pt-4.5 lg:px-10\",\n\t\tprops.bottomPad !== false && \"lg:pb-16\",\n\t\tprops.className,\n\t)\n}\n\nexport function PageScaffold(props: PageScaffoldProps) {\n\tif (props.width === undefined) {\n\t\treturn (\n\t\t\t<div className={cn(\"flex w-full flex-col\", frameClassName(props))}>\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div className={frameClassName(props)}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"mx-auto flex w-full flex-col\",\n\t\t\t\t\twidthClasses[props.width],\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\ntype SurfaceProps = {\n\treadonly children: ReactNode\n\treadonly className?: string\n}\n\nexport function FlatSurface(props: SurfaceProps) {\n\treturn (\n\t\t<Surface as=\"section\" size=\"compact\" className={props.className}>\n\t\t\t{props.children}\n\t\t</Surface>\n\t)\n}\n\ntype PillProps = {\n\treadonly children: ReactNode\n\treadonly tone?: \"primary\" | \"secondary\" | \"accent\" | \"muted\"\n\treadonly className?: string\n}\n\nexport function InfoPill(props: PillProps) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex items-center rounded-md px-2 py-1 text-xs font-medium\",\n\t\t\t\tpillToneClassName(props.tone),\n\t\t\t\tprops.className,\n\t\t\t)}\n\t\t>\n\t\t\t{props.children}\n\t\t</span>\n\t)\n}\n\nexport function RoutePendingFallback() {\n\treturn (\n\t\t<PageScaffold>\n\t\t\t<PageHeader\n\t\t\t\ttitle={\n\t\t\t\t\t// Span elements: the header wraps title in h1 and description\n\t\t\t\t\t// in p, and a block div inside either is invalid HTML.\n\t\t\t\t\t<Skeleton element=\"span\" className=\"block h-8 w-64 max-w-full\" />\n\t\t\t\t}\n\t\t\t\tdescription={\n\t\t\t\t\t<Skeleton element=\"span\" className=\"block h-4 w-full max-w-lg\" />\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-3\">\n\t\t\t\t<Skeleton className=\"h-32 rounded-lg\" />\n\t\t\t\t<Skeleton className=\"h-32 rounded-lg\" />\n\t\t\t\t<Skeleton className=\"h-32 rounded-lg md:col-span-2 xl:col-span-1\" />\n\t\t\t</div>\n\t\t</PageScaffold>\n\t)\n}\n\nfunction pillToneClassName(tone: PillProps[\"tone\"]) {\n\tif (tone === \"primary\") {\n\t\treturn \"bg-primary/10 text-primary\"\n\t}\n\n\tif (tone === \"secondary\") {\n\t\treturn \"bg-secondary text-secondary-foreground\"\n\t}\n\n\tif (tone === \"accent\") {\n\t\treturn \"bg-accent text-accent-foreground\"\n\t}\n\n\treturn \"bg-muted text-muted-foreground\"\n}\n"]}

package/dist/components/pagination-bar.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+type PaginationBarProps = {
+    readonly page: number;
+    readonly pageCount: number;
+    readonly onChangePage: (page: number) => void;
+    /** Result-count label rendered in the left slot (e.g. "56 messages"). */
+    readonly totalLabel: string;
+};
+/**
+ * The paginator: the result count on the left, balanced by the page-jump
+ * field on the right, and the centered row of h-control page chips —
+ * chevrons, first and last page always visible with an asymmetric window
+ * around the active page (one leading, two trailing) and ellipses for the
+ * gap (see {@link paginationWindow}). Below the md breakpoint the window
+ * collapses to a compact `page/total` chip, so narrow screens still see
+ * how many pages exist. Shared by every paged list (resources,
+ * characters, comments, stats, footprints).
+ */
+declare function PaginationBar(props: PaginationBarProps): React.JSX.Element;
+
+export { PaginationBar, type PaginationBarProps };