panelui-web 0.2.0 → 0.4.0

package/dist/components/kpi/index.js

@@ -25,7 +25,10 @@ const kpiVariants = tv({
     },
     variants: {
         surface: {
-            true: { root: 'rounded-3xl border bg-card p-5 text-card-foreground' },
+            true: {
+                root: 'rounded-3xl border bg-card p-5 text-card-foreground',
+                group: 'rounded-3xl border bg-card p-5 text-card-foreground',
+            },
         },
         color: {
             primary: { chart: '[--pu-color:var(--primary)]', progress: '[--pu-color:var(--primary)]' },
@@ -221,8 +224,8 @@ function KpiSeparator({ className, ...props }) {
 }
 KpiSeparator.displayName = 'Kpi.Separator';
 /** Several metrics as one panel, with a rule between each and the next. */
-function KpiGroup({ orientation = 'horizontal', className, ...props }) {
-    return _jsx("div", { className: kpiVariants({ orientation }).group({ className }), ...props });
+function KpiGroup({ orientation = 'horizontal', surface = false, className, ...props }) {
+    return _jsx("div", { className: kpiVariants({ orientation, surface }).group({ className }), ...props });
 }
 KpiGroup.displayName = 'Kpi.Group';
 export const Kpi = Object.assign(KpiRoot, {

package/dist/components/lane-board/index.d.ts

@@ -114,6 +114,13 @@ declare function LaneBoardMeta({ className, ...props }: LaneBoardMetaProps): imp
 declare namespace LaneBoardMeta {
     var displayName: string;
 }
+export interface LaneBoardAvatarProps extends ComponentProps<'span'> {
+}
+/** Who a card belongs to, as initials in a small circle. */
+declare function LaneBoardAvatar({ className, ...props }: LaneBoardAvatarProps): import("react").JSX.Element;
+declare namespace LaneBoardAvatar {
+    var displayName: string;
+}
 export declare const LaneBoard: typeof LaneBoardRoot & {
     Title: typeof LaneBoardTitle;
     Code: typeof LaneBoardCode;
@@ -121,5 +128,6 @@ export declare const LaneBoard: typeof LaneBoardRoot & {
     Steps: typeof LaneBoardSteps;
     Tag: typeof LaneBoardTag;
     Meta: typeof LaneBoardMeta;
+    Avatar: typeof LaneBoardAvatar;
 };
-export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta };
+export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, };

package/dist/components/lane-board/index.js

@@ -89,6 +89,7 @@ const laneBoardVariants = tv({
         step: 'h-1 w-4 rounded-full',
         tag: 'inline-flex items-center rounded-full border border-[color-mix(in_oklab,var(--pu-color)_35%,var(--card))] bg-[color-mix(in_oklab,var(--pu-color)_14%,transparent)] px-2 py-0.5 text-xs font-medium text-[var(--pu-color)]',
         meta: 'font-mono text-sm tabular-nums text-foreground',
+        avatar: 'flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[0.625rem] font-semibold text-muted-foreground',
     },
     variants: {
         color: {
@@ -678,6 +679,11 @@ function LaneBoardMeta({ className, ...props }) {
     return _jsx("span", { className: laneBoardVariants().meta({ className }), ...props });
 }
 LaneBoardMeta.displayName = 'LaneBoard.Meta';
+/** Who a card belongs to, as initials in a small circle. */
+function LaneBoardAvatar({ className, ...props }) {
+    return _jsx("span", { "data-slot": "lane-board-avatar", className: laneBoardVariants().avatar({ className }), ...props });
+}
+LaneBoardAvatar.displayName = 'LaneBoard.Avatar';
 export const LaneBoard = Object.assign(LaneBoardRoot, {
     Title: LaneBoardTitle,
     Code: LaneBoardCode,
@@ -685,7 +691,8 @@ export const LaneBoard = Object.assign(LaneBoardRoot, {
     Steps: LaneBoardSteps,
     Tag: LaneBoardTag,
     Meta: LaneBoardMeta,
+    Avatar: LaneBoardAvatar,
 });
 /* By name as well, for a Server Component, which cannot dot into a client
    module. */
-export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta };
+export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, };

package/dist/components/not-found/glyphs.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The shapes NotFound draws, as grids of cells.
+ *
+ * A digit is drawn at 5 by 7 and scaled up three times, so every stroke is
+ * three cells wide. Kept whole that is a solid pixel digit; reduced to the
+ * cells on its edge it is a digit drawn in outline, two rows of dots with a
+ * gap between, which is the look a stroked numeral has at this size.
+ *
+ * Digits are drawn without diagonal strokes. Two blocks that meet only at a
+ * corner come apart when reduced to their edges, so a slanted stroke would
+ * outline as a stair of separate rings.
+ *
+ * The icons Scramble turns a digit into are drawn straight onto the same 15 by
+ * 21 grid, from circles and lines, so they arrive at exactly the size of the
+ * digit they replace and need no scaling of their own.
+ */
+/** Cells across one glyph. */
+export declare const GLYPH_COLUMNS = 15;
+/** Cells down one glyph. */
+export declare const GLYPH_ROWS = 21;
+/** A glyph: which cells are on, row by row. */
+export type Glyph = boolean[][];
+/** A digit, solid or as its outline. */
+export declare function digitGlyph(character: string, fill: 'outline' | 'solid'): Glyph | null;
+/** The icons Scramble cycles through, in order. */
+export declare const ICONS: readonly Glyph[];

package/dist/components/not-found/glyphs.js

@@ -0,0 +1,141 @@
+/**
+ * The shapes NotFound draws, as grids of cells.
+ *
+ * A digit is drawn at 5 by 7 and scaled up three times, so every stroke is
+ * three cells wide. Kept whole that is a solid pixel digit; reduced to the
+ * cells on its edge it is a digit drawn in outline, two rows of dots with a
+ * gap between, which is the look a stroked numeral has at this size.
+ *
+ * Digits are drawn without diagonal strokes. Two blocks that meet only at a
+ * corner come apart when reduced to their edges, so a slanted stroke would
+ * outline as a stair of separate rings.
+ *
+ * The icons Scramble turns a digit into are drawn straight onto the same 15 by
+ * 21 grid, from circles and lines, so they arrive at exactly the size of the
+ * digit they replace and need no scaling of their own.
+ */
+/** Cells across one glyph. */
+export const GLYPH_COLUMNS = 15;
+/** Cells down one glyph. */
+export const GLYPH_ROWS = 21;
+const SCALE = 3;
+const DIGITS = {
+    '0': ['.###.', '#...#', '#...#', '#...#', '#...#', '#...#', '.###.'],
+    '1': ['.##..', '..#..', '..#..', '..#..', '..#..', '..#..', '.###.'],
+    '2': ['.###.', '#...#', '....#', '.###.', '#....', '#....', '#####'],
+    '3': ['####.', '....#', '....#', '.###.', '....#', '....#', '####.'],
+    '4': ['#..#.', '#..#.', '#..#.', '#####', '...#.', '...#.', '...#.'],
+    '5': ['#####', '#....', '####.', '....#', '....#', '....#', '####.'],
+    '6': ['.###.', '#....', '#....', '####.', '#...#', '#...#', '.###.'],
+    '7': ['#####', '....#', '....#', '...##', '...#.', '...#.', '...#.'],
+    '8': ['.###.', '#...#', '#...#', '.###.', '#...#', '#...#', '.###.'],
+    '9': ['.###.', '#...#', '#...#', '.####', '....#', '....#', '.###.'],
+};
+function empty() {
+    return Array.from({ length: GLYPH_ROWS }, () => Array(GLYPH_COLUMNS).fill(false));
+}
+/** A digit as a solid grid of cells, or `null` for a character there is no drawing of. */
+function solidDigit(character) {
+    const rows = DIGITS[character];
+    if (!rows)
+        return null;
+    const glyph = empty();
+    for (let y = 0; y < GLYPH_ROWS; y += 1) {
+        for (let x = 0; x < GLYPH_COLUMNS; x += 1) {
+            glyph[y][x] = rows[Math.floor(y / SCALE)][Math.floor(x / SCALE)] === '#';
+        }
+    }
+    return glyph;
+}
+/**
+ * Only the cells of a glyph that touch a cell outside it, corners included.
+ * Counting corners keeps a diagonal stroke as a continuous band; counting
+ * only sides leaves it as a scatter of single dots.
+ */
+function outlineOf(glyph) {
+    const on = (x, y) => glyph[y]?.[x] === true;
+    return glyph.map((row, y) => row.map((cell, x) => {
+        if (!cell)
+            return false;
+        for (let dy = -1; dy <= 1; dy += 1) {
+            for (let dx = -1; dx <= 1; dx += 1)
+                if (!on(x + dx, y + dy))
+                    return true;
+        }
+        return false;
+    }));
+}
+/** A digit, solid or as its outline. */
+export function digitGlyph(character, fill) {
+    const solid = STROKED[character] ?? solidDigit(character);
+    if (!solid)
+        return null;
+    return fill === 'solid' ? solid : outlineOf(solid);
+}
+/* -------------------------------------------------------------------------- */
+/* Icons                                                                       */
+/* -------------------------------------------------------------------------- */
+/** Distance from a point to the segment from a to b. */
+function toSegment(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy || 1)));
+    return Math.hypot(px - (ax + dx * t), py - (ay + dy * t));
+}
+/** A glyph from a test of each cell's centre. */
+function drawn(test) {
+    const glyph = empty();
+    for (let y = 0; y < GLYPH_ROWS; y += 1) {
+        for (let x = 0; x < GLYPH_COLUMNS; x += 1)
+            glyph[y][x] = test(x + 0.5, y + 0.5);
+    }
+    return glyph;
+}
+/** A ring: cells whose centre is within half a stroke of the circle. */
+const ring = (x, y, cx, cy, r, stroke) => Math.abs(Math.hypot(x - cx, y - cy) - r) <= stroke / 2;
+/** A question mark: a hook, a short stem, a dot. */
+const question = drawn((x, y) => {
+    const angle = Math.atan2(y - 6.5, x - 7.5);
+    // The hook runs from the left of the circle, over the top, round to the
+    // lower right, and stops there so the stem can drop from it.
+    const onHook = ring(x, y, 7.5, 6.5, 4.6, 2) && (y < 6.5 || angle < Math.PI * 0.35);
+    const stem = toSegment(x, y, 9.4, 10.6, 7.5, 13.2) <= 1 || toSegment(x, y, 7.5, 13.2, 7.5, 14.5) <= 1;
+    const dot = Math.hypot(x - 7.5, y - 18) <= 1.3;
+    return onHook || stem || dot;
+});
+/** A magnifying glass, the lens high and the handle running to the lower right. */
+const magnifier = drawn((x, y) => ring(x, y, 6.5, 7.5, 4.8, 2) || toSegment(x, y, 10.2, 11.6, 13.4, 17.6) <= 1.2);
+/** A map pin: a ring with a dot in it, narrowing to a point. */
+const pin = drawn((x, y) => {
+    const head = ring(x, y, 7.5, 7.5, 5, 2) && y < 10.5;
+    // The two sides run from the widest part of the ring down to the point.
+    const sides = toSegment(x, y, 3, 9.6, 7.5, 18.6) <= 1 || toSegment(x, y, 12, 9.6, 7.5, 18.6) <= 1;
+    const dot = Math.hypot(x - 7.5, y - 7.5) <= 1.5;
+    return head || sides || dot;
+});
+/*
+ * Digits drawn from strokes rather than scaled up, for the ones whose shape
+ * needs a diagonal. Each stroke is three cells wide, the same as a scaled-up
+ * pixel, so they sit with the others.
+ */
+const stroke = (x, y, ax, ay, bx, by) => toSegment(x, y, ax, ay, bx, by) <= 1.5;
+/** Distance from a point to an ellipse's outline, near enough for drawing at this size. */
+const toEllipse = (x, y, cx, cy, rx, ry) => {
+    const nx = (x - cx) / rx;
+    const ny = (y - cy) / ry;
+    const r = Math.hypot(nx, ny);
+    // Scale the radial error back to cells by the radius in that direction.
+    const along = r === 0 ? Math.min(rx, ry) : Math.hypot(nx * rx, ny * ry) / r;
+    return Math.abs(r - 1) * along;
+};
+const STROKED = {
+    // An oval nought, not a box with its corners cut.
+    '0': drawn((x, y) => toEllipse(x, y, 7.5, 10.5, 6, 9) <= 1.5),
+    // A closed four: the diagonal runs from the top of the stem down to the
+    // crossbar, and the crossbar reaches a little past the stem.
+    '4': drawn((x, y) => stroke(x, y, 10.5, 1.5, 10.5, 19.5) ||
+        stroke(x, y, 10.5, 1.5, 1.5, 14.5) ||
+        stroke(x, y, 1.5, 14.5, 13.5, 14.5)),
+};
+/** The icons Scramble cycles through, in order. */
+export const ICONS = [question, magnifier, pin];

package/dist/components/not-found/index.d.ts

@@ -0,0 +1,118 @@
+/**
+ * NotFound — an error code drawn in pixels that come apart when the pointer
+ * reaches them, with a title, a line of help and a way out underneath.
+ *
+ * ```tsx
+ * <NotFound>
+ *   <NotFound.Code code="404" effect="scatter" />
+ *   <NotFound.Title>Nothing lives here</NotFound.Title>
+ *   <NotFound.Description>The address may be mistyped, or the page has moved.</NotFound.Description>
+ *   <NotFound.Actions>…</NotFound.Actions>
+ * </NotFound>
+ * ```
+ *
+ * ## A grid of cells, not a font
+ *
+ * Each digit is a small bitmap laid on a grid of cells, and every cell is
+ * drawn as a dot or a rounded square of its own size and strength. The sizes
+ * and strengths are fixed per cell from a seed, so the code has the uneven,
+ * hand-placed texture of pixel art and still looks the same on every render.
+ * Nothing depends on a typeface loading.
+ *
+ * ## One digit reacts at a time
+ *
+ * The digit nearest the pointer is the one that reacts, and it is put back
+ * when the pointer moves away. `effect` chooses how: its cells fly apart
+ * (`scatter`), drop out one by one (`dissolve`), or travel into a small icon
+ * and back (`scramble`). On a touch screen a tap does the same, and the digit
+ * is put back a moment after the finger lifts.
+ *
+ * ## Two colours, mixed by light
+ *
+ * Every cell is either the text colour, faint, or the accent. Which one it is
+ * depends on how much light falls on it: the highlighted digit is always
+ * partly lit, a band of light goes slowly round the whole code, and the
+ * pointer lights the cells near it and leaves them fading as it moves on. Each
+ * cell turns accent at its own level of light, so a shape in half light is
+ * dithered between the two colours, the way pixel art is shaded.
+ *
+ * ## What it costs
+ *
+ * The cells are drawn on a canvas, a few hundred of them in about sixteen
+ * fills. The band asks for 30 frames a second while the code is on screen and
+ * none once it is scrolled away; with `ambient={false}` a frame is only drawn
+ * while something is moving. The canvas reads its colours from the theme each
+ * time it draws, so a change of theme needs nothing from the page.
+ */
+import { type ComponentProps } from 'react';
+/** How the digit near the pointer reacts. */
+export type NotFoundEffect = 'scatter' | 'dissolve' | 'scramble';
+/** Which of the theme's roles the highlighted digit is drawn in. */
+export type NotFoundColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
+export interface NotFoundProps extends ComponentProps<'div'> {
+    /** Draws a faint grid behind everything, fading out towards the edges. On by default. */
+    backdrop?: boolean;
+}
+/** The column the code, the title, the description and the actions stand in, centred. */
+declare function NotFoundRoot({ backdrop, className, children, ...props }: NotFoundProps): import("react").JSX.Element;
+declare namespace NotFoundRoot {
+    var displayName: string;
+}
+export interface NotFoundCodeProps extends Omit<ComponentProps<'div'>, 'children' | 'color'> {
+    /** The code to draw. Digits only; any other character leaves a blank the width of a digit. */
+    code?: string;
+    /** How the digit nearest the pointer reacts. */
+    effect?: NotFoundEffect;
+    /** Digits drawn with solid strokes three cells wide, or as their outline. */
+    fill?: 'outline' | 'solid';
+    /**
+     * A band of light that goes slowly round the code on its own. While it is
+     * on, the canvas draws about 30 frames a second when the code is on screen;
+     * turn it off and nothing is drawn until the pointer comes near.
+     */
+    ambient?: boolean;
+    /** The theme role of the accent: the highlighted digit, the band of light and the pointer's light. */
+    color?: NotFoundColor;
+    /**
+     * Which digit is lit in `color` even with nothing else lighting it, counting
+     * from 0. Defaults to the middle one. `null` lights none of them.
+     */
+    highlight?: number | null;
+    /** What a screen reader says for the code. Defaults to "Error" and the code. */
+    label?: string;
+}
+/** The code, drawn in cells on a canvas. Its box keeps the code's shape before anything is drawn. */
+declare function NotFoundCode({ code, effect, fill, color, ambient, highlight, label, className, style, ...props }: NotFoundCodeProps): import("react").JSX.Element;
+declare namespace NotFoundCode {
+    var displayName: string;
+}
+export interface NotFoundTitleProps extends ComponentProps<'h1'> {
+    /** The heading level. A page that is only this one message wants `h1`. */
+    as?: 'h1' | 'h2' | 'h3';
+}
+/** What happened, in a few words. */
+declare function NotFoundTitle({ as: Tag, className, ...props }: NotFoundTitleProps): import("react").JSX.Element;
+declare namespace NotFoundTitle {
+    var displayName: string;
+}
+export interface NotFoundDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line on what to do next. */
+declare function NotFoundDescription({ className, ...props }: NotFoundDescriptionProps): import("react").JSX.Element;
+declare namespace NotFoundDescription {
+    var displayName: string;
+}
+export interface NotFoundActionsProps extends ComponentProps<'div'> {
+}
+/** The ways out: links or buttons in a row that wraps on a narrow screen. */
+declare function NotFoundActions({ className, ...props }: NotFoundActionsProps): import("react").JSX.Element;
+declare namespace NotFoundActions {
+    var displayName: string;
+}
+export declare const NotFound: typeof NotFoundRoot & {
+    Code: typeof NotFoundCode;
+    Title: typeof NotFoundTitle;
+    Description: typeof NotFoundDescription;
+    Actions: typeof NotFoundActions;
+};
+export { NotFoundCode, NotFoundTitle, NotFoundDescription, NotFoundActions };