@marktiderman/genesis-ui 2.7.0 → 2.8.0

package/dist/rich-text-doc-C54fME2C.d.ts

@@ -0,0 +1,180 @@
+/**
+ * Rich text documents: the JSON shape, the allow-list that sanitizes it, and
+ * the serializers (HTML, plain text) built on that allow-list.
+ *
+ * This file has no React and no editor dependency, so a server can import it
+ * (through `@marktiderman/genesis-ui/rich-text`) to validate what a client
+ * posted and to produce the HTML it stores or sends. Everything here works in
+ * Node, edge runtimes and browsers alike: no DOM, no `DOMParser`.
+ *
+ * WHY JSON IS CANONICAL. The editor's document is a tree (ProseMirror). JSON
+ * is that tree written down; HTML is one rendering of it. Storing JSON keeps
+ * the structure the editor understands, so a later schema change is a data
+ * migration instead of an HTML scraping job. HTML is derived: produce it from
+ * the JSON with `richTextToHtml`, on the server, after `sanitizeRichTextDoc`.
+ *
+ * WHY AN ALLOW-LIST. Anything not named below is dropped: unknown node and
+ * mark types, unknown attributes, links whose URL is not http(s), mailto, tel
+ * or relative, and embeds whose URL is not a recognised YouTube, Vimeo or Loom
+ * video. The serializers only ever emit tags this file writes itself, and
+ * every text and attribute value goes through `escapeHtml`, so the output
+ * cannot carry a `<script>`, an event handler or a `javascript:` URL no matter
+ * what JSON came in.
+ */
+/** A mark on a text node. `link` carries its URL in `attrs.href`. */
+interface RichTextMark {
+    type: string;
+    attrs?: Record<string, unknown>;
+}
+/**
+ * One node of a rich text document. Structurally the same as Tiptap's
+ * `JSONContent`, so editor output can be passed straight in.
+ */
+interface RichTextNode {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: RichTextNode[];
+    marks?: RichTextMark[];
+    text?: string;
+}
+/** The root node of a rich text document. */
+interface RichTextDoc extends RichTextNode {
+    type: "doc";
+    content: RichTextNode[];
+}
+/** Heading levels a document may contain. `h1` is left to the page title. */
+type RichTextHeadingLevel = 2 | 3 | 4;
+/** Video hosts the `videoEmbed` node accepts. */
+type VideoProvider = "youtube" | "vimeo" | "loom";
+/** A video reference, reduced to what is needed to rebuild its player URL. */
+interface VideoEmbedAttrs {
+    provider: VideoProvider;
+    /** The host's video id (YouTube 11 chars, Vimeo digits, Loom alphanumeric). */
+    id: string;
+    /** Vimeo's privacy hash for unlisted videos (`vimeo.com/123/abcdef`). */
+    hash?: string;
+    /** Accessible name for the player frame. */
+    title?: string;
+}
+interface SanitizeRichTextOptions {
+    /** Heading levels to keep. Others move to the nearest kept level. Default `[2, 3, 4]`. */
+    headingLevels?: readonly RichTextHeadingLevel[];
+    /** Keep `videoEmbed` nodes. Default `true`. When false they are dropped. */
+    embeds?: boolean;
+    /**
+     * Reject documents whose text is longer than this (characters, counted
+     * after sanitizing). Throws `RichTextLimitError`. Off by default; set it on
+     * the server for every write that accepts rich text from a client.
+     */
+    maxCharacters?: number;
+    /**
+     * Reject documents with more nodes than this (every node except the root,
+     * text included, counted after sanitizing). Throws `RichTextLimitError`.
+     * Off by default; set it on the server alongside `maxCharacters`.
+     */
+    maxNodes?: number;
+    /**
+     * What to do with content nested deeper than 32 levels. `"drop"` (default)
+     * leaves it out, which suits rendering stored documents; `"throw"` rejects
+     * the whole document with `RichTextLimitError`, which suits server writes,
+     * so nothing an author wrote disappears without them being told.
+     */
+    onTooDeep?: "drop" | "throw";
+}
+/** Thrown by `sanitizeRichTextDoc` when a document breaks a limit it was given. */
+declare class RichTextLimitError extends Error {
+    readonly reason: "characters" | "nodes" | "depth";
+    readonly limit: number;
+    /** The measured size; for `"depth"`, the limit plus one. */
+    readonly actual: number;
+    constructor(reason: "characters" | "nodes" | "depth", limit: number, actual: number);
+}
+interface RichTextToHtmlOptions extends SanitizeRichTextOptions {
+    /**
+     * How video embeds are written. `"iframe"` (default) emits a player frame
+     * pointing at the host's embed URL; `"link"` emits a plain link to the
+     * video, for email and other places iframes do not run.
+     */
+    embedAs?: "iframe" | "link";
+}
+/** An empty document: one empty paragraph, which is what the editor produces. */
+declare function emptyRichTextDoc(): RichTextDoc;
+/**
+ * True when `url` is safe to put in an `href`: an absolute http(s), mailto or
+ * tel URL, a root-relative path (`/lessons/1`) or a fragment (`#notes`).
+ *
+ * Rejects `javascript:`, `data:`, `vbscript:` and every other scheme, as well
+ * as protocol-relative `//host` URLs and anything containing whitespace or
+ * control characters (browsers strip those, which is how `java\tscript:`
+ * slips past naive checks).
+ */
+declare function isSafeUrl(url: unknown): url is string;
+/**
+ * Turn what a person typed into the link field into a safe href, or `null`.
+ * `example.com/page` becomes `https://example.com/page`; an email address
+ * becomes a `mailto:` link.
+ */
+declare function normalizeLinkUrl(input: string): string | null;
+/**
+ * Recognise a YouTube, Vimeo or Loom video URL (watch, share, short and embed
+ * forms) and reduce it to its provider and id. Returns `null` for anything
+ * else, including other hosts that merely look similar.
+ */
+declare function parseVideoUrl(input: string): VideoEmbedAttrs | null;
+/** Validate untrusted embed attributes, returning a clean copy or `null`. */
+declare function sanitizeVideoEmbedAttrs(attrs: unknown): VideoEmbedAttrs | null;
+/** The player URL for an embed. Built from validated parts only. */
+declare function videoEmbedSrc(attrs: VideoEmbedAttrs): string;
+/** The page URL for an embed (what a viewer would open in a new tab). */
+declare function videoWatchUrl(attrs: VideoEmbedAttrs): string;
+/** Accessible name for an embed's frame: its title, or "YouTube video" etc. */
+declare function videoEmbedTitle(attrs: VideoEmbedAttrs): string;
+/**
+ * Attributes for an embed's `<iframe>`. Shared by the HTML serializer, the
+ * React renderer and the editor so all three emit the same frame.
+ *
+ * `sandbox` keeps the player away from top-level navigation and forms.
+ * `allow-same-origin` is safe here because the frame is always cross-origin
+ * (the player host), and the players need it for their own storage.
+ */
+declare const VIDEO_IFRAME_ATTRS: {
+    readonly allow: "accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture";
+    readonly loading: "lazy";
+    readonly referrerPolicy: "strict-origin-when-cross-origin";
+    readonly sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox";
+};
+/**
+ * Validate an untrusted value as a rich text document and return a clean
+ * copy that contains only allow-listed nodes, marks and attributes.
+ *
+ * `null`, a string or a malformed object becomes an empty document. Run
+ * this on the server on every write, before storing the JSON or deriving
+ * HTML from it, with limits so a client cannot store an oversized or
+ * pathologically nested document:
+ *
+ * ```ts
+ * sanitizeRichTextDoc(body, { maxCharacters: 50_000, maxNodes: 5_000, onTooDeep: "throw" });
+ * ```
+ *
+ * Without limits it never throws; with them it throws `RichTextLimitError`.
+ */
+declare function sanitizeRichTextDoc(input: unknown, options?: SanitizeRichTextOptions): RichTextDoc;
+/** True when `value` is shaped like a rich text document (`{ type: "doc" }`). */
+declare function isRichTextDoc(value: unknown): value is RichTextDoc;
+/** Escape text for use in HTML element content and quoted attributes. */
+declare function escapeHtml(value: string): string;
+/**
+ * Serialize a document to HTML. The input is sanitized first, so this is
+ * safe to call on untrusted JSON; the output contains only the tags listed
+ * in this file's header, with every value escaped.
+ */
+declare function richTextToHtml(doc: unknown, options?: RichTextToHtmlOptions): string;
+/**
+ * Plain text for search indexes, previews and notifications. Blocks are
+ * separated by blank lines; embeds become "Title (url)".
+ */
+declare function richTextToPlainText(doc: unknown): string;
+/** True when the document has no visible text and no embeds. */
+declare function isRichTextEmpty(doc: unknown): boolean;
+
+export { type RichTextDoc as R, type SanitizeRichTextOptions as S, VIDEO_IFRAME_ATTRS as V, type RichTextHeadingLevel as a, RichTextLimitError as b, type RichTextMark as c, type RichTextNode as d, type RichTextToHtmlOptions as e, type VideoEmbedAttrs as f, type VideoProvider as g, emptyRichTextDoc as h, escapeHtml as i, isRichTextDoc as j, isRichTextEmpty as k, isSafeUrl as l, richTextToPlainText as m, normalizeLinkUrl as n, sanitizeVideoEmbedAttrs as o, parseVideoUrl as p, videoEmbedTitle as q, richTextToHtml as r, sanitizeRichTextDoc as s, videoWatchUrl as t, videoEmbedSrc as v };

package/dist/router/react-router.d.ts

@@ -0,0 +1,47 @@
+import { L as LinkComponent, a as NavigateFn, S as SearchParamsAdapter } from '../navigation-Bha0R3Fu.js';
+import 'react';
+
+/**
+ * {@link LinkComponent} for React Router. Pass it as `linkComponent` to
+ * `AppShell`, `StatCard` and anything else that takes one. `href` maps to
+ * React Router's `to` (query and hash included), and `testID` is forwarded as
+ * `data-testid`, as `DefaultLink` does.
+ *
+ * Genesis decides the active state and passes `aria-current` itself. This is
+ * a plain `Link`, not a `NavLink`, so the router never adds a second opinion.
+ * It forwards `ref` and unknown props, so it works as the child of a Radix
+ * `asChild` (`<Button asChild>`).
+ *
+ * @stability Beta
+ */
+declare const ReactRouterLink: LinkComponent;
+/**
+ * {@link NavigateFn} backed by React Router's `useNavigate()`. Pass it as
+ * `ResourcePage`'s `onNavigate` (or anywhere a `NavigateFn` is accepted) for
+ * client-side navigation instead of a full page load. Absolute URLs
+ * (`https://…`, `mailto:…`, `//host/…`) leave the app with a document
+ * navigation, as `defaultNavigate` does.
+ *
+ * @stability Beta
+ */
+declare function useReactRouterNavigate(): NavigateFn;
+/**
+ * {@link SearchParamsAdapter} backed by React Router's location. Pass it as
+ * `useDataFilters(key, defs, { searchParams })` so URL-synced filters go
+ * through the router (loaders re-run, back/forward stays in sync) instead of
+ * the raw History API. Like the default browser adapter, an update keeps the
+ * current `#hash`.
+ *
+ * @stability Beta
+ */
+declare function useReactRouterSearchParams(): SearchParamsAdapter;
+/**
+ * The current location as `pathname + search + hash`, the shape `AppShell`'s
+ * `activePath` expects, so nav items whose `to` names a query or hash
+ * (`/admin?tab=users`, `/settings#profile`) highlight correctly.
+ *
+ * @stability Beta
+ */
+declare function useReactRouterActivePath(): string;
+
+export { ReactRouterLink, useReactRouterActivePath, useReactRouterNavigate, useReactRouterSearchParams };

package/dist/router/react-router.js

@@ -0,0 +1,53 @@
+"use client";
+import { isExternalHref } from '../chunk-FUVWKTPL.js';
+import { useCallback, useMemo } from 'react';
+import { Link, useNavigate, useSearchParams, useLocation } from 'react-router';
+import { jsx } from 'react/jsx-runtime';
+
+var ReactRouterLink = ({ href, testID, ...props }) => (
+  // `props` carries `ref` and anything a Radix `asChild` parent merges in;
+  // React Router's `Link` forwards both to the anchor. `testID` wins over a
+  // `data-testid` in `props` (a parent's may be `undefined`), but only when
+  // given, so a parent's real one survives.
+  /* @__PURE__ */ jsx(Link, { to: href, ...props, ...testID !== void 0 ? { "data-testid": testID } : null })
+);
+function useReactRouterNavigate() {
+  const navigate = useNavigate();
+  return useCallback(
+    (path) => {
+      if (isExternalHref(path)) {
+        if (typeof window !== "undefined") window.location.assign(path);
+        return;
+      }
+      void navigate(path);
+    },
+    [navigate]
+  );
+}
+function useReactRouterSearchParams() {
+  const [searchParams] = useSearchParams();
+  const { hash } = useLocation();
+  const navigate = useNavigate();
+  const setSearchParams = useCallback(
+    (next, options) => {
+      const qs = next.toString();
+      void navigate(
+        { search: qs ? `?${qs}` : "", hash },
+        { replace: options?.replace }
+      );
+    },
+    [navigate, hash]
+  );
+  return useMemo(
+    () => ({ searchParams, setSearchParams }),
+    [searchParams, setSearchParams]
+  );
+}
+function useReactRouterActivePath() {
+  const { pathname, search, hash } = useLocation();
+  return `${pathname}${search}${hash}`;
+}
+
+export { ReactRouterLink, useReactRouterActivePath, useReactRouterNavigate, useReactRouterSearchParams };
+//# sourceMappingURL=react-router.js.map
+//# sourceMappingURL=react-router.js.map

package/dist/router/react-router.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/router/react-router.tsx"],"names":[],"mappings":";;;;;AA2CO,IAAM,kBAAiC,CAAC,EAAE,IAAA,EAAM,MAAA,EAAQ,GAAG,KAAA,EAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKtE,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,IAAA,EAAO,GAAG,KAAA,EAAQ,GAAI,MAAA,KAAW,MAAA,GAAY,EAAE,aAAA,EAAe,MAAA,KAAW,IAAA,EAAO;AAAA;AAYrF,SAAS,sBAAA,GAAqC;AACnD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,OAAO,WAAA;AAAA,IACL,CAAC,IAAA,KAAS;AACR,MAAA,IAAI,cAAA,CAAe,IAAI,CAAA,EAAG;AACxB,QAAA,IAAI,OAAO,MAAA,KAAW,WAAA,EAAa,MAAA,CAAO,QAAA,CAAS,OAAO,IAAI,CAAA;AAC9D,QAAA;AAAA,MACF;AACA,MAAA,KAAK,SAAS,IAAI,CAAA;AAAA,IACpB,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AACF;AAWO,SAAS,0BAAA,GAAkD;AAChE,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,eAAA,EAAgB;AACvC,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,WAAA,EAAY;AAC7B,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,MAAM,OAAA,KAAY;AACjB,MAAA,MAAM,EAAA,GAAK,KAAK,QAAA,EAAS;AACzB,MAAA,KAAK,QAAA;AAAA,QACH,EAAE,MAAA,EAAQ,EAAA,GAAK,IAAI,EAAE,CAAA,CAAA,GAAK,IAAI,IAAA,EAAK;AAAA,QACnC,EAAE,OAAA,EAAS,OAAA,EAAS,OAAA;AAAQ,OAC9B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,UAAU,IAAI;AAAA,GACjB;AAEA,EAAA,OAAO,OAAA;AAAA,IACL,OAAO,EAAE,YAAA,EAAc,eAAA,EAAgB,CAAA;AAAA,IACvC,CAAC,cAAc,eAAe;AAAA,GAChC;AACF;AASO,SAAS,wBAAA,GAAmC;AACjD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,IAAA,KAAS,WAAA,EAAY;AAC/C,EAAA,OAAO,CAAA,EAAG,QAAQ,CAAA,EAAG,MAAM,GAAG,IAAI,CAAA,CAAA;AACpC","file":"react-router.js","sourcesContent":["\"use client\";\n\n/**\n * React Router (v7, library or framework mode) adapters for genesis-ui's\n * router-agnostic navigation contract.\n *\n * Import from `@marktiderman/genesis-ui/router/react-router`. This is the only\n * genesis-ui entry that imports `react-router`, and `react-router` is an\n * OPTIONAL peer: apps on another router never install it, and apps that do\n * not import this subpath never load it.\n *\n * ```tsx\n * import { AppShell } from \"@marktiderman/genesis-ui/layout\";\n * import {\n *   ReactRouterLink,\n *   useReactRouterActivePath,\n * } from \"@marktiderman/genesis-ui/router/react-router\";\n *\n * <AppShell linkComponent={ReactRouterLink} activePath={useReactRouterActivePath()} … />\n * ```\n */\nimport { useCallback, useMemo } from \"react\";\nimport { Link, useLocation, useNavigate, useSearchParams } from \"react-router\";\nimport type {\n  LinkComponent,\n  NavigateFn,\n  SearchParamsAdapter,\n} from \"../navigation\";\nimport { isExternalHref } from \"./utils\";\n\n/**\n * {@link LinkComponent} for React Router. Pass it as `linkComponent` to\n * `AppShell`, `StatCard` and anything else that takes one. `href` maps to\n * React Router's `to` (query and hash included), and `testID` is forwarded as\n * `data-testid`, as `DefaultLink` does.\n *\n * Genesis decides the active state and passes `aria-current` itself. This is\n * a plain `Link`, not a `NavLink`, so the router never adds a second opinion.\n * It forwards `ref` and unknown props, so it works as the child of a Radix\n * `asChild` (`<Button asChild>`).\n *\n * @stability Beta\n */\nexport const ReactRouterLink: LinkComponent = ({ href, testID, ...props }) => (\n  // `props` carries `ref` and anything a Radix `asChild` parent merges in;\n  // React Router's `Link` forwards both to the anchor. `testID` wins over a\n  // `data-testid` in `props` (a parent's may be `undefined`), but only when\n  // given, so a parent's real one survives.\n  <Link to={href} {...props} {...(testID !== undefined ? { \"data-testid\": testID } : null)} />\n);\n\n/**\n * {@link NavigateFn} backed by React Router's `useNavigate()`. Pass it as\n * `ResourcePage`'s `onNavigate` (or anywhere a `NavigateFn` is accepted) for\n * client-side navigation instead of a full page load. Absolute URLs\n * (`https://…`, `mailto:…`, `//host/…`) leave the app with a document\n * navigation, as `defaultNavigate` does.\n *\n * @stability Beta\n */\nexport function useReactRouterNavigate(): NavigateFn {\n  const navigate = useNavigate();\n  return useCallback<NavigateFn>(\n    (path) => {\n      if (isExternalHref(path)) {\n        if (typeof window !== \"undefined\") window.location.assign(path);\n        return;\n      }\n      void navigate(path);\n    },\n    [navigate],\n  );\n}\n\n/**\n * {@link SearchParamsAdapter} backed by React Router's location. Pass it as\n * `useDataFilters(key, defs, { searchParams })` so URL-synced filters go\n * through the router (loaders re-run, back/forward stays in sync) instead of\n * the raw History API. Like the default browser adapter, an update keeps the\n * current `#hash`.\n *\n * @stability Beta\n */\nexport function useReactRouterSearchParams(): SearchParamsAdapter {\n  const [searchParams] = useSearchParams();\n  const { hash } = useLocation();\n  const navigate = useNavigate();\n\n  const setSearchParams = useCallback<SearchParamsAdapter[\"setSearchParams\"]>(\n    (next, options) => {\n      const qs = next.toString();\n      void navigate(\n        { search: qs ? `?${qs}` : \"\", hash },\n        { replace: options?.replace },\n      );\n    },\n    [navigate, hash],\n  );\n\n  return useMemo(\n    () => ({ searchParams, setSearchParams }),\n    [searchParams, setSearchParams],\n  );\n}\n\n/**\n * The current location as `pathname + search + hash`, the shape `AppShell`'s\n * `activePath` expects, so nav items whose `to` names a query or hash\n * (`/admin?tab=users`, `/settings#profile`) highlight correctly.\n *\n * @stability Beta\n */\nexport function useReactRouterActivePath(): string {\n  const { pathname, search, hash } = useLocation();\n  return `${pathname}${search}${hash}`;\n}\n"]}

package/dist/router/tanstack-router.d.ts

@@ -0,0 +1,47 @@
+import { L as LinkComponent, a as NavigateFn, S as SearchParamsAdapter } from '../navigation-Bha0R3Fu.js';
+import 'react';
+
+/**
+ * {@link LinkComponent} for TanStack Router. Pass it as `linkComponent` to
+ * `AppShell`, `StatCard` and anything else that takes one. In-app hrefs
+ * navigate client-side (query and hash included, parsed by the router's
+ * `parseSearch`); absolute URLs render a plain anchor. `testID` is forwarded
+ * as `data-testid`, as `DefaultLink` does, and the active state stays the one
+ * Genesis passes: TanStack's own `aria-current` / `active` class are not
+ * applied. It forwards `ref` and unknown props, so it works as the child of a
+ * Radix `asChild` (`<Button asChild>`).
+ *
+ * @stability Beta
+ */
+declare const TanStackRouterLink: LinkComponent;
+/**
+ * {@link NavigateFn} backed by the TanStack router. Pass it as
+ * `ResourcePage`'s `onNavigate` (or anywhere a `NavigateFn` is accepted) for
+ * client-side navigation instead of a full page load. Absolute URLs
+ * (`https://…`, `mailto:…`, `//host/…`) leave the app with a document
+ * navigation, as `defaultNavigate` does.
+ *
+ * @stability Beta
+ */
+declare function useTanStackRouterNavigate(): NavigateFn;
+/**
+ * {@link SearchParamsAdapter} backed by the TanStack router's location. Pass
+ * it as `useDataFilters(key, defs, { searchParams })` so URL-synced filters go
+ * through the router (loaders and `validateSearch` run, back/forward stays in
+ * sync) instead of the raw History API. Like the default browser adapter, an
+ * update keeps the current path and `#hash`.
+ *
+ * @stability Beta
+ */
+declare function useTanStackRouterSearchParams(): SearchParamsAdapter;
+/**
+ * The current location as `pathname + search + hash`, the shape `AppShell`'s
+ * `activePath` expects, so nav items whose `to` names a query or hash
+ * (`/admin?tab=users`, `/settings#profile`) highlight correctly. Paths are the
+ * router's (basepath removed), matching the `to` your nav items use.
+ *
+ * @stability Beta
+ */
+declare function useTanStackRouterActivePath(): string;
+
+export { TanStackRouterLink, useTanStackRouterActivePath, useTanStackRouterNavigate, useTanStackRouterSearchParams };

package/dist/router/tanstack-router.js

@@ -0,0 +1,105 @@
+"use client";
+import { isExternalHref, splitNavigationHref } from '../chunk-FUVWKTPL.js';
+import { DefaultLink } from '../chunk-WGMEVX3Y.js';
+import { useCallback, useMemo } from 'react';
+import { useRouter, useRouterState, useLinkProps } from '@tanstack/react-router';
+import { jsx } from 'react/jsx-runtime';
+
+var NO_ACTIVE_PROPS = {};
+function toLocation(router, href) {
+  const { pathname, search, hash } = splitNavigationHref(href);
+  return {
+    // `""` (a bare `?q=1` or `#x`) means "this page" — TanStack's `.`.
+    to: pathname || ".",
+    search: search ? router.options.parseSearch(`?${search}`) : void 0,
+    hash: hash || void 0
+  };
+}
+function InAppLink({
+  href,
+  testID,
+  children,
+  "aria-current": ariaCurrent,
+  ref,
+  ...rest
+}) {
+  const router = useRouter();
+  const target = useMemo(() => toLocation(router, href), [router, href]);
+  const linkProps = useLinkProps(
+    {
+      ...target,
+      ...rest,
+      activeProps: NO_ACTIVE_PROPS
+      // The adapter is route-tree agnostic, so it cannot satisfy the generated
+      // route types; the target is checked at runtime by the router instead.
+    },
+    ref
+  );
+  const { "data-status": _status, ...anchorProps } = linkProps;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...anchorProps,
+      "aria-current": ariaCurrent,
+      ...testID !== void 0 ? { "data-testid": testID } : null,
+      children
+    }
+  );
+}
+var TanStackRouterLink = (props) => isExternalHref(props.href) ? /* @__PURE__ */ jsx(DefaultLink, { ...props }) : /* @__PURE__ */ jsx(InAppLink, { ...props });
+function useTanStackRouterNavigate() {
+  const router = useRouter();
+  return useCallback(
+    (path) => {
+      if (isExternalHref(path)) {
+        if (typeof window !== "undefined") window.location.assign(path);
+        return;
+      }
+      void router.navigate(
+        toLocation(router, path)
+      );
+    },
+    [router]
+  );
+}
+function useTanStackRouterSearchParams() {
+  const router = useRouter();
+  const searchStr = useRouterState({
+    select: (state) => state.location.searchStr
+  });
+  const searchParams = useMemo(
+    () => new URLSearchParams(searchStr),
+    [searchStr]
+  );
+  const setSearchParams = useCallback(
+    (next, options) => {
+      const qs = next.toString();
+      void router.navigate({
+        // The current URL path, not `.`: `.` resolves against the matched
+        // route's template, which is not this URL under a splat or
+        // not-found route.
+        to: router.state.location.pathname,
+        search: router.options.parseSearch(qs ? `?${qs}` : ""),
+        hash: true,
+        replace: options?.replace
+      });
+    },
+    [router]
+  );
+  return useMemo(
+    () => ({ searchParams, setSearchParams }),
+    [searchParams, setSearchParams]
+  );
+}
+function useTanStackRouterActivePath() {
+  return useRouterState({
+    select: ({ location }) => {
+      const search = location.searchStr && !location.searchStr.startsWith("?") ? `?${location.searchStr}` : location.searchStr;
+      return `${location.pathname}${search}${location.hash ? `#${location.hash}` : ""}`;
+    }
+  });
+}
+
+export { TanStackRouterLink, useTanStackRouterActivePath, useTanStackRouterNavigate, useTanStackRouterSearchParams };
+//# sourceMappingURL=tanstack-router.js.map
+//# sourceMappingURL=tanstack-router.js.map

package/dist/router/tanstack-router.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/router/tanstack-router.tsx"],"names":[],"mappings":"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","file":"tanstack-router.js","sourcesContent":["\"use client\";\n\n/**\n * TanStack Router adapters for genesis-ui's router-agnostic navigation\n * contract.\n *\n * Import from `@marktiderman/genesis-ui/router/tanstack-router`. This is the\n * only genesis-ui entry that imports `@tanstack/react-router`, and that\n * package is an OPTIONAL peer: apps on another router never install it, and\n * apps that do not import this subpath never load it.\n *\n * Genesis hands links a plain string `href` (`/admin?tab=users#top`), while\n * TanStack Router wants `to`, `search` and `hash` separately. These adapters\n * do that split, and they parse the query with the router's OWN\n * `parseSearch`, so a custom search serializer and `validateSearch` see the\n * same values a typed `<Link search={…}>` would produce.\n *\n * ```tsx\n * import { AppShell } from \"@marktiderman/genesis-ui/layout\";\n * import {\n *   TanStackRouterLink,\n *   useTanStackRouterActivePath,\n * } from \"@marktiderman/genesis-ui/router/tanstack-router\";\n *\n * <AppShell linkComponent={TanStackRouterLink} activePath={useTanStackRouterActivePath()} … />\n * ```\n */\nimport { useCallback, useMemo, type AnchorHTMLAttributes, type Ref } from \"react\";\nimport {\n  useLinkProps,\n  useRouter,\n  useRouterState,\n  type AnyRouter,\n} from \"@tanstack/react-router\";\nimport {\n  DefaultLink,\n  type GenesisLinkProps,\n  type LinkComponent,\n  type NavigateFn,\n  type SearchParamsAdapter,\n} from \"../navigation\";\nimport { isExternalHref, splitNavigationHref } from \"./utils\";\n\n// Genesis owns the active state (it passes `aria-current` itself, computed by\n// `isPathActive` or the app's `isActive`). TanStack's Link adds its own —\n// `aria-current=\"page\"`, `data-status=\"active\"` and an `active` class —\n// whenever ITS prefix match passes, which can disagree with Genesis (an\n// exact-match `/app` item, or a `?tab=` item) and would leave two items\n// announced as the current page. An empty `activeProps` stops the class;\n// the attributes are overridden below.\nconst NO_ACTIVE_PROPS = {};\n\n/**\n * The navigation target for a Genesis href, with the query parsed by the\n * router's own `parseSearch` (what `<Link search>` expects).\n */\nfunction toLocation(router: AnyRouter, href: string) {\n  const { pathname, search, hash } = splitNavigationHref(href);\n  return {\n    // `\"\"` (a bare `?q=1` or `#x`) means \"this page\" — TanStack's `.`.\n    to: pathname || \".\",\n    search: search ? router.options.parseSearch(`?${search}`) : undefined,\n    hash: hash || undefined,\n  };\n}\n\nfunction InAppLink({\n  href,\n  testID,\n  children,\n  \"aria-current\": ariaCurrent,\n  ref,\n  ...rest\n}: GenesisLinkProps & { ref?: Ref<HTMLAnchorElement> }) {\n  const router = useRouter();\n  const target = useMemo(() => toLocation(router, href), [router, href]);\n  // `useLinkProps` is the hook behind TanStack's `<Link>`: client-side\n  // navigation on click, `href` built through the router (basepath, rewrites,\n  // masks), preloading per the router's `defaultPreload`. Props it does not\n  // know (anything a Radix `asChild` parent merges in) pass through to the\n  // anchor, and `ref` is merged with the one it needs for preloading.\n  const linkProps = useLinkProps(\n    {\n      ...target,\n      ...rest,\n      activeProps: NO_ACTIVE_PROPS,\n      // The adapter is route-tree agnostic, so it cannot satisfy the generated\n      // route types; the target is checked at runtime by the router instead.\n    } as Parameters<typeof useLinkProps>[0],\n    ref as Parameters<typeof useLinkProps>[1],\n  ) as AnchorHTMLAttributes<HTMLAnchorElement> & {\n    \"data-status\"?: string;\n    ref?: Ref<HTMLAnchorElement>;\n  };\n  const { \"data-status\": _status, ...anchorProps } = linkProps;\n  return (\n    <a\n      {...anchorProps}\n      aria-current={ariaCurrent}\n      // Only when given, so a `data-testid` merged in by an `asChild` parent survives.\n      {...(testID !== undefined ? { \"data-testid\": testID } : null)}\n    >\n      {children}\n    </a>\n  );\n}\n\n/**\n * {@link LinkComponent} for TanStack Router. Pass it as `linkComponent` to\n * `AppShell`, `StatCard` and anything else that takes one. In-app hrefs\n * navigate client-side (query and hash included, parsed by the router's\n * `parseSearch`); absolute URLs render a plain anchor. `testID` is forwarded\n * as `data-testid`, as `DefaultLink` does, and the active state stays the one\n * Genesis passes: TanStack's own `aria-current` / `active` class are not\n * applied. It forwards `ref` and unknown props, so it works as the child of a\n * Radix `asChild` (`<Button asChild>`).\n *\n * @stability Beta\n */\nexport const TanStackRouterLink: LinkComponent = (props) =>\n  isExternalHref(props.href) ? <DefaultLink {...props} /> : <InAppLink {...props} />;\n\n/**\n * {@link NavigateFn} backed by the TanStack router. Pass it as\n * `ResourcePage`'s `onNavigate` (or anywhere a `NavigateFn` is accepted) for\n * client-side navigation instead of a full page load. Absolute URLs\n * (`https://…`, `mailto:…`, `//host/…`) leave the app with a document\n * navigation, as `defaultNavigate` does.\n *\n * @stability Beta\n */\nexport function useTanStackRouterNavigate(): NavigateFn {\n  const router = useRouter();\n  return useCallback<NavigateFn>(\n    (path) => {\n      if (isExternalHref(path)) {\n        if (typeof window !== \"undefined\") window.location.assign(path);\n        return;\n      }\n      void router.navigate(\n        toLocation(router, path) as Parameters<AnyRouter[\"navigate\"]>[0],\n      );\n    },\n    [router],\n  );\n}\n\n/**\n * {@link SearchParamsAdapter} backed by the TanStack router's location. Pass\n * it as `useDataFilters(key, defs, { searchParams })` so URL-synced filters go\n * through the router (loaders and `validateSearch` run, back/forward stays in\n * sync) instead of the raw History API. Like the default browser adapter, an\n * update keeps the current path and `#hash`.\n *\n * @stability Beta\n */\nexport function useTanStackRouterSearchParams(): SearchParamsAdapter {\n  const router = useRouter();\n  const searchStr = useRouterState({\n    select: (state) => state.location.searchStr,\n  });\n  const searchParams = useMemo(\n    () => new URLSearchParams(searchStr),\n    [searchStr],\n  );\n\n  const setSearchParams = useCallback<SearchParamsAdapter[\"setSearchParams\"]>(\n    (next, options) => {\n      const qs = next.toString();\n      void router.navigate({\n        // The current URL path, not `.`: `.` resolves against the matched\n        // route's template, which is not this URL under a splat or\n        // not-found route.\n        to: router.state.location.pathname,\n        search: router.options.parseSearch(qs ? `?${qs}` : \"\"),\n        hash: true,\n        replace: options?.replace,\n      } as Parameters<AnyRouter[\"navigate\"]>[0]);\n    },\n    [router],\n  );\n\n  return useMemo(\n    () => ({ searchParams, setSearchParams }),\n    [searchParams, setSearchParams],\n  );\n}\n\n/**\n * The current location as `pathname + search + hash`, the shape `AppShell`'s\n * `activePath` expects, so nav items whose `to` names a query or hash\n * (`/admin?tab=users`, `/settings#profile`) highlight correctly. Paths are the\n * router's (basepath removed), matching the `to` your nav items use.\n *\n * @stability Beta\n */\nexport function useTanStackRouterActivePath(): string {\n  return useRouterState({\n    select: ({ location }) => {\n      const search =\n        location.searchStr && !location.searchStr.startsWith(\"?\")\n          ? `?${location.searchStr}`\n          : location.searchStr;\n      return `${location.pathname}${search}${location.hash ? `#${location.hash}` : \"\"}`;\n    },\n  });\n}\n"]}

package/dist/{use-resource-page-Dd2VUv30.d.ts → use-resource-page-D4byuwAs.d.ts}

@@ -3,11 +3,18 @@ import { ReactNode } from 'react';
 import { Density } from './hooks/use-view-settings.js';
 import { V as ViewMode } from './view-toggle-CahQ87PW.js';
 import { Identifier, FilterParam, SortParam } from '@marktiderman/genesis-core/provider';
+import { ViewModeDefault } from './hooks/use-view-preference.js';
 
 interface DataTableColumn<T> {
     key: string;
     header: string;
-    width?: string;
+    /**
+     * Starting width. A number is pixels: the column gets exactly that width
+     * (until the user resizes it) and the rest share what is left. A string is
+     * a class name for the cell, as before (`"w-48"`); a bare px string
+     * (`"180"`, `"180px"`) also sets the width in pixels.
+     */
+    width?: string | number;
     hideBelow?: "sm" | "md" | "lg" | "xl";
     sortable?: boolean;
     render?: (item: T, value: unknown) => ReactNode;
@@ -88,6 +95,12 @@ interface ResourceColumnDef<T> {
     header?: string;
     sortable?: boolean;
     hideBelow?: "sm" | "md" | "lg" | "xl";
+    /** Starting width, passed straight through to `DataTable` (a number is px). */
+    width?: DataTableColumn<T>["width"];
+    /** Smallest width the user can resize to, in px. Passed through to `DataTable`. */
+    minWidth?: number;
+    /** Whether the column shows before the user picks columns. Default true. */
+    defaultVisible?: boolean;
     render?: (item: T, value: unknown, actions: ResourceActions<T>) => ReactNode;
     /** In-place cell editing, passed straight through to `DataTable`. */
     editable?: DataTableColumn<T>["editable"];
@@ -117,8 +130,12 @@ interface UseResourcePageProps<T> {
     initialFilters?: FilterParam[];
     /** Callback when filters change. */
     onFiltersChange?: (filters: FilterParam[]) => void;
-    /** Default view mode. */
-    defaultView?: ViewMode;
+    /**
+     * Default view mode, used until the user picks one. Pass
+     * `{ mobile, desktop }` for a viewport-dependent default (cards on phones,
+     * a table on desktops); only an explicit pick is persisted.
+     */
+    defaultView?: ViewModeDefault;
     /** Detail interaction mode. */
     detail?: "panel" | "modal" | "route" | "none";
     /** Field used for the detail title. Defaults to first column key. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marktiderman/genesis-ui",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -62,6 +62,26 @@
       "types": "./dist/provider/index.d.ts",
       "import": "./dist/provider/index.js"
     },
+    "./sheet-grid": {
+      "types": "./dist/components/sheet-grid/sheet-grid.d.ts",
+      "import": "./dist/components/sheet-grid/sheet-grid.js"
+    },
+    "./rich-text": {
+      "types": "./dist/components/rich-text/rich-text.d.ts",
+      "import": "./dist/components/rich-text/rich-text.js"
+    },
+    "./rich-text-editor": {
+      "types": "./dist/components/rich-text/rich-text-editor.d.ts",
+      "import": "./dist/components/rich-text/rich-text-editor.js"
+    },
+    "./router/react-router": {
+      "types": "./dist/router/react-router.d.ts",
+      "import": "./dist/router/react-router.js"
+    },
+    "./router/tanstack-router": {
+      "types": "./dist/router/tanstack-router.d.ts",
+      "import": "./dist/router/tanstack-router.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./accessible-icon": {
       "types": "./dist/components/ui/accessible-icon.d.ts",
@@ -255,18 +275,10 @@
       "types": "./dist/components/patterns/settings-row.d.ts",
       "import": "./dist/components/patterns/settings-row.js"
     },
-    "./sortable-list": {
-      "types": "./dist/components/patterns/sortable-list.d.ts",
-      "import": "./dist/components/patterns/sortable-list.js"
-    },
     "./sheet": {
       "types": "./dist/components/ui/sheet.d.ts",
       "import": "./dist/components/ui/sheet.js"
     },
-    "./sheet-grid": {
-      "types": "./dist/components/sheet-grid/sheet-grid.d.ts",
-      "import": "./dist/components/sheet-grid/sheet-grid.js"
-    },
     "./skeleton": {
       "types": "./dist/components/ui/skeleton.d.ts",
       "import": "./dist/components/ui/skeleton.js"
@@ -279,6 +291,10 @@
       "types": "./dist/components/ui/sonner.d.ts",
       "import": "./dist/components/ui/sonner.js"
     },
+    "./sortable-list": {
+      "types": "./dist/components/patterns/sortable-list.d.ts",
+      "import": "./dist/components/patterns/sortable-list.js"
+    },
     "./spinner": {
       "types": "./dist/components/ui/spinner.d.ts",
       "import": "./dist/components/ui/spinner.js"
@@ -338,7 +354,13 @@
   },
   "peerDependencies": {
     "@marktiderman/genesis-design-system": "^1.3.1",
+    "@tanstack/react-router": "^1.0.0",
     "@tanstack/react-virtual": "^3.14.0",
+    "@tiptap/core": "^3.31.0",
+    "@tiptap/extensions": "^3.31.0",
+    "@tiptap/pm": "^3.31.0",
+    "@tiptap/react": "^3.31.0",
+    "@tiptap/starter-kit": "^3.31.0",
     "cmdk": "^1.0.0",
     "date-fns": "^4.0.0",
     "embla-carousel-react": "^8.0.0",
@@ -351,12 +373,13 @@
     "react-dropzone": "^14.0.0 || ^15.0.0",
     "react-hook-form": "^7.0.0",
     "react-resizable-panels": "^2.0.0",
+    "react-router": "^7.0.0",
     "recharts": "^2.12.0 || ^3.0.0",
     "sonner": "^1.0.0 || ^2.0.0",
     "vaul": "^1.0.0"
   },
   "dependencies": {
-    "@marktiderman/genesis-core": "^1.3.0",
+    "@marktiderman/genesis-core": "^1.4.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.5.0"
@@ -379,9 +402,15 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@tanstack/react-query": "^5.75.0",
+    "@tanstack/react-router": "1.170.41",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "3.14.13",
     "@testing-library/react": "^16.3.2",
+    "@tiptap/core": "3.31.4",
+    "@tiptap/extensions": "3.31.4",
+    "@tiptap/pm": "3.31.4",
+    "@tiptap/react": "3.31.4",
+    "@tiptap/starter-kit": "3.31.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "date-fns": "^4.1.0",
@@ -395,6 +424,7 @@
     "react-dropzone": "^15.0.0",
     "react-hook-form": "^7.72.1",
     "react-resizable-panels": "^2.0.0",
+    "react-router": "7.14.0",
     "recharts": "^2.15.0",
     "sonner": "^1.0.0",
     "tsup": "^8.3.0",
@@ -404,8 +434,29 @@
     "zod": "^4.3.6"
   },
   "peerDependenciesMeta": {
+    "@tanstack/react-router": {
+      "optional": true
+    },
     "@tanstack/react-virtual": {
       "optional": true
+    },
+    "@tiptap/core": {
+      "optional": true
+    },
+    "@tiptap/extensions": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "react-router": {
+      "optional": true
     }
   },
   "scripts": {