@sole-ui/react 0.0.0-stage → 0.2.0

package/dist/hq/page-row.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, Lock } from 'lucide-react';
+import * as React from 'react';
+import { AvatarStack } from '../components/sole/avatar.js';
+import { cn } from '../lib/cn.js';
+import { dateIn, formatDate } from '../lib/dates.js';
+import { SoleLink, useSole, useToday } from '../lib/sole-provider.js';
+import { ReviewBadge } from './review-badge.js';
+const NO_TAGS = [];
+const NO_PEOPLE = [];
+export const PageRow = React.forwardRef(function PageRow({ href, title, isPrivate = false, reviewDue, spaceName, folderName, tags = NO_TAGS, commentCount = 0, owner, collaborators = NO_PEOPLE, updatedAt, today, actions, className, ...props }, ref) {
+    const current = useToday();
+    const { timeZone } = useSole();
+    const day = today ?? current;
+    const people = [owner, ...collaborators.filter((c) => c.id !== owner?.id)].filter((p) => !!p);
+    const meta = [];
+    if (spaceName)
+        meta.push({ key: 'space', text: spaceName });
+    meta.push({ key: 'folder', text: folderName ?? 'Unfiled' });
+    if (tags.length)
+        meta.push({ key: 'tags', text: tags.map((t) => t.name).join(', ') });
+    if (isPrivate)
+        meta.push({ key: 'private', text: 'Private to you' });
+    if (commentCount > 0)
+        meta.push({ key: 'comments', text: `${commentCount} ${commentCount === 1 ? 'comment' : 'comments'}` });
+    const Icon = isPrivate ? Lock : FileText;
+    return (_jsxs("div", { ...props, ref: ref, className: cn('group/page relative flex h-[52px] items-center gap-3 border-b border-hairline px-3 hover:bg-row-hover', className), children: [_jsx(Icon, { size: 16, strokeWidth: 1.8, "aria-hidden": "true", className: "shrink-0 text-subtle-foreground" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(SoleLink, { href: href, className: "truncate text-strong font-medium text-foreground outline-none after:absolute after:inset-0 focus-visible:underline", children: title || 'Untitled' }), _jsx(ReviewBadge, { reviewDue: reviewDue, today: day })] }), _jsx("p", { className: "truncate text-label font-normal text-subtle-foreground", children: meta.map((m, i) => (_jsxs("span", { children: [i > 0 && _jsx("span", { "aria-hidden": "true", className: "mx-[3px]", children: " \u00B7 " }), m.text] }, m.key))) })] }), _jsx(AvatarStack, { people: people, max: 3 }), _jsx("time", { dateTime: updatedAt, className: "tnum w-[84px] shrink-0 text-right text-label font-normal text-subtle-foreground", children: formatDate(dateIn(updatedAt, timeZone), day, { year: true }) }), actions && _jsx("div", { className: "relative z-10 opacity-0 group-hover/page:opacity-100 focus-within:opacity-100", children: actions })] }));
+});
+PageRow.displayName = 'PageRow';

package/dist/hq/priority-icon.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { Priority } from './types.ts';
+export interface PriorityIconProps extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'children'> {
+    priority: Priority;
+    size?: number;
+    /** True when the priority is written next to it (menus, buttons). */
+    decorative?: boolean;
+}
+export declare const PriorityIcon: React.ForwardRefExoticComponent<PriorityIconProps & React.RefAttributes<SVGSVGElement>>;

package/dist/hq/priority-icon.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { PRIORITY_LABELS } from './types.js';
+// Only urgent is coloured (rule 5.3); the rest are 3 bars with 1, 2 or 3 filled, so
+// priority is readable without colour (brand-and-ux 5.9).
+const FILLED = { high: 3, medium: 2, low: 1, none: 0 };
+export const PriorityIcon = React.forwardRef(function PriorityIcon({ priority, size = 16, decorative = false, className, ...props }, ref) {
+    const label = priority === 'none' ? PRIORITY_LABELS.none : `${PRIORITY_LABELS[priority]} priority`;
+    const a11y = decorative ? { 'aria-hidden': true } : { role: 'img', 'aria-label': label };
+    if (priority === 'urgent') {
+        return (_jsxs("svg", { ...props, ...a11y, ref: ref, width: size, height: size, viewBox: "0 0 16 16", className: cn('shrink-0', className), children: [!decorative && _jsx("title", { children: label }), _jsx("rect", { x: "1", y: "1", width: "14", height: "14", rx: "3", fill: "#DC2626" }), _jsx("path", { d: "M8 4.25v4.5", stroke: "#fff", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("circle", { cx: "8", cy: "11.4", r: "1.05", fill: "#fff" })] }));
+    }
+    const filled = FILLED[priority];
+    const bars = [
+        { x: 3, h: 4 },
+        { x: 7, h: 7 },
+        { x: 11, h: 10 },
+    ];
+    return (_jsxs("svg", { ...props, ...a11y, ref: ref, width: size, height: size, viewBox: "0 0 16 16", className: cn('shrink-0', className), children: [!decorative && _jsx("title", { children: label }), bars.map((bar, i) => (_jsx("rect", { x: bar.x, y: 13 - bar.h, width: "2", height: bar.h, rx: "0.75", className: i < filled ? 'fill-muted-foreground' : 'fill-faint' }, bar.x)))] }));
+});
+PriorityIcon.displayName = 'PriorityIcon';

package/dist/hq/property-type-icon.d.ts

@@ -0,0 +1,7 @@
+import type { LucideProps } from 'lucide-react';
+import * as React from 'react';
+import type { PropertyType } from './types.ts';
+export interface PropertyTypeIconProps extends Omit<LucideProps, 'ref'> {
+    type: PropertyType;
+}
+export declare const PropertyTypeIcon: React.ForwardRefExoticComponent<PropertyTypeIconProps & React.RefAttributes<SVGSVGElement>>;

package/dist/hq/property-type-icon.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Calendar, CircleChevronDown, Hash, Link as LinkIcon, ListChecks, SquareCheck, Type, User } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+// One glyph per kind of custom property (0014), in the settings list and the type picker,
+// so "Sprint" reads as a choice and "Story points" as a number at a glance.
+const ICONS = {
+    text: Type,
+    number: Hash,
+    date: Calendar,
+    select: CircleChevronDown,
+    multi_select: ListChecks,
+    person: User,
+    checkbox: SquareCheck,
+    url: LinkIcon,
+};
+export const PropertyTypeIcon = React.forwardRef(function PropertyTypeIcon({ type, className, ...props }, ref) {
+    const Icon = ICONS[type];
+    return _jsx(Icon, { strokeWidth: 1.8, ...props, ref: ref, "aria-hidden": "true", className: cn('size-3.5 shrink-0 text-muted-foreground', className), "data-type-icon": type });
+});
+PropertyTypeIcon.displayName = 'PropertyTypeIcon';

package/dist/hq/recent-item.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { SoleLinkProps } from '../lib/sole-provider.tsx';
+export interface RecentItemProps extends Omit<SoleLinkProps, 'children' | 'title'> {
+    kind: 'page' | 'work_item';
+    /** For a work item, "ENG-14 Fix the pricing copy on the plans page". */
+    title: React.ReactNode;
+    /** "Knowledge", "Engineering". */
+    where?: React.ReactNode;
+}
+/** Recent item (30.1 Recently viewed): a page or work item icon, the title, where it lives. */
+export declare const RecentItem: React.ForwardRefExoticComponent<RecentItemProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/hq/recent-item.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, SquareCheck } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { SoleLink } from '../lib/sole-provider.js';
+/** Recent item (30.1 Recently viewed): a page or work item icon, the title, where it lives. */
+export const RecentItem = React.forwardRef(function RecentItem({ kind, title, where, className, ...props }, ref) {
+    const Icon = kind === 'page' ? FileText : SquareCheck;
+    return (_jsxs(SoleLink, { ref: ref, className: cn('flex min-w-0 items-center gap-2.5 rounded-lg px-2 py-2 outline-none transition-colors duration-[120ms] hover:bg-row-hover focus-visible:shadow-[inset_0_0_0_2px_var(--brand)]', className), ...props, children: [_jsx(Icon, { size: 16, strokeWidth: 1.8, "aria-hidden": "true", className: "shrink-0 text-subtle-foreground" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-body leading-[18px] font-medium text-foreground", children: title }), where && _jsx("span", { className: "truncate text-label font-normal text-subtle-foreground", children: where })] })] }));
+});
+RecentItem.displayName = 'RecentItem';

package/dist/hq/review-badge.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { DateOnly } from '../lib/dates.ts';
+import type { ReviewState } from './types.ts';
+/** A review date this many days away, or fewer, is "due soon". */
+export declare const REVIEW_SOON_DAYS = 14;
+/**
+ * current: more than 14 days away. due: today up to 14 days away. overdue: the date
+ * has passed. unknown: never reviewed, or no next date. The same rule runs in SQL as
+ * hq.page_review_state() in Sole HQ; keep the two in step.
+ */
+export declare function reviewState(reviewDue: DateOnly | null, today: DateOnly): ReviewState;
+export interface ReviewBadgeModel {
+    tone: 'warning' | 'danger' | 'neutral';
+    label: string;
+    /** Tooltip, with the full date where there is one. */
+    title: string;
+}
+/**
+ * The short pill for list rows. Current pages get no pill at all: a badge on a third
+ * of the rows stops being read (U52).
+ */
+export declare function reviewBadge(reviewDue: DateOnly | null, today: DateOnly): ReviewBadgeModel | null;
+export interface ReviewBadgeProps extends React.ComponentPropsWithoutRef<'span'> {
+    /** The page's next review date, or null if it was never reviewed. */
+    reviewDue: DateOnly | null;
+    /** Defaults to today on the provider's clock. */
+    today?: DateOnly;
+}
+export declare const ReviewBadge: React.ForwardRefExoticComponent<ReviewBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export interface ReviewStateBadgeProps extends React.ComponentPropsWithoutRef<'span'> {
+    state: ReviewState | null | undefined;
+}
+/**
+ * The same pill from a review state alone, where the date is not known (Ask Sole's
+ * sources carry hq.page_review_state, not the date). Quiet for a current page.
+ */
+export declare const ReviewStateBadge: React.ForwardRefExoticComponent<ReviewStateBadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/hq/review-badge.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarCheck } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { daysBetween, formatDate, formatLongDate } from '../lib/dates.js';
+import { useToday } from '../lib/sole-provider.js';
+// Review pill for wiki rows (brand-and-ux 5.11). A current page shows nothing: the
+// pill only appears when there is something to do.
+/** A review date this many days away, or fewer, is "due soon". */
+export const REVIEW_SOON_DAYS = 14;
+/**
+ * current: more than 14 days away. due: today up to 14 days away. overdue: the date
+ * has passed. unknown: never reviewed, or no next date. The same rule runs in SQL as
+ * hq.page_review_state() in Sole HQ; keep the two in step.
+ */
+export function reviewState(reviewDue, today) {
+    if (!reviewDue)
+        return 'unknown';
+    if (reviewDue < today)
+        return 'overdue';
+    if (daysBetween(today, reviewDue) <= REVIEW_SOON_DAYS)
+        return 'due';
+    return 'current';
+}
+/**
+ * The short pill for list rows. Current pages get no pill at all: a badge on a third
+ * of the rows stops being read (U52).
+ */
+export function reviewBadge(reviewDue, today) {
+    const state = reviewState(reviewDue, today);
+    switch (state) {
+        case 'current':
+            return null;
+        case 'due':
+            return {
+                tone: 'warning',
+                label: `Review by ${formatDate(reviewDue, today)}`,
+                title: `Review by ${formatLongDate(reviewDue)}`,
+            };
+        case 'overdue':
+            return { tone: 'danger', label: 'Review due', title: `Review was due ${formatLongDate(reviewDue)}` };
+        case 'unknown':
+            return { tone: 'neutral', label: 'Never reviewed', title: 'Nobody has confirmed this page.' };
+    }
+}
+// One icon for review, CalendarCheck (brand-and-ux 5.7); the tone says which state.
+const TONES = {
+    warning: 'border-warning-border bg-warning-soft text-warning-text',
+    danger: 'border-danger-border bg-danger-soft text-danger-text',
+    neutral: 'border-border bg-transparent text-muted-foreground',
+};
+export const ReviewBadge = React.forwardRef(function ReviewBadge({ reviewDue, today, className, ...props }, ref) {
+    const current = useToday();
+    const badge = reviewBadge(reviewDue, today ?? current);
+    if (!badge)
+        return null;
+    const box = TONES[badge.tone];
+    return (_jsxs("span", { ...props, ref: ref, "data-review": badge.tone, title: badge.title, className: cn('inline-flex h-[22px] shrink-0 items-center gap-[5px] rounded-md border px-2 text-label whitespace-nowrap', box, className), children: [_jsx(CalendarCheck, { size: 12, strokeWidth: 1.8, "aria-hidden": "true" }), badge.label] }));
+});
+ReviewBadge.displayName = 'ReviewBadge';
+const STATE_BADGE = {
+    overdue: { tone: 'danger', label: 'Review due', title: 'Past its review date' },
+    due: { tone: 'warning', label: 'Review soon', title: 'Due for review within 14 days' },
+    unknown: { tone: 'neutral', label: 'Never reviewed', title: 'Nobody has confirmed this page.' },
+};
+/**
+ * The same pill from a review state alone, where the date is not known (Ask Sole's
+ * sources carry hq.page_review_state, not the date). Quiet for a current page.
+ */
+export const ReviewStateBadge = React.forwardRef(function ReviewStateBadge({ state, className, ...props }, ref) {
+    if (!state || state === 'current')
+        return null;
+    const badge = STATE_BADGE[state];
+    return (_jsxs("span", { ...props, ref: ref, "data-review": badge.tone, title: badge.title, className: cn('inline-flex h-[22px] shrink-0 items-center gap-[5px] rounded-md border px-2 text-label whitespace-nowrap', TONES[badge.tone], className), children: [_jsx(CalendarCheck, { size: 12, strokeWidth: 1.8, "aria-hidden": "true" }), badge.label] }));
+});
+ReviewStateBadge.displayName = 'ReviewStateBadge';

package/dist/hq/state-icon.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { StateGroup } from './types.ts';
+export declare const STATE_GROUP_LABELS: Record<StateGroup, string>;
+export interface StateIconProps extends React.ComponentPropsWithoutRef<'span'> {
+    group: StateGroup;
+    /** The state's own name, for the tooltip and screen readers. Defaults to the group's name. */
+    name?: string;
+    size?: number;
+    /** True when the name is already written next to it. */
+    decorative?: boolean;
+}
+export declare const StateIcon: React.ForwardRefExoticComponent<StateIconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/hq/state-icon.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, CircleCheck, CircleDashed, CircleX } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+// One icon shape per state group, so Backlog and Todo differ by shape and not only by
+// colour (brand-and-ux 5.8, U29). Colour is by group, never by the state's own hex.
+/** In progress: a ring with its left half filled (5.8, 02-components.png). Lucide has no such icon. */
+function CircleHalf({ size = 24, strokeWidth = 2, ...props }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 6.5a5.5 5.5 0 0 0 0 11z", fill: "currentColor", stroke: "none" })] }));
+}
+const ICONS = {
+    backlog: CircleDashed,
+    unstarted: Circle,
+    started: CircleHalf,
+    completed: CircleCheck,
+    cancelled: CircleX,
+};
+const COLOURS = {
+    backlog: 'text-state-backlog',
+    unstarted: 'text-state-unstarted',
+    started: 'text-state-started',
+    completed: 'text-state-completed',
+    cancelled: 'text-state-cancelled',
+};
+export const STATE_GROUP_LABELS = {
+    backlog: 'Backlog',
+    unstarted: 'Todo',
+    started: 'In progress',
+    completed: 'Done',
+    cancelled: 'Cancelled',
+};
+export const StateIcon = React.forwardRef(function StateIcon({ group, name, size = 16, decorative = false, className, ...props }, ref) {
+    const Icon = ICONS[group];
+    const label = name ?? STATE_GROUP_LABELS[group];
+    if (decorative) {
+        return (_jsx("span", { ...props, ref: ref, "aria-hidden": "true", className: cn('inline-flex shrink-0', COLOURS[group], className), children: _jsx(Icon, { size: size, strokeWidth: 1.8 }) }));
+    }
+    return (_jsx("span", { ...props, ref: ref, role: "img", "aria-label": label, title: label, className: cn('inline-flex shrink-0', COLOURS[group], className), children: _jsx(Icon, { size: size, strokeWidth: 1.8, "aria-hidden": "true" }) }));
+});
+StateIcon.displayName = 'StateIcon';

package/dist/hq/state-pill.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { StateGroup } from './types.ts';
+export interface StatePillProps extends React.ComponentPropsWithoutRef<'span'> {
+    state: {
+        name: string;
+        group: StateGroup;
+    };
+}
+export declare const StatePill: React.ForwardRefExoticComponent<StatePillProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/hq/state-pill.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { StateIcon } from './state-icon.js';
+// State with its name, for properties and column headers (brand-and-ux 5.8). Rows use
+// the icon alone.
+const TONES = {
+    backlog: 'bg-neutral-soft text-neutral-text',
+    unstarted: 'bg-neutral-soft text-neutral-text',
+    started: 'bg-warning-soft text-warning-text',
+    completed: 'bg-success-soft text-success-text',
+    cancelled: 'bg-neutral-soft text-subtle-foreground',
+};
+export const StatePill = React.forwardRef(function StatePill({ state, className, ...props }, ref) {
+    return (_jsxs("span", { ...props, ref: ref, className: cn('inline-flex h-[22px] shrink-0 items-center gap-[5px] rounded-md px-2 text-label whitespace-nowrap', TONES[state.group], className), children: [_jsx(StateIcon, { group: state.group, size: 12, decorative: true }), state.name] }));
+});
+StatePill.displayName = 'StatePill';

package/dist/hq/sticky.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/** The eight note colours. */
+import type { StickyColour } from './types.ts';
+export interface StickyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    colour?: StickyColour;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * A sticky (30.1 Home): one of the 8 note colours, 8px corners, 12px padding, a 13/600
+ * title and the note at 13px. Pass `onClick` or wrap it to edit; the body keeps its line breaks.
+ */
+export declare const Sticky: React.ForwardRefExoticComponent<StickyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/hq/sticky.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+const STICKY_BG = {
+    gray: 'bg-[var(--sticky-gray)]',
+    peach: 'bg-[var(--sticky-peach)]',
+    pink: 'bg-[var(--sticky-pink)]',
+    orange: 'bg-[var(--sticky-orange)]',
+    green: 'bg-[var(--sticky-green)]',
+    'light-blue': 'bg-[var(--sticky-light-blue)]',
+    'dark-blue': 'bg-[var(--sticky-dark-blue)]',
+    purple: 'bg-[var(--sticky-purple)]',
+};
+/**
+ * A sticky (30.1 Home): one of the 8 note colours, 8px corners, 12px padding, a 13/600
+ * title and the note at 13px. Pass `onClick` or wrap it to edit; the body keeps its line breaks.
+ */
+export const Sticky = React.forwardRef(function Sticky({ colour = 'gray', title, children, className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, "data-sticky": colour, className: cn('flex min-h-[132px] min-w-0 flex-col rounded-lg p-3 text-sticky-foreground', STICKY_BG[colour], className), ...props, children: [title && _jsx("p", { className: "truncate text-body leading-4 font-semibold", children: title }), children && _jsx("div", { className: cn('text-body leading-[19px] whitespace-pre-line text-secondary-foreground', title && 'mt-[5px]'), children: children })] }));
+});
+Sticky.displayName = 'Sticky';

package/dist/hq/template-card.d.ts

@@ -0,0 +1,10 @@
+import type { LucideIcon } from 'lucide-react';
+import * as React from 'react';
+export interface TemplateCardProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'title'> {
+    icon: LucideIcon;
+    title: string;
+    description: string;
+    selected?: boolean;
+}
+/** Template card (60.10 New page): icon, 13/600 name, the 12px hint; selected is blue. */
+export declare const TemplateCard: React.ForwardRefExoticComponent<TemplateCardProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/hq/template-card.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+/** Template card (60.10 New page): icon, 13/600 name, the 12px hint; selected is blue. */
+export const TemplateCard = React.forwardRef(function TemplateCard({ icon: Icon, title, description, selected = false, className, ...props }, ref) {
+    return (_jsxs("button", { ref: ref, type: "button", role: "radio", "aria-checked": selected, className: cn('flex min-h-[108px] min-w-0 flex-col items-start rounded-lg border p-3 text-left outline-none transition-colors duration-[120ms] focus-visible:shadow-[var(--focus-ring)]', selected ? 'border-brand bg-accent shadow-[inset_0_0_0_0.5px_var(--brand)]' : 'border-border bg-card hover:bg-row-hover', className), ...props, children: [_jsx(Icon, { size: 16, strokeWidth: 1.8, "aria-hidden": "true", className: selected ? 'text-accent-foreground' : 'text-foreground' }), _jsx("span", { className: cn('mt-2 text-body font-semibold', selected ? 'text-accent-foreground' : 'text-foreground'), children: title }), _jsx("span", { className: "mt-0.5 text-label font-normal text-subtle-foreground", children: description })] }));
+});
+TemplateCard.displayName = 'TemplateCard';

package/dist/hq/types.d.ts

@@ -0,0 +1,49 @@
+import type { DateOnly } from '../lib/dates.ts';
+import type { Hue } from '../lib/hue.ts';
+import type { SolePerson } from '../lib/person.ts';
+/** Where a work item's state sits in its life. Colour and icon are by group, never by the state's own hex. */
+export type StateGroup = 'backlog' | 'unstarted' | 'started' | 'completed' | 'cancelled';
+export type Priority = 'urgent' | 'high' | 'medium' | 'low' | 'none';
+export declare const PRIORITY_LABELS: Record<Priority, string>;
+/** Review state of a wiki page. `due` means due within 14 days. */
+export type ReviewState = 'current' | 'due' | 'overdue' | 'unknown';
+/** The kinds of custom property a work board can track. */
+export type PropertyType = 'text' | 'number' | 'date' | 'select' | 'multi_select' | 'person' | 'checkbox' | 'url';
+/** The colours a sticky note can take. */
+export type StickyColour = 'gray' | 'peach' | 'pink' | 'orange' | 'green' | 'light-blue' | 'dark-blue' | 'purple';
+/**
+ * Everything WorkItemRow and BoardCard read about a work item, resolved: the fields of HQ's
+ * `WorkItemView` that the two parts use. HQ builds one from a view; a demo writes one by hand.
+ */
+export interface WorkItemSummary {
+    /** "ENG-14". */
+    key: string;
+    /** Where the item opens, "/b/ENG/14". */
+    href: string;
+    title: string;
+    priority: Priority;
+    /** Not loaded yet or deleted: the parts draw the item as Todo, with no state name. */
+    state?: {
+        name: string;
+        group: StateGroup;
+    } | null;
+    labels: Array<{
+        id: string;
+        name: string;
+        hue: Hue;
+    }>;
+    dueDate: DateOnly | null;
+    /** In the order they were added. */
+    assignees: SolePerson[];
+    /** Completed or cancelled: the due date is a plain fact and never red. */
+    isDone: boolean;
+}
+/** A board's name and emoji, the two things BoardChip draws. */
+export interface BoardSummary {
+    id: string;
+    name: string;
+    /** Data, not copy: none, or an empty one, draws a folder. */
+    emoji: string | null;
+    /** "ENG". Optional: the parts link by `href`, not by key. */
+    key?: string;
+}

package/dist/hq/types.js

@@ -0,0 +1,7 @@
+export const PRIORITY_LABELS = {
+    urgent: 'Urgent',
+    high: 'High',
+    medium: 'Medium',
+    low: 'Low',
+    none: 'No priority',
+};

package/dist/hq/work-item-row.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { DateOnly } from '../lib/dates.ts';
+import type { SoleLinkProps } from '../lib/sole-provider.tsx';
+import type { WorkItemSummary } from './types.ts';
+export interface WorkItemRowProps extends Omit<SoleLinkProps, 'href' | 'children' | 'onClick'> {
+    item: WorkItemSummary;
+    /** Defaults to today on the provider's clock. */
+    today?: DateOnly;
+    selected?: boolean;
+    showAssignees?: boolean;
+    /** Keep the assignee slot's width when it is empty. False drops it, as Home's My work does (30.1). */
+    assigneeSlot?: boolean;
+    /** Open somewhere other than the full page, e.g. the side sheet. Cmd-click still opens the page. */
+    onOpen?: (item: WorkItemSummary) => void;
+}
+export declare const WorkItemRow: React.ForwardRefExoticComponent<WorkItemRowProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/hq/work-item-row.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { AvatarStack } from '../components/sole/avatar.js';
+import { LabelTags } from '../components/sole/label-tag.js';
+import { cn } from '../lib/cn.js';
+import { SoleLink } from '../lib/sole-provider.js';
+import { DueChip } from './due-chip.js';
+import { PriorityIcon } from './priority-icon.js';
+import { StateIcon } from './state-icon.js';
+export const WorkItemRow = React.forwardRef(function WorkItemRow({ item, today, selected = false, showAssignees = true, assigneeSlot = true, onOpen, className, ...props }, ref) {
+    const group = item.state?.group ?? 'unstarted';
+    const onClick = onOpen
+        ? (e) => {
+            if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
+                return;
+            e.preventDefault();
+            onOpen(item);
+        }
+        : undefined;
+    return (_jsxs(SoleLink, { ...props, ref: ref, href: item.href, onClick: onClick, "data-work-item-row": item.key, "aria-current": selected || undefined, className: cn('group/row flex min-w-0 items-center gap-2.5 border-b border-hairline px-3 text-body transition-colors duration-[120ms] outline-none', 'h-9 hover:bg-row-hover focus-visible:shadow-[inset_0_0_0_2px_var(--brand)]', selected && 'bg-accent hover:bg-accent', className), children: [_jsx(PriorityIcon, { priority: item.priority }), _jsx("span", { className: "tnum w-[52px] shrink-0 truncate text-label text-subtle-foreground", children: item.key }), _jsx(StateIcon, { group: group, name: item.state?.name }), _jsx("span", { className: cn('min-w-0 flex-1 truncate font-medium text-foreground', group === 'completed' && 'text-muted-foreground', group === 'cancelled' && 'text-subtle-foreground line-through'), children: item.title }), _jsx(LabelTags, { labels: item.labels }), _jsx("span", { className: "flex min-w-[78px] shrink-0 justify-end", children: _jsx(DueChip, { due: item.dueDate, today: today, done: item.isDone }) }), assigneeSlot && _jsx("span", { className: "flex w-11 shrink-0 justify-end", children: showAssignees && _jsx(AvatarStack, { people: item.assignees }) })] }));
+});
+WorkItemRow.displayName = 'WorkItemRow';

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from './lib/cn.ts';
+export * from './lib/person.ts';
+export * from './lib/colour.ts';
+export * from './lib/hue.ts';
+export * from './lib/platform.ts';
+export * from './lib/dates.ts';
+export * from './lib/sole-provider.tsx';
+export * from './components/ui/index.ts';
+export * from './components/sole/index.ts';
+export * from './components/shell/index.ts';
+export { toast } from 'sonner';
+export { tokens } from './tokens.generated.ts';
+export type { Token, TokenType } from './tokens.generated.ts';

package/dist/index.js

@@ -0,0 +1,12 @@
+export * from './lib/cn.js';
+export * from './lib/person.js';
+export * from './lib/colour.js';
+export * from './lib/hue.js';
+export * from './lib/platform.js';
+export * from './lib/dates.js';
+export * from './lib/sole-provider.js';
+export * from './components/ui/index.js';
+export * from './components/sole/index.js';
+export * from './components/shell/index.js';
+export { toast } from 'sonner';
+export { tokens } from './tokens.generated.js';

package/dist/lib/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/cn.js

@@ -0,0 +1,15 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+// The type scale (brand-and-ux 5.4) adds text-micro, text-label and friends. Without
+// telling tailwind-merge they are font sizes it files them as colours, and
+// cn('text-label', 'text-muted-foreground') silently drops the size.
+const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            'font-size': [{ text: ['micro', 'label', 'body', 'strong', 'read', 'title', 'page', 'doc', 'metric'] }],
+        },
+    },
+});
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/lib/colour.d.ts

@@ -0,0 +1,8 @@
+/** FNV-1a, 32 bit. Stable across runtimes, used to pick colours from ids. */
+export declare function fnv1a(value: string): number;
+/** Dialer's 8 avatar colours (brand-and-ux 5.12). Hashed on the person id, so a rename keeps the colour. */
+export declare const AVATAR_COLOURS: readonly ['#0485F7', '#0EA5A4', '#D97706', '#DB2777', '#2563EB', '#7C3AED', '#059669', '#EA580C'];
+export declare function avatarColour(id: string): string;
+/** Board colours: 8 muted two-stop gradients (brand-and-ux 5.13), for the header strip and chip dot. */
+export declare const BOARD_GRADIENTS: readonly [readonly ['#3B5B8C', '#263B5C'], readonly ['#2F6E68', '#1E4844'], readonly ['#6B4C7A', '#463151'], readonly ['#8A5A2B', '#5A3A1C'], readonly ['#4E6B3A', '#334527'], readonly ['#4A4E8C', '#31345C'], readonly ['#8A4257', '#5A2B39'], readonly ['#46607A', '#2E3F50']];
+export declare function boardGradient(id: string): readonly [string, string];

package/dist/lib/colour.js

@@ -0,0 +1,28 @@
+/** FNV-1a, 32 bit. Stable across runtimes, used to pick colours from ids. */
+export function fnv1a(value) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < value.length; i++) {
+        h ^= value.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return h >>> 0;
+}
+/** Dialer's 8 avatar colours (brand-and-ux 5.12). Hashed on the person id, so a rename keeps the colour. */
+export const AVATAR_COLOURS = ['#0485F7', '#0EA5A4', '#D97706', '#DB2777', '#2563EB', '#7C3AED', '#059669', '#EA580C'];
+export function avatarColour(id) {
+    return AVATAR_COLOURS[fnv1a(id) % AVATAR_COLOURS.length];
+}
+/** Board colours: 8 muted two-stop gradients (brand-and-ux 5.13), for the header strip and chip dot. */
+export const BOARD_GRADIENTS = [
+    ['#3B5B8C', '#263B5C'],
+    ['#2F6E68', '#1E4844'],
+    ['#6B4C7A', '#463151'],
+    ['#8A5A2B', '#5A3A1C'],
+    ['#4E6B3A', '#334527'],
+    ['#4A4E8C', '#31345C'],
+    ['#8A4257', '#5A2B39'],
+    ['#46607A', '#2E3F50'],
+];
+export function boardGradient(id) {
+    return BOARD_GRADIENTS[fnv1a(id) % BOARD_GRADIENTS.length];
+}