@sole-ui/react 0.0.0-stage → 0.2.0

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
+declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    spacing?: number;
+}) & React.RefAttributes<HTMLDivElement>>;
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/ui/toggle-group.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
+import { cn } from '../../lib/cn.js';
+import { toggleVariants } from './toggle.js';
+const ToggleGroupContext = React.createContext({
+    size: 'default',
+    variant: 'default',
+    spacing: 0,
+});
+const ToggleGroup = React.forwardRef(function ToggleGroup({ className, variant, size, spacing = 0, children, ...props }, ref) {
+    return (_jsx(ToggleGroupPrimitive.Root, { ref: ref, "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, style: { '--gap': spacing }, className: cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children: children }) }));
+});
+ToggleGroup.displayName = 'ToggleGroup';
+const ToggleGroupItem = React.forwardRef(function ToggleGroupItem({ className, children, variant, size, ...props }, ref) {
+    const context = React.useContext(ToggleGroupContext);
+    return (_jsx(ToggleGroupPrimitive.Item, { ref: ref, "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn(toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+        }), 'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10', 'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l', className), ...props, children: children }));
+});
+ToggleGroupItem.displayName = 'ToggleGroupItem';
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/ui/toggle.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { Toggle as TogglePrimitive } from 'radix-ui';
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle, toggleVariants };

package/dist/components/ui/toggle.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Toggle as TogglePrimitive } from 'radix-ui';
+import { cn } from '../../lib/cn.js';
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-body font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:shadow-[var(--focus-ring)] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+        },
+        size: {
+            default: 'h-9 min-w-9 px-2',
+            sm: 'h-8 min-w-8 px-1.5',
+            lg: 'h-10 min-w-10 px-2.5',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const Toggle = React.forwardRef(function Toggle({ className, variant, size, ...props }, ref) {
+    return (_jsx(TogglePrimitive.Root, { ref: ref, "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
+});
+Toggle.displayName = 'Toggle';
+export { Toggle, toggleVariants };

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/components/ui/tooltip.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import { cn } from '../../lib/cn.js';
+// Renders no element, so it takes no ref. SoleProvider already wraps the app in one;
+// use this only for a part of the page that needs a different delay.
+function TooltipProvider({ delayDuration = 400, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props });
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+const TooltipTrigger = React.forwardRef((props, ref) => _jsx(TooltipPrimitive.Trigger, { ref: ref, "data-slot": "tooltip-trigger", ...props }));
+TooltipTrigger.displayName = 'TooltipTrigger';
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { ref: ref, "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-[7px] bg-tooltip px-[9px] py-[5px] text-label text-balance text-tooltip-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-tooltip fill-tooltip" })] }) })));
+TooltipContent.displayName = 'TooltipContent';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/hq/activity-line.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Timestamp } from '../lib/dates.ts';
+import type { SolePerson } from '../lib/person.ts';
+/** The kind of change, which picks the icon. */
+export type ActivityKind = 'created' | 'state' | 'assignee' | 'label' | 'due' | 'comment' | 'link' | 'delete' | 'edit' | 'property';
+export interface ActivityLineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * Who made the change. The sentence already names them, so nothing is drawn for it; the id is kept on the
+     * line as `data-actor` for tests and hooks. `null` is a former member.
+     */
+    actor?: SolePerson | null;
+    /** Picks the icon. Defaults to a plain edit. */
+    kind?: ActivityKind;
+    /** When it happened. */
+    at: Timestamp;
+    /** Overrides the provider's clock. */
+    now?: Date;
+    /** The sentence, "Ava moved this from Todo to Done". */
+    children: React.ReactNode;
+}
+export declare const ActivityLine: React.ForwardRefExoticComponent<ActivityLineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/hq/activity-line.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftRight, CalendarClock, CirclePlus, Link2, MessageSquare, Pencil, SlidersHorizontal, Tag, Trash2, UserPlus } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { formatFullTimestamp, formatRelative } from '../lib/dates.js';
+import { useNow, useSole } from '../lib/sole-provider.js';
+const ICONS = {
+    created: CirclePlus,
+    state: ArrowLeftRight,
+    assignee: UserPlus,
+    label: Tag,
+    due: CalendarClock,
+    comment: MessageSquare,
+    link: Link2,
+    delete: Trash2,
+    edit: Pencil,
+    property: SlidersHorizontal,
+};
+export const ActivityLine = React.forwardRef(function ActivityLine({ actor, kind = 'edit', at, now, children, className, ...props }, ref) {
+    const tick = useNow();
+    const { timeZone } = useSole();
+    const Icon = ICONS[kind];
+    return (_jsxs("div", { ref: ref, "data-actor": actor?.id, className: cn('flex min-h-8 items-center gap-2.5 text-label font-normal text-muted-foreground', className), ...props, children: [_jsx(Icon, { size: 14, strokeWidth: 1.8, "aria-hidden": "true", className: "shrink-0 text-subtle-foreground" }), _jsx("span", { className: "min-w-0 flex-1", children: children }), _jsx("time", { dateTime: at, title: formatFullTimestamp(at, timeZone), className: "tnum shrink-0 text-subtle-foreground", children: formatRelative(at, now ?? tick, timeZone) })] }));
+});
+ActivityLine.displayName = 'ActivityLine';

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { DateOnly } from '../lib/dates.ts';
+import type { WorkItemSummary } from './types.ts';
+export interface BoardCardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    item: WorkItemSummary;
+    /** Defaults to today on the provider's clock. */
+    today?: DateOnly;
+    /** Open somewhere other than the full page, e.g. the side sheet. Cmd-click still opens the page. */
+    onOpen?: (item: WorkItemSummary) => void;
+    dragging?: boolean;
+}
+export declare const BoardCard: React.ForwardRefExoticComponent<BoardCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/hq/board-card.js

@@ -0,0 +1,21 @@
+'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';
+export const BoardCard = React.forwardRef(function BoardCard({ item, today, onOpen, dragging = false, className, ...rest }, ref) {
+    const onClick = onOpen
+        ? (e) => {
+            if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
+                return;
+            e.preventDefault();
+            onOpen(item);
+        }
+        : undefined;
+    return (_jsxs("div", { ref: ref, "data-board-card": item.key, className: cn('flex min-h-16 flex-col rounded-lg border border-border bg-card px-3 py-[9px] text-card-foreground shadow-sm transition-shadow duration-[120ms]', dragging && 'shadow-lg ring-1 ring-brand', className), ...rest, children: [_jsxs("div", { className: "flex h-4 items-center gap-2", children: [_jsx("span", { className: "tnum text-label text-subtle-foreground", children: item.key }), _jsx(PriorityIcon, { priority: item.priority, className: "ml-auto" })] }), _jsx(SoleLink, { href: item.href, onClick: onClick, className: cn('mt-[7px] line-clamp-3 text-body font-medium outline-none hover:underline focus-visible:underline', item.state?.group === 'completed' && 'text-muted-foreground', item.state?.group === 'cancelled' && 'text-subtle-foreground line-through'), children: item.title }), (item.labels.length > 0 || item.dueDate || item.assignees.length > 0) && (_jsxs("div", { className: "mt-2 flex min-w-0 items-center gap-1.5", children: [_jsx(LabelTags, { labels: item.labels }), _jsx(DueChip, { due: item.dueDate, today: today, done: item.isDone }), _jsx(AvatarStack, { people: item.assignees, className: "ml-auto" })] }))] }));
+});
+BoardCard.displayName = 'BoardCard';

package/dist/hq/board-chip.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { BoardSummary } from './types.ts';
+export interface BoardEmojiProps extends React.ComponentPropsWithoutRef<'span'> {
+    board: Pick<BoardSummary, 'emoji'>;
+}
+export declare const BoardEmoji: React.ForwardRefExoticComponent<BoardEmojiProps & React.RefAttributes<HTMLSpanElement>>;
+export interface BoardChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    board: BoardSummary;
+    /** Where the board opens. With it the chip is a link; without it, plain text. */
+    href?: string;
+}
+export declare const BoardChip: React.ForwardRefExoticComponent<BoardChipProps & React.RefAttributes<HTMLElement>>;

package/dist/hq/board-chip.js

@@ -0,0 +1,20 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { SoleLink } from '../lib/sole-provider.js';
+export const BoardEmoji = React.forwardRef(function BoardEmoji({ board, className, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": "true", className: cn('inline-flex w-4 shrink-0 justify-center text-[14px] leading-none', className), children: board.emoji || '📁' }));
+});
+BoardEmoji.displayName = 'BoardEmoji';
+export const BoardChip = React.forwardRef(function BoardChip({ board, href, className, ...props }, ref) {
+    const classes = cn('inline-flex h-[22px] max-w-48 shrink-0 items-center gap-1.5 rounded-md bg-neutral-soft px-2 text-label text-neutral-text', className);
+    const inner = (_jsxs(_Fragment, { children: [_jsx(BoardEmoji, { board: board, className: "text-[12px]" }), _jsx("span", { className: "truncate", children: board.name })] }));
+    if (!href) {
+        return (_jsx("span", { ...props, ref: ref, className: classes, children: inner }));
+    }
+    // The span props are the anchor's too, apart from the handlers' element type, so they are spread as a link's.
+    const linkProps = props;
+    return (_jsx(SoleLink, { ...linkProps, ref: ref, href: href, className: cn(classes, 'hover:bg-sidebar-hover focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none'), children: inner }));
+});
+BoardChip.displayName = 'BoardChip';

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface ChecklistItemProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'children'> {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+    /** read: 16/26 as in a description. body: 13/20 for denser lists. */
+    size?: 'read' | 'body';
+}
+/**
+ * Checklist item (50.6): a 16px checkbox and the line at the reading size; a done line
+ * turns the subtle grey. The editor draws its task items the same way (editor.css).
+ */
+export declare const ChecklistItem: React.ForwardRefExoticComponent<ChecklistItemProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/hq/checklist-item.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Checkbox } from '../components/ui/checkbox.js';
+import { cn } from '../lib/cn.js';
+/**
+ * Checklist item (50.6): a 16px checkbox and the line at the reading size; a done line
+ * turns the subtle grey. The editor draws its task items the same way (editor.css).
+ */
+export const ChecklistItem = React.forwardRef(function ChecklistItem({ checked, onCheckedChange, disabled, children, size = 'read', className, ...props }, ref) {
+    return (_jsxs("label", { ref: ref, className: cn('flex min-w-0 items-start gap-2.5', size === 'read' ? 'text-read' : 'text-body', className), ...props, children: [_jsx(Checkbox, { checked: checked, disabled: disabled, onCheckedChange: (v) => onCheckedChange?.(v === true), className: cn('shrink-0', size === 'read' ? 'mt-[5px]' : 'mt-0.5') }), _jsx("span", { className: cn('min-w-0', checked ? 'text-subtle-foreground' : 'text-foreground'), children: children })] }));
+});
+ChecklistItem.displayName = 'ChecklistItem';

package/dist/hq/comment.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Timestamp } from '../lib/dates.ts';
+import type { SolePerson } from '../lib/person.ts';
+export interface CommentProps extends Omit<React.ComponentPropsWithoutRef<'article'>, 'children'> {
+    /** Who wrote it. `null` is a former member. */
+    author: SolePerson | null | undefined;
+    /**
+     * Who really wrote it, when a bot posted it for someone: "Ava (from the Dialer)". The name reads as the label and the
+     * avatar stays the bot's, so it is plain that it came through the Dialer.
+     */
+    label?: string | null;
+    createdAt: Timestamp;
+    edited?: boolean;
+    resolved?: boolean;
+    /** Page comments: the body at 14/20. */
+    reading?: boolean;
+    /** Overrides the provider's clock. */
+    now?: Date;
+    /** The viewer's time zone for the stamp. Defaults to the provider's. */
+    tz?: string;
+    /** Edit, Delete: shown on hover at the end of the header. */
+    actions?: React.ReactNode;
+    /** The rendered body. */
+    children: React.ReactNode;
+}
+export declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLElement>>;

package/dist/hq/comment.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Avatar } from '../components/sole/avatar.js';
+import { cn } from '../lib/cn.js';
+import { formatDayTime, formatFullTimestamp } from '../lib/dates.js';
+import { personName } from '../lib/person.js';
+import { useNow, useSole } from '../lib/sole-provider.js';
+export const Comment = React.forwardRef(function Comment({ author, label, createdAt, edited = false, resolved = false, reading = false, now, tz, actions, children, className, ...props }, ref) {
+    const tick = useNow();
+    const { timeZone } = useSole();
+    const zone = tz ?? timeZone;
+    return (_jsxs("article", { ref: ref, className: cn('group/comment flex min-w-0 gap-2.5', resolved && 'opacity-60', className), ...props, children: [_jsx(Avatar, { person: author, size: 24 }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("header", { className: "flex min-h-4 flex-wrap items-center gap-x-2 [&>*]:leading-4", children: [_jsx("span", { className: cn('text-body leading-4 font-semibold text-foreground', !author && 'text-subtle-foreground'), children: label?.trim() || personName(author) }), _jsx("time", { dateTime: createdAt, title: formatFullTimestamp(createdAt, zone), className: "tnum text-label font-normal text-subtle-foreground", children: formatDayTime(createdAt, now ?? tick, zone) }), edited && _jsx("span", { className: "text-label font-normal text-subtle-foreground", children: "edited" }), resolved && _jsx("span", { className: "text-label text-success-text", children: "Resolved" }), actions && (_jsx("span", { className: "ml-auto flex items-center gap-3 self-center opacity-0 transition-opacity duration-[120ms] group-hover/comment:opacity-100 focus-within:opacity-100", children: actions }))] }), _jsx("div", { className: cn('text-foreground', reading ? 'mt-1 text-[14px] leading-5' : 'mt-[3px] text-body'), children: children })] })] }));
+});
+Comment.displayName = 'Comment';

package/dist/hq/due-chip.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { DateOnly } from '../lib/dates.ts';
+export interface DueChipProps extends React.ComponentPropsWithoutRef<'span'> {
+    /** Nothing is drawn without a date. */
+    due: DateOnly | null;
+    /** Defaults to today on the provider's clock. */
+    today?: DateOnly;
+    /** Completed or cancelled. */
+    done?: boolean;
+}
+export declare const DueChip: React.ForwardRefExoticComponent<DueChipProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/hq/due-chip.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarClock } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { dueChip } from '../lib/dates.js';
+import { useToday } from '../lib/sole-provider.js';
+// The due-date chip (brand-and-ux 5.10). Solid red is reserved for an open item past
+// its due date and nothing else. Later dates and done items are plain text.
+const TONES = {
+    overdue: 'h-[22px] rounded-md border border-transparent bg-overdue px-2 text-overdue-foreground',
+    today: 'h-[22px] rounded-md border border-danger-border bg-danger-soft px-2 text-danger-text',
+    soon: 'h-[22px] rounded-md border border-transparent bg-neutral-soft px-2 text-neutral-text',
+    plain: 'text-subtle-foreground',
+    done: 'text-subtle-foreground',
+};
+export const DueChip = React.forwardRef(function DueChip({ due, today, done = false, className, ...props }, ref) {
+    const current = useToday();
+    if (!due)
+        return null;
+    const chip = dueChip(due, today ?? current, done);
+    const boxed = chip.tone === 'overdue' || chip.tone === 'today' || chip.tone === 'soon';
+    return (_jsxs("span", { ...props, ref: ref, "data-due": chip.tone, title: chip.title, "aria-label": chip.ariaLabel, className: cn('tnum inline-flex shrink-0 items-center gap-[5px] text-label whitespace-nowrap', TONES[chip.tone], className), children: [boxed && _jsx(CalendarClock, { size: 12, strokeWidth: 1.8, "aria-hidden": "true" }), chip.label] }));
+});
+DueChip.displayName = 'DueChip';

package/dist/hq/group-header.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { StateGroup } from './types.ts';
+export interface GroupHeaderProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    name: string;
+    count?: number;
+    /** For `state` headers: which icon to show. */
+    group?: StateGroup;
+    variant?: 'state' | 'micro';
+    /** `danger` is for the Overdue bucket only. */
+    tone?: 'default' | 'danger';
+    /** Shows the "+" button on hover. */
+    onAdd?: () => void;
+    collapsed?: boolean;
+    /** Shows the chevron that hides and shows the group. */
+    onToggle?: () => void;
+}
+export declare const GroupHeader: React.ForwardRefExoticComponent<GroupHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface GroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {
+    count?: number;
+    /** `danger` is for the Overdue bucket only. */
+    tone?: 'default' | 'danger';
+}
+/**
+ * Group label (40.1 Inbox "TODAY", 30.1 Home "OVERDUE 1"): 11/600 uppercase on the
+ * bottom of a 32px band, so it sits close to the rows it heads.
+ */
+export declare const GroupLabel: React.ForwardRefExoticComponent<GroupLabelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/hq/group-header.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Plus } from 'lucide-react';
+import * as React from 'react';
+import { Button } from '../components/ui/button.js';
+import { cn } from '../lib/cn.js';
+import { StateIcon } from './state-icon.js';
+export const GroupHeader = React.forwardRef(function GroupHeader({ name, count, group, variant = 'state', tone = 'default', onAdd, collapsed, onToggle, className, ...props }, ref) {
+    if (variant === 'micro') {
+        return (_jsx(GroupLabel, { ...props, ref: ref, count: count, tone: tone, className: className, children: name }));
+    }
+    return (_jsxs("div", { ...props, ref: ref, className: cn('group/header flex h-8 items-center gap-2 bg-muted px-3', className), children: [onToggle && (_jsx("button", { type: "button", onClick: onToggle, "aria-expanded": !collapsed, "aria-label": collapsed ? `Show ${name}` : `Hide ${name}`, className: "-ml-1 -mr-[3px] inline-flex size-5 items-center justify-center rounded-sm text-subtle-foreground hover:text-foreground focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none", children: _jsx(ChevronDown, { size: 14, className: cn('transition-transform duration-200', collapsed && '-rotate-90'), "aria-hidden": "true" }) })), group && _jsx(StateIcon, { group: group, decorative: true }), _jsx("h3", { className: "text-body font-semibold text-foreground", children: name }), count !== undefined && _jsx("span", { className: "tnum text-label text-subtle-foreground", children: count }), onAdd && (_jsx(Button, { variant: "ghost", size: "icon-xs", onClick: onAdd, "aria-label": `New work item in ${name}`, title: `New work item in ${name}`, className: "ml-auto opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100", children: _jsx(Plus, { "aria-hidden": "true" }) }))] }));
+});
+GroupHeader.displayName = 'GroupHeader';
+/**
+ * Group label (40.1 Inbox "TODAY", 30.1 Home "OVERDUE 1"): 11/600 uppercase on the
+ * bottom of a 32px band, so it sits close to the rows it heads.
+ */
+export const GroupLabel = React.forwardRef(function GroupLabel({ children, count, tone = 'default', className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: cn('flex h-8 items-end gap-2 px-3 pb-1', className), children: [_jsx("h3", { className: cn('text-micro', tone === 'danger' ? 'text-danger-text' : 'text-subtle-foreground'), children: children }), count !== undefined && _jsx("span", { className: "tnum text-label leading-4 font-normal text-subtle-foreground", children: count })] }));
+});
+GroupLabel.displayName = 'GroupLabel';

package/dist/hq/inbox-row.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { Timestamp } from '../lib/dates.ts';
+import type { SolePerson } from '../lib/person.ts';
+import type { SoleLinkProps } from '../lib/sole-provider.tsx';
+export interface InboxRowProps extends Omit<SoleLinkProps, 'children' | 'title'> {
+    /** Who did it. `null` draws the plain "?" avatar of a former member. */
+    actor: SolePerson | null | undefined;
+    /** The sentence: "Ava Thompson assigned this to you". */
+    summary: React.ReactNode;
+    /** Second line: the item or page title. Comment rows can quote the comment. */
+    detail: React.ReactNode;
+    /** When it happened. Shown as relative time, with the full stamp on hover. */
+    at: Timestamp;
+    /** Draws the blue dot and tells screen readers. */
+    unread?: boolean;
+    selected?: boolean;
+    /** Kept on the row as `data-inbox-row`, for keyboard movement and tests. */
+    notificationId?: string;
+    /** Overrides the provider's clock. */
+    now?: Date;
+}
+export declare const InboxRow: React.ForwardRefExoticComponent<InboxRowProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/hq/inbox-row.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Avatar } from '../components/sole/avatar.js';
+import { cn } from '../lib/cn.js';
+import { formatFullTimestamp, formatRelative } from '../lib/dates.js';
+import { SoleLink, useNow, useSole } from '../lib/sole-provider.js';
+export const InboxRow = React.forwardRef(function InboxRow({ actor, summary, detail, at, unread = false, selected = false, notificationId, now, className, ...props }, ref) {
+    const tick = useNow();
+    const { timeZone } = useSole();
+    return (_jsxs(SoleLink, { ref: ref, "data-inbox-row": notificationId ?? '', "data-unread": unread || undefined, className: cn('flex min-h-[56px] items-center gap-2.5 border-b border-hairline py-2 pr-4 pl-3 outline-none transition-colors duration-[120ms] hover:bg-row-hover focus-visible:shadow-[inset_0_0_0_2px_var(--brand)]', selected && 'bg-accent hover:bg-accent', className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: cn('size-2 shrink-0 rounded-full', unread ? 'bg-brand' : 'bg-transparent') }), _jsx("span", { className: "sr-only", children: unread ? 'Unread. ' : '' }), _jsx(Avatar, { person: actor, size: 24 }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-body text-muted-foreground", children: summary }), _jsx("span", { className: "truncate text-body font-medium text-foreground", children: detail })] }), _jsx("time", { dateTime: at, title: formatFullTimestamp(at, timeZone), className: "tnum shrink-0 text-label font-normal text-subtle-foreground", children: formatRelative(at, now ?? tick, timeZone) })] }));
+});
+InboxRow.displayName = 'InboxRow';

package/dist/hq/index.d.ts

@@ -0,0 +1,21 @@
+export * from './activity-line.tsx';
+export * from './board-card.tsx';
+export * from './board-chip.tsx';
+export * from './checklist-item.tsx';
+export * from './comment.tsx';
+export * from './due-chip.tsx';
+export * from './group-header.tsx';
+export * from './inbox-row.tsx';
+export * from './link-row.tsx';
+export * from './mention-chip.tsx';
+export * from './page-row.tsx';
+export * from './priority-icon.tsx';
+export * from './property-type-icon.tsx';
+export * from './recent-item.tsx';
+export * from './review-badge.tsx';
+export * from './state-icon.tsx';
+export * from './state-pill.tsx';
+export * from './sticky.tsx';
+export * from './template-card.tsx';
+export * from './types.ts';
+export * from './work-item-row.tsx';

package/dist/hq/index.js

@@ -0,0 +1,21 @@
+export * from './activity-line.js';
+export * from './board-card.js';
+export * from './board-chip.js';
+export * from './checklist-item.js';
+export * from './comment.js';
+export * from './due-chip.js';
+export * from './group-header.js';
+export * from './inbox-row.js';
+export * from './link-row.js';
+export * from './mention-chip.js';
+export * from './page-row.js';
+export * from './priority-icon.js';
+export * from './property-type-icon.js';
+export * from './recent-item.js';
+export * from './review-badge.js';
+export * from './state-icon.js';
+export * from './state-pill.js';
+export * from './sticky.js';
+export * from './template-card.js';
+export * from './types.js';
+export * from './work-item-row.js';

package/dist/hq/link-row.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface LinkRowProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    /** An `http` address opens in a new tab; anything else goes through the provider's link. */
+    href: string;
+    title: React.ReactNode;
+    /** "#pricing · Noah Patel · 24 Sep". */
+    meta?: React.ReactNode;
+    actions?: React.ReactNode;
+    /** In place of the link glyph; 16px, subtle, decorative. */
+    icon?: React.ReactNode;
+}
+/** Link row (50.6 Links): 36px box, a link icon, the title as a link, then the meta. */
+export declare const LinkRow: React.ForwardRefExoticComponent<LinkRowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/hq/link-row.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link2 } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+import { SoleLink } from '../lib/sole-provider.js';
+/** Link row (50.6 Links): 36px box, a link icon, the title as a link, then the meta. */
+export const LinkRow = React.forwardRef(function LinkRow({ href, title, meta, actions, icon, className, ...props }, ref) {
+    const external = /^https?:\/\//.test(href);
+    const linkClass = 'min-w-0 shrink truncate text-body font-medium text-link outline-none hover:underline focus-visible:underline';
+    return (_jsxs("div", { ref: ref, className: cn('group/link flex h-9 min-w-0 items-center gap-2 rounded-lg border border-border bg-card px-2', className), ...props, children: [icon ?? _jsx(Link2, { size: 16, strokeWidth: 1.8, "aria-hidden": "true", className: "shrink-0 text-subtle-foreground" }), external ? (_jsx("a", { href: href, target: "_blank", rel: "noreferrer noopener", className: linkClass, children: title })) : (_jsx(SoleLink, { href: href, className: linkClass, children: title })), meta && _jsx("span", { className: "ml-1 min-w-0 flex-1 truncate text-label font-normal text-subtle-foreground", children: meta }), actions && _jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1 opacity-0 group-hover/link:opacity-100 focus-within:opacity-100", children: actions })] }));
+});
+LinkRow.displayName = 'LinkRow';

package/dist/hq/mention-chip.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { SolePerson } from '../lib/person.ts';
+export interface MentionChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /** The person, when known, for the current name and the avatar colour. */
+    person?: SolePerson | null;
+    /** The name stored in the document, used when the person is not loaded. */
+    label?: string;
+}
+/**
+ * Mention chip: how an @mention reads in any rendered text. The 16px avatar and the name
+ * in blue on the accent fill; 22px, but set in the line without making it taller.
+ */
+export declare const MentionChip: React.ForwardRefExoticComponent<MentionChipProps & React.RefAttributes<HTMLSpanElement>>;
+export interface CitationChipProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'children'> {
+    /** The source number: 2 reads "[2]" in the answer and is named "Source 2". */
+    n: number;
+    /** Makes the chip a link. */
+    href?: string;
+    /** Makes the chip a button, or runs beside the link. */
+    onClick?: () => void;
+}
+/** Citation chip: [2] in an Ask answer, a 16px square, 10/600 on the muted fill. A link, a button or plain, by what it is given. */
+export declare const CitationChip: React.ForwardRefExoticComponent<CitationChipProps & React.RefAttributes<HTMLElement>>;

package/dist/hq/mention-chip.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Avatar } from '../components/sole/avatar.js';
+import { cn } from '../lib/cn.js';
+import { FORMER_MEMBER, personName } from '../lib/person.js';
+/**
+ * Mention chip: how an @mention reads in any rendered text. The 16px avatar and the name
+ * in blue on the accent fill; 22px, but set in the line without making it taller.
+ */
+export const MentionChip = React.forwardRef(function MentionChip({ person, label, className, ...props }, ref) {
+    const name = person ? personName(person) : label || FORMER_MEMBER;
+    return (_jsxs("span", { ref: ref, "data-mention": person?.id ?? '', className: cn('mx-px -my-px inline-flex h-[22px] max-w-full items-center gap-1 rounded-md bg-accent pr-1.5 pl-[3px] align-middle text-[0.8125rem] leading-none font-medium whitespace-nowrap text-accent-foreground', className), ...props, children: [person ? _jsx(Avatar, { person: person, size: 16 }) : _jsx("span", { "aria-hidden": "true", children: "@" }), _jsx("span", { className: "truncate", children: name })] }));
+});
+MentionChip.displayName = 'MentionChip';
+/** Citation chip: [2] in an Ask answer, a 16px square, 10/600 on the muted fill. A link, a button or plain, by what it is given. */
+export const CitationChip = React.forwardRef(function CitationChip({ n, href, onClick, className, ...props }, ref) {
+    const classes = cn('mx-0.5 inline-flex size-4 items-center justify-center rounded-sm bg-muted align-[1px] text-[10px] leading-none font-semibold text-muted-foreground tnum', (href || onClick) && 'outline-none hover:bg-accent hover:text-accent-foreground focus-visible:shadow-[var(--focus-ring)]', className);
+    const label = `Source ${n}`;
+    if (href) {
+        return (_jsx("a", { ref: ref, href: href, onClick: onClick, "aria-label": label, className: classes, ...props, children: n }));
+    }
+    if (onClick) {
+        return (_jsx("button", { ref: ref, type: "button", onClick: onClick, "aria-label": label, className: classes, ...props, children: n }));
+    }
+    return (_jsx("span", { ref: ref, "aria-label": label, className: classes, ...props, children: n }));
+});
+CitationChip.displayName = 'CitationChip';

package/dist/hq/page-row.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { DateOnly, Timestamp } from '../lib/dates.ts';
+import type { SolePerson } from '../lib/person.ts';
+export interface PageRowProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'children'> {
+    /** Where the page opens. The title is the link, stretched over the whole row. */
+    href: string;
+    title: string;
+    isPrivate?: boolean;
+    reviewDue: DateOnly | null;
+    /** "Knowledge", when the list mixes spaces (80.2 Pages they own, 02.7). */
+    spaceName?: string | null;
+    folderName?: string | null;
+    tags?: Array<{
+        id: string;
+        name: string;
+    }>;
+    commentCount?: number;
+    owner: SolePerson | null;
+    collaborators?: SolePerson[];
+    updatedAt: Timestamp;
+    /** Defaults to today on the provider's clock. */
+    today?: DateOnly;
+    /** The row's overflow menu, shown on hover. */
+    actions?: React.ReactNode;
+}
+export declare const PageRow: React.ForwardRefExoticComponent<PageRowProps & React.RefAttributes<HTMLDivElement>>;