@marktiderman/genesis-ui 2.6.0 → 2.8.0

package/dist/components/layout/form-page.d.ts

@@ -41,7 +41,7 @@ interface FormPageProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>,
  * ```tsx
  * <FormPage
  *   title="New engagement"
- *   description="Both the coach and the client will be notified."
+ *   description="Both parties will be notified."
  *   errors={submitFailed ? "Fix the highlighted fields." : undefined}
  *   onSubmit={handleSubmit(onValid)}
  *   actions={

package/dist/components/layout/form-page.js

@@ -1,4 +1,4 @@
-export { FormPage } from '../../chunk-PLIYF6KI.js';
+export { FormPage } from '../../chunk-MPI33I4K.js';
 import '../../chunk-OZZTPE7F.js';
 import '../../chunk-NZ5WBA4R.js';
 //# sourceMappingURL=form-page.js.map

package/dist/components/layout/index.d.ts

@@ -1,4 +1,5 @@
-export { A as AppShell, a as AppShellOptions, b as AppShellProps, N as NavItem, P as PageHeader, c as PageHeaderOptions, d as PageHeaderProps } from '../../AppShell-CX0M-dfc.js';
+export { A as AppShell, a as AppShellOptions, b as AppShellProps, N as NavItem, P as PageHeader, c as PageHeaderOptions, d as PageHeaderProps, e as ParentNavigation } from '../../AppShell-LXQykEqe.js';
+export { G as GenesisLinkProps, L as LinkComponent, N as NavigationNode, R as ResolvedNavigation, r as resolveNavigation } from '../../navigation-Bha0R3Fu.js';
 export { DetailPage, DetailPageProps } from './detail-page.js';
 export { FormPage, FormPageProps } from './form-page.js';
 export { D as DashboardPage, a as DashboardPageProps, G as Grid, b as GridProps, g as gridVariants } from '../../dashboard-page-C0TihRl5.js';
@@ -9,6 +10,5 @@ import 'react';
 import 'lucide-react';
 import '../../view-toggle-CahQ87PW.js';
 import '../../hooks/use-view-settings.js';
-import '../../navigation-DBwcZ6vb.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';

package/dist/components/layout/index.js

@@ -1,22 +1,22 @@
-export { AppShell, PageHeader } from '../../chunk-DWM7ELFI.js';
+export { AppShell, PageHeader } from '../../chunk-UYI3GLFJ.js';
 import '../../chunk-46TZGMFW.js';
 export { Container, Stack, containerVariants, stackVariants } from '../../chunk-4CQHPWJD.js';
-export { FormPage } from '../../chunk-PLIYF6KI.js';
+export { DashboardPage, Grid, gridVariants } from '../../chunk-ARJI2JUV.js';
+export { FormPage } from '../../chunk-MPI33I4K.js';
 import '../../chunk-OZZTPE7F.js';
 export { Section, SettingsPage, sectionHeadingVariants } from '../../chunk-P64MFQXZ.js';
-import '../../chunk-QJ6P2DW6.js';
 import '../../chunk-B2GIBUQD.js';
 import '../../chunk-NPNADZHM.js';
+export { DetailPage } from '../../chunk-AFZ76Q26.js';
+export { Split, splitVariants } from '../../chunk-D2LIXA2Y.js';
+export { GAP_CLASSES, spaceScale } from '../../chunk-AVFZ4P4B.js';
 import '../../chunk-FK42ZGGV.js';
-import '../../chunk-22XB3Q6H.js';
+import '../../chunk-QJ6P2DW6.js';
 import '../../chunk-27ELYTGE.js';
+import '../../chunk-22XB3Q6H.js';
 import '../../chunk-NWSCYLPT.js';
 import '../../chunk-F47U5KNW.js';
-export { DashboardPage, Grid, gridVariants } from '../../chunk-ARJI2JUV.js';
-export { DetailPage } from '../../chunk-AFZ76Q26.js';
-export { Split, splitVariants } from '../../chunk-D2LIXA2Y.js';
-export { GAP_CLASSES, spaceScale } from '../../chunk-AVFZ4P4B.js';
 import '../../chunk-NZ5WBA4R.js';
-import '../../chunk-CDYZRZ6U.js';
+export { resolveNavigation } from '../../chunk-WGMEVX3Y.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/patterns/index.d.ts

@@ -2,6 +2,7 @@ export { EmptyState, EmptyStateProps, NoFeaturesFound, NoFeedbackFound, NoSearch
 export { FormDescription, FormError, FormField, FormLabel } from './form-field.js';
 export { PageLoading, PageLoadingProps, pageLoadingVariants } from './page-loading.js';
 export { SettingsRow, SettingsRowProps } from './settings-row.js';
+export { SortableList, SortableListItemContext, SortableListProps, SortableListReorder } from './sortable-list.js';
 export { StatusBadge, StatusBadgeProps, StatusBadgeStatus, statusBadgeVariants } from './status-badge.js';
 export { ToggleRow, ToggleRowProps } from './toggle-row.js';
 export { UserAvatar, UserAvatarProps, userAvatarVariants } from './user-avatar.js';

package/dist/components/patterns/index.js

@@ -1,16 +1,18 @@
 export { ViewSettings, ViewToggle } from '../../chunk-46TZGMFW.js';
+export { SortableList } from '../../chunk-S7NXD37O.js';
 export { StatusBadge, statusBadgeVariants } from '../../chunk-XMK3T4TA.js';
 export { ToggleRow } from '../../chunk-6M4NHHKG.js';
+export { SettingsRow } from '../../chunk-A7AHVDG7.js';
 export { UserAvatar, userAvatarVariants } from '../../chunk-XBX6QMR5.js';
 import '../../chunk-LNFF2RBD.js';
-export { SettingsRow } from '../../chunk-A7AHVDG7.js';
+export { PageLoading, pageLoadingVariants } from '../../chunk-YRYQXU3G.js';
+import '../../chunk-OVU3Z2MT.js';
 import '../../chunk-FK42ZGGV.js';
-import '../../chunk-22XB3Q6H.js';
+import '../../chunk-QJ6P2DW6.js';
 import '../../chunk-27ELYTGE.js';
+import '../../chunk-22XB3Q6H.js';
 export { EmptyState, NoFeaturesFound, NoFeedbackFound, NoSearchResults } from '../../chunk-65SPT7EA.js';
 import '../../chunk-NWSCYLPT.js';
-export { PageLoading, pageLoadingVariants } from '../../chunk-YRYQXU3G.js';
-import '../../chunk-OVU3Z2MT.js';
 export { FormDescription, FormError, FormField, FormLabel } from '../../chunk-R7QFP6EL.js';
 import '../../chunk-F47U5KNW.js';
 import '../../chunk-NZ5WBA4R.js';

package/dist/components/patterns/sortable-list.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+interface SortableListItemContext {
+    /** The item's position as shown, from 0. */
+    index: number;
+    /**
+     * The drag handle: drag it with a pointer, or focus it and press Space or
+     * Enter to pick the item up, the arrow keys to move it and Space or Enter
+     * again to drop it. Render it somewhere in the row.
+     */
+    handle: React.ReactNode;
+    /** True while this item is being dragged with a pointer. */
+    isDragging: boolean;
+    /** True while this item is picked up from the keyboard. */
+    isGrabbed: boolean;
+    /** Move this item without dragging, for a row menu of your own. */
+    moveUp: () => void;
+    moveDown: () => void;
+    moveTo: (index: number) => void;
+}
+interface SortableListReorder {
+    /** Key of the item that moved. */
+    key: string;
+}
+interface SortableListProps<T> {
+    items: readonly T[];
+    /** A stable key per item. Required: dragging finds the item again by key. */
+    getKey: (item: T) => string;
+    /** A name for an item, for the handle's label and announcements ("Week 1"). */
+    getItemLabel: (item: T) => string;
+    renderItem: (item: T, context: SortableListItemContext) => React.ReactNode;
+    /**
+     * Move the item at `from` to `to` (both from 0, `to` counted after the item
+     * is taken out). Each finished move calls this once: a keyboard pick-up
+     * that wanders and comes back calls nothing.
+     *
+     * The list shows the new order straight away and keeps showing it until the
+     * returned promise settles; by then `items` must be in the new order. A
+     * synchronous handler must update `items` in the same tick. A rejected
+     * promise puts the old order back and announces that the move failed. Other
+     * moves wait until this one settles.
+     */
+    onReorder: (from: number, to: number, move: SortableListReorder) => void | Promise<void>;
+    /** Accessible name of the list ("Course steps"). */
+    label: string;
+    /** Turns off dragging and every kind of move. */
+    disabled?: boolean | undefined;
+    /**
+     * A "Move" menu on each row (up, down, to top, to bottom), on by default so
+     * touch and screen-reader users always have a way to move an item. Turn it
+     * off only when the row offers `moveUp` / `moveDown` / `moveTo` itself.
+     */
+    moveMenu?: boolean | undefined;
+    className?: string | undefined;
+    itemClassName?: string | undefined;
+}
+/**
+ * A vertical list the user can rearrange: course steps, lesson blocks, form
+ * fields.
+ *
+ * Every way to move an item is equivalent, so dragging is never the only one
+ * (the same stance as KanbanBoard's "Move to…" menu):
+ * - drag the handle with a pointer;
+ * - focus the handle, Space or Enter to pick up, ↑/↓ and Home/End to move,
+ *   Space or Enter to drop, Escape to put it back (tabbing away also puts it
+ *   back); Alt+↑/↓ moves one step without picking up;
+ * - the row's "Move" menu, or `moveUp` / `moveDown` / `moveTo` from the render
+ *   context.
+ *
+ * Moves are announced in a polite live region once they succeed. Native drag
+ * and drop needs no dependency and Radix has none to offer (docs/FRAMEWORK.md
+ * rule 3).
+ *
+ * @stability Beta
+ */
+declare function SortableList<T>({ items, getKey, getItemLabel, renderItem, onReorder, label, disabled, moveMenu, className, itemClassName, }: SortableListProps<T>): React.JSX.Element;
+
+export { SortableList, type SortableListItemContext, type SortableListProps, type SortableListReorder };

package/dist/components/patterns/sortable-list.js

@@ -0,0 +1,5 @@
+export { SortableList } from '../../chunk-S7NXD37O.js';
+import '../../chunk-QJ6P2DW6.js';
+import '../../chunk-NZ5WBA4R.js';
+//# sourceMappingURL=sortable-list.js.map
+//# sourceMappingURL=sortable-list.js.map

package/dist/components/patterns/sortable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"sortable-list.js"}

package/dist/components/rich-text/rich-text-editor.d.ts

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import { Editor } from '@tiptap/react';
+import { R as RichTextDoc, a as RichTextHeadingLevel } from '../../rich-text-doc-C54fME2C.js';
+import { Node } from '@tiptap/core';
+
+/**
+ * VideoEmbed — a Tiptap node for YouTube, Vimeo and Loom players.
+ *
+ * The node stores only `{ provider, id, hash?, title? }`, never a URL, and
+ * rebuilds the player URL from those validated parts every time it renders.
+ * A pasted `<iframe>` is accepted only when its `src` parses as one of the
+ * three hosts; any other iframe is dropped by the editor's schema.
+ *
+ * Exported for apps that assemble their own Tiptap editor and want the same
+ * embed node `RichTextEditor` uses.
+ */
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        videoEmbed: {
+            /**
+             * Insert a video embed from a YouTube, Vimeo or Loom URL. Fails (returns
+             * false, inserts nothing) for any other URL.
+             */
+            setVideoEmbed: (options: {
+                url: string;
+                title?: string;
+            }) => ReturnType;
+        };
+    }
+}
+/**
+ * Tiptap node for YouTube, Vimeo and Loom players, stored as
+ * `{ provider, id, hash?, title? }` and rebuilt from those parts on render.
+ * Adds the `setVideoEmbed({ url, title })` command.
+ *
+ * @stability Beta
+ */
+declare const VideoEmbed: Node<any, any>;
+
+/**
+ * RichTextEditor — a WYSIWYG editor for formatted content (headings, bold,
+ * italic, underline, lists, links, quotes and optional video embeds), built
+ * on Tiptap 3 (ProseMirror) with a Genesis `Toolbar`.
+ *
+ * Lives on its own subpath, `@marktiderman/genesis-ui/rich-text-editor`, so
+ * only apps that import it need the `@tiptap/*` peers. The read-only
+ * renderer and the server-safe helpers are on `/rich-text`.
+ *
+ * @stability Beta
+ */
+
+/**
+ * What the editor accepts as a value: the document JSON (canonical), or an
+ * HTML string. HTML is parsed by the editor in the browser and reduced to
+ * the editor's schema, so it is a migration convenience, not a storage
+ * format. Output is always JSON plus derived, sanitized HTML.
+ */
+type RichTextEditorValue = RichTextDoc | string;
+/** Derived forms of the document, computed on first read. */
+interface RichTextChangeDetails {
+    /** Sanitized HTML from `richTextToHtml`. */
+    readonly html: string;
+    /** Plain text from `richTextToPlainText`. */
+    readonly text: string;
+    /** True when there is no visible text and no embed. */
+    readonly isEmpty: boolean;
+    /** Character count of the text (what `maxLength` limits). */
+    readonly characters: number;
+}
+type RichTextToolbarItem = "heading2" | "heading3" | "heading4" | "bold" | "italic" | "underline" | "bulletList" | "orderedList" | "blockquote" | "link" | "video" | "undo" | "redo";
+interface RichTextEditorLabels {
+    toolbar: string;
+    blockGroup: string;
+    markGroup: string;
+    heading2: string;
+    heading3: string;
+    heading4: string;
+    bold: string;
+    italic: string;
+    underline: string;
+    bulletList: string;
+    orderedList: string;
+    blockquote: string;
+    link: string;
+    video: string;
+    undo: string;
+    redo: string;
+    linkUrl: string;
+    linkApply: string;
+    linkRemove: string;
+    linkInvalid: string;
+    videoUrl: string;
+    videoTitle: string;
+    videoInsert: string;
+    videoInvalid: string;
+    cancel: string;
+    characterCount: (count: number, max: number | undefined) => string;
+}
+/** Imperative handle exposed through `ref`. */
+interface RichTextEditorHandle {
+    /** Move focus into the editable area. */
+    focus: () => void;
+    /** Replace the content with an empty document (fires `onChange`). */
+    clear: () => void;
+    /** The current document, sanitized. */
+    getJSON: () => RichTextDoc;
+    /** The current document as sanitized HTML. */
+    getHTML: () => string;
+    /** The underlying Tiptap editor, once mounted (null during SSR/first paint). */
+    readonly editor: Editor | null;
+}
+interface RichTextEditorProps {
+    /**
+     * Controlled value. Pass back the `doc` from `onChange` synchronously; any
+     * other document (including an older one from a debounced or deferred
+     * parent) replaces the content and resets the selection.
+     */
+    value?: RichTextEditorValue;
+    /** Initial value for an uncontrolled editor. */
+    defaultValue?: RichTextEditorValue;
+    /**
+     * Called on every edit with the sanitized document. `details` derives HTML
+     * and text lazily, so reading only `doc` costs no serialization.
+     */
+    onChange?: (doc: RichTextDoc, details: RichTextChangeDetails) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    /**
+     * `id` of the editable element. A `<label htmlFor={id}>` names the editor
+     * (wired as `aria-labelledby`, since a contenteditable is not a labelable
+     * element) and clicking it focuses the editor.
+     */
+    id?: string;
+    /**
+     * Form field name. When set, a hidden input carries the document as JSON
+     * so a native `<form>` submission includes it.
+     */
+    name?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Marks the field invalid (`aria-invalid`, destructive border). */
+    invalid?: boolean;
+    /** Placeholder shown while the document is empty. */
+    placeholder?: string;
+    /** Content is visible and selectable but not editable; the toolbar is hidden. */
+    readOnly?: boolean;
+    /** Not editable, toolbar disabled, dimmed. */
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** Heading levels offered in the toolbar and kept in the document. Default `[2, 3]`. Read at mount. */
+    headingLevels?: readonly RichTextHeadingLevel[];
+    /** Enable YouTube / Vimeo / Loom embeds (toolbar button and schema). Default `false`. Read at mount. */
+    embeds?: boolean;
+    /** Maximum characters. Typing and pasting stop at the limit. Read at mount. */
+    maxLength?: number;
+    /** Show the character count under the editor. On by default when `maxLength` is set. */
+    showCharacterCount?: boolean;
+    /** Toolbar items, in groups as listed. `false` hides the toolbar (shortcuts still work). */
+    toolbar?: false | readonly RichTextToolbarItem[];
+    /** Override any user-facing string (for translation). */
+    labels?: Partial<RichTextEditorLabels>;
+    /** Classes for the outer frame. */
+    className?: string;
+    /** Classes for the editable area (for example a taller `min-h-*`). */
+    contentClassName?: string;
+    /** Stable test/automation selector (emitted as `data-testid` on the frame). */
+    testID?: string;
+}
+/**
+ * RichTextEditor — formatted text input for lessons, notes and other
+ * long-form content.
+ *
+ * - **Value:** JSON is canonical (`RichTextDoc`). `onChange` hands you the
+ *   sanitized document plus lazily derived `html`/`text`. Store the JSON;
+ *   on the server re-run `sanitizeRichTextDoc` and derive HTML with
+ *   `richTextToHtml` (both from `/rich-text`, no DOM needed).
+ * - **Security:** output goes through the same allow-list as `RichText`;
+ *   links keep only http(s)/mailto/tel/relative URLs; embeds are rebuilt
+ *   from a validated YouTube/Vimeo/Loom id.
+ * - **SSR:** the editor mounts on the client only (Tiptap
+ *   `immediatelyRender: false`). Until then a JSON value renders read-only,
+ *   so server HTML shows the content instead of an empty box.
+ * - **Keyboard:** standard shortcuts (⌘/Ctrl+B, I, U, K for link,
+ *   ⌘/Ctrl+Alt+2/3 for headings, ⌘/Ctrl+Shift+7/8 for lists, ⌘/Ctrl+Shift+B
+ *   for quote, ⌘/Ctrl+Z / Shift+Z), shown in each toolbar tooltip. The
+ *   toolbar is one tab stop with arrow-key navigation (Radix Toolbar).
+ *
+ * @stability Beta
+ */
+declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<RichTextEditorHandle>>;
+
+export { type RichTextChangeDetails, RichTextDoc, RichTextEditor, type RichTextEditorHandle, type RichTextEditorLabels, type RichTextEditorProps, type RichTextEditorValue, RichTextHeadingLevel, type RichTextToolbarItem, VideoEmbed };