eidotter 0.43.0 → 0.44.0

package/README.md

@@ -116,9 +116,9 @@ for client apps and `'use client'` files.
 
 ## Upgrading
 
-Every minor with breaking or visible changes ships an upgrade guide in the package, at `node_modules/eidotter/migrations/<version>.md` (source: [`migrations/`](./migrations/)). Read every guide between your installed version and the target, oldest first. Start with [0.41.0](./migrations/0.41.0.md), then [0.43.0](./migrations/0.43.0.md).
+Every minor with breaking or visible changes ships an upgrade guide in the package, at `node_modules/eidotter/migrations/<version>.md` (source: [`migrations/`](./migrations/)). Read every guide between your installed version and the target, oldest first. Start with [0.41.0](./migrations/0.41.0.md), then [0.43.0](./migrations/0.43.0.md) and [0.44.0](./migrations/0.44.0.md).
 
-0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.43.0`.
+0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.44.0`.
 
 ## Documentation
 

package/dist/components/CmdPalette/components/CmdPalette.js

@@ -98,7 +98,12 @@ export const CmdPalette = forwardRef(({ open, onOpenChange, items, placeholder =
     useEffect(() => {
         setSelected(s => Math.min(s, Math.max(0, results.length - 1)));
     }, [results.length]);
-    // Focus input when open (React Aria handles focus trap; we steer to input)
+    // Focus the input when the palette opens. `autoFocus` on the input focuses
+    // it during the commit of the opening click or keypress, which is what
+    // mobile Safari needs to raise the on-screen keyboard (a focus() call in a
+    // later timer is outside the user gesture, so iOS focuses without a
+    // keyboard). This timer is the fallback for environments where the dialog's
+    // own focus management lands after the mount.
     useEffect(() => {
         if (open) {
             const id = window.setTimeout(() => inputRef.current?.focus(), 10);
@@ -162,9 +167,8 @@ export const CmdPalette = forwardRef(({ open, onOpenChange, items, placeholder =
     };
     return (_jsxs(DosDialog, { ref: ref, open: open, onOpenChange: onOpenChange, placement: "top", size: "lg", "aria-label": ariaLabel, className: cn('eidotter-cmdpal__container', className), head: {
             title: 'JUMP TO',
-            end: _jsx("span", { className: "eidotter-cmdpal__blink", children: "_" }),
             decorative: true,
-        }, footer: footerHint ? (_jsx("div", { className: "eidotter-cmdpal__footer", "aria-hidden": "true", children: footerHint })) : undefined, children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-controls": listboxId, "aria-expanded": true, "aria-autocomplete": "list", "aria-activedescendant": results[selected] ? `${baseId}-item-${results[selected].id}` : undefined, className: "eidotter-cmdpal__input", value: query, placeholder: placeholder, onChange: e => setQuery(e.target.value), onKeyDown: handleKeyDown }), _jsxs("ul", { ref: listRef, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "eidotter-cmdpal__results", children: [results.length === 0 && (_jsx("li", { className: "eidotter-cmdpal__empty", role: "presentation", children: emptyMessage })), results.map((item, i) => {
+        }, footer: footerHint ? (_jsx("div", { className: "eidotter-cmdpal__footer", "aria-hidden": "true", children: footerHint })) : undefined, children: [_jsx("input", { ref: inputRef, autoFocus: true, type: "text", enterKeyHint: "go", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, role: "combobox", "aria-controls": listboxId, "aria-expanded": true, "aria-autocomplete": "list", "aria-activedescendant": results[selected] ? `${baseId}-item-${results[selected].id}` : undefined, className: "eidotter-cmdpal__input", value: query, placeholder: placeholder, onChange: e => setQuery(e.target.value), onKeyDown: handleKeyDown }), _jsxs("ul", { ref: listRef, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "eidotter-cmdpal__results", children: [results.length === 0 && (_jsx("li", { className: "eidotter-cmdpal__empty", role: "presentation", children: emptyMessage })), results.map((item, i) => {
                         const isSelected = i === selected;
                         return (_jsx("li", { id: `${baseId}-item-${item.id}`, role: "option", "aria-selected": isSelected, "data-index": i, className: cn('eidotter-cmdpal__item', isSelected && 'eidotter-cmdpal__item--selected'), onMouseMove: () => {
                                 if (suppressHoverRef.current)

package/dist/components/Icon/components/Icon.d.ts

@@ -1,20 +1,20 @@
 import React, { FC } from 'react';
 type PixelIcon = FC<React.SVGProps<SVGSVGElement>>;
 declare const ICON_MAP: {
-    Info: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    Warning: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    Error: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    Done: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    Check: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    Info: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    Warning: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    Error: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    Done: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    Check: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
     Close: PixelIcon;
-    'Chevron Up': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    'Chevron Down': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    'Chevron Left': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    'Chevron Right': (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    App: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    Cancel: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    Fullscreen: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-    Add: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+    'Chevron Up': (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    'Chevron Down': (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    'Chevron Left': (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    'Chevron Right': (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    App: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    Cancel: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    Fullscreen: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+    Add: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
 };
 export type IconName = keyof typeof ICON_MAP;
 /**

package/dist/components/Icon/components/Icon.js

@@ -1,17 +1,17 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { InfoBox } from 'pixelarticons/react/InfoBox';
-import { WarningDiamond } from 'pixelarticons/react/WarningDiamond';
-import { SquareAlert } from 'pixelarticons/react/SquareAlert';
-import { Check } from 'pixelarticons/react/Check';
-import { ChevronUp } from 'pixelarticons/react/ChevronUp';
-import { ChevronDown } from 'pixelarticons/react/ChevronDown';
-import { ChevronLeft } from 'pixelarticons/react/ChevronLeft';
-import { ChevronRight } from 'pixelarticons/react/ChevronRight';
-import { WindowFrame } from 'pixelarticons/react/WindowFrame';
-import { Minus } from 'pixelarticons/react/Minus';
-import { Expand } from 'pixelarticons/react/Expand';
-import { Plus } from 'pixelarticons/react/Plus';
+import { InfoBox } from 'pixelarticons/react/InfoBox.js';
+import { WarningDiamond } from 'pixelarticons/react/WarningDiamond.js';
+import { SquareAlert } from 'pixelarticons/react/SquareAlert.js';
+import { Check } from 'pixelarticons/react/Check.js';
+import { ChevronUp } from 'pixelarticons/react/ChevronUp.js';
+import { ChevronDown } from 'pixelarticons/react/ChevronDown.js';
+import { ChevronLeft } from 'pixelarticons/react/ChevronLeft.js';
+import { ChevronRight } from 'pixelarticons/react/ChevronRight.js';
+import { WindowFrame } from 'pixelarticons/react/WindowFrame.js';
+import { Minus } from 'pixelarticons/react/Minus.js';
+import { Expand } from 'pixelarticons/react/Expand.js';
+import { Plus } from 'pixelarticons/react/Plus.js';
 import { cn } from '../../../utils/cn.js';
 /**
  * Custom pixel-art X mark — pixelarticons v2 has no standalone close/X glyph.

package/dist/components/LegalPage/components/LegalPage.d.ts

@@ -16,6 +16,13 @@ export interface LegalPageProps {
     home?: React.ReactNode;
     /** Body content — `<h2>`, `<p>`, `<ul>`, `<address>` children styled by the wrapper. */
     children: React.ReactNode;
+    /**
+     * Render inside the site's own page column (e.g. `PageShell`) instead of
+     * as a standalone page: no own 720px column, centring, padding, background
+     * or font, and a start-aligned hero without the rule under it. The type
+     * scale and body styles stay. Default `false`.
+     */
+    embedded?: boolean;
     /** Extra class on the outer wrapper */
     className?: string;
 }

package/dist/components/LegalPage/components/LegalPage.js

@@ -8,4 +8,4 @@ import { cn } from '../../../utils/cn.js';
  * `<h2>`/`<p>`/`<ul>` body content (or pre-built clauses from this module)
  * and the wrapper handles spacing, type scale, and the `>` list bullet.
  */
-export const LegalPage = ({ title, date, intro, home, children, className, ...props }) => (_jsxs("div", { className: cn('eidotter-legal-page', className), ...props, children: [home && _jsx("div", { className: "eidotter-legal-page__home", children: home }), _jsxs("article", { children: [_jsxs("header", { className: "eidotter-legal-page__hero", children: [_jsx("p", { className: "eidotter-legal-page__date", children: date }), _jsx("h1", { children: title }), intro && _jsx("div", { className: "eidotter-legal-page__intro", children: intro })] }), _jsx("div", { className: "eidotter-legal-page__body", children: children })] })] }));
+export const LegalPage = ({ title, date, intro, home, embedded = false, children, className, ...props }) => (_jsxs("div", { className: cn('eidotter-legal-page', embedded && 'eidotter-legal-page--embedded', className), ...props, children: [home && _jsx("div", { className: "eidotter-legal-page__home", children: home }), _jsxs("article", { children: [_jsxs("header", { className: "eidotter-legal-page__hero", children: [_jsx("p", { className: "eidotter-legal-page__date", children: date }), _jsx("h1", { children: title }), intro && _jsx("div", { className: "eidotter-legal-page__intro", children: intro })] }), _jsx("div", { className: "eidotter-legal-page__body", children: children })] })] }));

package/dist/components/PageShell/components/PageShell.d.ts

@@ -38,7 +38,10 @@ export interface PageShellProps extends React.HTMLAttributes<HTMLDivElement> {
      * `<main>`.
      */
     contentAs?: 'main' | 'div';
-    /** `id` for the content element, e.g. a Header `skipLinkTarget` (`#content`). */
+    /**
+     * `id` for the content element, e.g. a Header `skipLinkTarget` (`#content`).
+     * Also sets `tabIndex={-1}`, so following the skip link moves focus there.
+     */
     contentId?: string;
     /** Page sections (`PageSection`, Bench, …), stacked with a 40px gap. */
     children?: React.ReactNode;
@@ -53,6 +56,10 @@ export interface PageShellProps extends React.HTMLAttributes<HTMLDivElement> {
  * with a 40px gap. No dividers: the only lines on the page are the ones its
  * children draw (window frames, pane gaps).
  *
+ * Paints no background and sets no font: the page's own ground (a CRT tint,
+ * RetroEffects) and body font show through. Pass a `className` to paint
+ * an opaque ground.
+ *
  * Server-safe and presentational. Ref forwards to the root `<div>`.
  */
 export declare const PageShell: React.ForwardRefExoticComponent<PageShellProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/PageShell/components/PageShell.js

@@ -16,6 +16,10 @@ function PageIntro({ intro }) {
  * with a 40px gap. No dividers: the only lines on the page are the ones its
  * children draw (window frames, pane gaps).
  *
+ * Paints no background and sets no font: the page's own ground (a CRT tint,
+ * RetroEffects) and body font show through. Pass a `className` to paint
+ * an opaque ground.
+ *
  * Server-safe and presentational. Ref forwards to the root `<div>`.
  */
 export const PageShell = forwardRef(({ header, intro, footer, maxWidth, contentAs = 'main', contentId, children, className, style, ...rest }, ref) => {
@@ -24,6 +28,6 @@ export const PageShell = forwardRef(({ header, intro, footer, maxWidth, contentA
     const mergedStyle = width
         ? { ...style, '--eidotter-page-shell-max': width }
         : style;
-    return (_jsx("div", { ref: ref, className: cn('eidotter-page-shell', className), style: mergedStyle, ...rest, children: _jsxs("div", { className: "eidotter-page-shell__column", children: [header != null && header !== false && (_jsx("div", { className: "eidotter-page-shell__header", children: header })), _jsxs(Content, { id: contentId, className: "eidotter-page-shell__content", children: [intro && _jsx(PageIntro, { intro: intro }), children] }), footer != null && footer !== false && (_jsx("div", { className: "eidotter-page-shell__footer", children: footer }))] }) }));
+    return (_jsx("div", { ref: ref, className: cn('eidotter-page-shell', className), style: mergedStyle, ...rest, children: _jsxs("div", { className: "eidotter-page-shell__column", children: [header != null && header !== false && (_jsx("div", { className: "eidotter-page-shell__header", children: header })), _jsxs(Content, { id: contentId, tabIndex: contentId ? -1 : undefined, className: "eidotter-page-shell__content", children: [intro && _jsx(PageIntro, { intro: intro }), children] }), footer != null && footer !== false && (_jsx("div", { className: "eidotter-page-shell__footer", children: footer }))] }) }));
 });
 PageShell.displayName = 'PageShell';