@lar-works/design-system 0.2.0 → 0.3.0

package/src/board/index.ts

@@ -0,0 +1,224 @@
+export {
+    AddItemButton,
+    CreateIssueChoice,
+    DraftFields,
+    DraftTicketPart,
+    PanelField,
+    TicketSearch,
+    type TicketSearchMatch,
+    TicketSearchPane,
+} from './AddItem';
+export { ActionStack, SettingConfirm, SettingLastRun } from './Archive';
+export { BoardContent, BoardShell, ReadingLine } from './BoardShell';
+export { BoardBrand, BoardTitleBar, type RefreshHealth, RefreshIndicator, TitleBarDivider } from './BoardTitleBar';
+export { type ButtonKind, buttonKind } from './ButtonKinds';
+export {
+    BoardCounter,
+    BoardCounters,
+    CounterAge,
+    CounterDash,
+    CounterDivider,
+    CounterEmpty,
+    CounterFigure,
+    CounterGroup,
+    CounterGroups,
+    CounterItem,
+    CounterList,
+    CounterOfLimit,
+    CounterPartial,
+    LimitBars,
+} from './Counters';
+export { DeskCard, DeskHint, DeskMergeState, DeskSection, type MergeState } from './Desk';
+export { FilterBar, FilterChip, FilterChoice, FilterChoices, FilterMenu } from './Filters';
+export { ListButton, ListGroupItem, ListHeader, ListItemRow, ListNote } from './List';
+export { type LoadingLine, type LoadingMark, LoadingScreen } from './LoadingScreen';
+export { type ReleaseNote, ReleaseNotes, UpdateDownloading, UpdatePill, UpdateStatusIcon } from './UpdatePill';
+export { BoardWarning, BoardWarnings, ToolMissing } from './Warnings';
+export { ActivityLine, type ActivityState, AgentAge, AgentList, AgentRow, WorkingAgents } from './ActivityLine';
+export { ActivityLabel, ActivityTrack } from './ActivityTrack';
+export {
+    AttentionEntry,
+    AttentionList,
+    AttentionMark,
+    AttentionNone,
+    type AttentionTone,
+    EntryButton,
+    PartLink,
+    PartName,
+    RefButton,
+} from './Attention';
+export { LossList } from './Cleanup';
+export type { DataAttributes } from './DataAttributes';
+export { DependencyItem, DependencyList } from './Dependencies';
+export {
+    DossierBody,
+    DossierChips,
+    type DossierChipTone,
+    DossierFields,
+    DossierLine,
+    DossierList,
+    DossierNext,
+    DossierNote,
+    DossierRepos,
+    DossierRow,
+    DossierTitle,
+    DossierTitleCell,
+    DossierToggle,
+    DossierTools,
+    PartsBar,
+    type PartSegment,
+    PlanningNote,
+} from './Dossier';
+export { ItemFields, ItemTitle, KindMarker, RepoIdentity, RepoTag, TitleLink } from './ItemParts';
+export { NeedsYouNotice, NeedsYouResult } from './NeedsYou';
+export {
+    type PartKind,
+    PartKindLabel,
+    PartRow,
+    PartsList,
+    PartTrack,
+    PartWaits,
+    ShowDoneToggle,
+    ThreadLine,
+} from './PartsList';
+export {
+    ChecksState,
+    PullRequestList,
+    PullRequestReadiness,
+    PullRequestRef,
+    PullRequestRow,
+    ReadinessDetails,
+} from './PullRequests';
+export { SliceBar, SliceList, SliceMark, type SliceProgress, SliceRow } from './Slices';
+export { type ItemSource, SourceIcon } from './SourceIcon';
+export { BuildLimit, HeaderSwitch, StageList, StagePane, StagePaneEmpty, StageSections } from './StagePane';
+export {
+    OnYourDesk,
+    QueueAge,
+    QueuePlace,
+    RowBlocked,
+    RowCells,
+    RowCount,
+    RowFirst,
+    RowFoot,
+    RowGlyph,
+    RowIdentity,
+    RowKindCell,
+    RowOpen,
+    RowPartOf,
+    RowSecondLine,
+    RowSide,
+    RowSliceNote,
+    RowSliceToggle,
+    RowSlices,
+    RowState,
+    RowStateCell,
+    RowTitle,
+    RowTitleCell,
+    StageRowItem,
+    UsageFigures,
+} from './StageRow';
+export { StageTrack } from './StageTrack';
+export { ActionError, StartGroup, StartLine, StartNote, StartTag } from './StartControls';
+export { type BoardStatus, statusColor } from './StatusColors';
+export { StatusGlyph } from './StatusGlyph';
+export { EarlierThread, EarlierThreadList } from './Threads';
+export {
+    HistoryRow,
+    MapBand,
+    MapCanvas,
+    MapCheckNode,
+    type MapEdge,
+    MapEdgeLabel,
+    MapEdges,
+    MapHistoryGroup,
+    MapHistoryList,
+    MapLaneName,
+    MapNode,
+    MapPartNode,
+    WorkMapFrame,
+} from './WorkMap';
+export {
+    AccessNotice,
+    DialogActions,
+    ItemDialogAside,
+    ItemDialogBody,
+    ItemDialogColumns,
+    ItemSummary,
+    SummaryAge,
+    SummaryBlocked,
+    SummaryPanel,
+    SummaryParent,
+    SummaryStatus,
+    WarningNote,
+} from './ItemDialog';
+export {
+    AttachmentLink,
+    ChangeFailed,
+    CheckRun,
+    ChipGroup,
+    DetailFact,
+    DetailsHeading,
+    DetailsSection,
+    DetailsText,
+    EditActions,
+    EditorSlot,
+    FactList,
+    FocusPanel,
+    HeaderStatus,
+    InlineList,
+    KindQuestion,
+    LabelEditorPanel,
+    MainColumnSlot,
+    MainSection,
+    MetaArea,
+    OutgoingTicket,
+    SectionHeader,
+    SpecSync,
+    SprintCount,
+    TextSection,
+    TicketLink,
+    TicketLinkList,
+    WaitsOnList,
+} from './ItemDetails';
+export {
+    ItemProgressPanel,
+    PartsProgress,
+    ProgressActivity,
+    ProgressCount,
+    SliceChip,
+    SliceChips,
+    WorkflowSteps,
+} from './ItemProgress';
+export { ProjectIcon, type ProjectIconColor, type ProjectIconSize, type ProjectIconSource } from './ProjectIcon';
+export {
+    OpenSettingsButton,
+    ProjectValueList,
+    ReasonNote,
+    SettingControl,
+    SettingDetails,
+    SettingsNav,
+    SettingsNote,
+} from './Settings';
+export { CreateLabelForm, TrackerLabelEditor, TrackerLabelList, TrackerLabelRow } from './TrackerLabels';
+export {
+    LabelChooser,
+    LabelChooserEmpty,
+    LabelChooserFooter,
+    LabelChooserList,
+    LabelChooserOption,
+    VocabularyMore,
+    VocabularyRow,
+    VocabularySuggestion,
+} from './Vocabulary';
+export {
+    AddFolderLine,
+    ChoiceDetails,
+    EmptyBoard,
+    ProjectLine,
+    ProjectList,
+    ProjectListItem,
+    SetupCardList,
+    SetupHeader,
+    SetupStep,
+} from './Onboarding';

package/src/board/items.css

@@ -0,0 +1,75 @@
+/* An item's parts (ItemParts.tsx, StartControls.tsx): the title link, a project icon's colour (ProjectIcon.tsx), the
+   Start control's group and its message line. */
+
+.title {
+    font-weight: 500;
+    text-decoration: none;
+    line-height: 1.35;
+}
+.title:hover {
+    text-decoration: underline;
+}
+.ref {
+    color: var(--muted-foreground);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+}
+
+/* The colour behind a project icon's initial. Each repository takes the next colour in the board's list order
+   (ProjectIcon's `place`); unlisted repositories keep the muted colour. */
+.repo-tone-0 {
+    --k: var(--color-sky-500);
+}
+.repo-tone-1 {
+    --k: var(--color-pink-500);
+}
+.repo-tone-2 {
+    --k: var(--color-teal-500);
+}
+.repo-tone-3 {
+    --k: var(--color-amber-500);
+}
+.repo-tone-4 {
+    --k: var(--color-violet-500);
+}
+.repo-tone-5 {
+    --k: var(--color-lime-500);
+}
+.repo-tone-6 {
+    --k: var(--color-orange-500);
+}
+.repo-tone-7 {
+    --k: var(--color-indigo-500);
+}
+.repo-tone-none {
+    --k: var(--muted-foreground);
+}
+
+/* The Start control's group, and the line under it with Start's message or error. */
+.start {
+    margin: 0;
+    font-size: var(--text-xs);
+}
+p[data-start-result] {
+    padding: --spacing(1) --spacing(1.5);
+    margin-inline: --spacing(-1.5);
+    border-radius: var(--radius-sm);
+}
+.start-group {
+    flex: 0 1 auto;
+    max-width: 100%;
+    flex-wrap: wrap;
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: --spacing(1.25);
+    position: relative;
+}
+.action-error {
+    order: 1;
+    flex: 1 1 100%;
+    min-width: 0;
+    color: var(--danger-text);
+    font-weight: 600;
+    overflow-wrap: anywhere;
+}

package/src/board/loading-screen.css

@@ -0,0 +1,171 @@
+/* The loading screen over the board page (LoadingScreen.tsx): the Lar Factory lockup, whose L draws itself, over the
+   step line. apps/desktop's starting page draws the same lockup, so the board page carries on from it. */
+
+.loading-screen {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    display: grid;
+    place-items: center;
+    padding: --spacing(13) --spacing(6) --spacing(6); /* the title bar's height on top */
+    background: var(--background);
+    color: var(--foreground);
+    user-select: none;
+    -webkit-app-region: drag; /* nothing here is a control, so the window moves by it */
+}
+.loading-screen.is-leaving {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 600ms ease-in-out;
+}
+
+/* --- The lockup: the title bar Brand's, scaled up. The mark is 0.705em, the cap height, and sits on the baseline, so
+   it stands in for the "L" of "Lar"; the box is trimmed to cap height and baseline, so the screen centres the lockup
+   on what you see, not on the font's line box. "ar" bold, "Factory" medium in the muted colour. --------------------- */
+
+.loading-lockup {
+    --lockup: clamp(2.5rem, 9vw, 4rem);
+    position: relative;
+    font-size: var(--lockup);
+}
+.loading-wordmark {
+    width: max-content;
+    line-height: 1;
+    text-box: trim-both cap alphabetic;
+}
+.loading-mark {
+    display: inline;
+    overflow: visible;
+    width: 0.705em;
+    height: 0.705em;
+    vertical-align: baseline;
+}
+.loading-lar {
+    display: inline-block;
+    margin-left: 0.07em;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    clip-path: inset(-0.5em -1em -0.5em 0);
+} /* clipped at its left edge, so "ar" can slide out from behind the mark */
+.loading-lar-slide {
+    display: inline-block;
+}
+.loading-factory {
+    margin-left: 0.26em;
+    font-weight: 500;
+    color: var(--muted-foreground);
+}
+
+/* The step line hangs below the baseline by half the lockup's size, clear of the "y", under the lockup's middle,
+   without moving the lockup off centre. Its slot stacks the old text and the new, so the line stays centred. */
+.loading-line {
+    position: absolute;
+    top: calc(100% + var(--lockup) * 0.5);
+    left: 50%;
+    translate: -50% 0;
+    font-size: var(--text-sm);
+    line-height: --spacing(5);
+    width: max-content; /* as wide as the text, up to the window, then it wraps */
+    max-width: min(36rem, calc(100vw - --spacing(12)));
+    text-align: center;
+    overflow-wrap: anywhere;
+    color: var(--muted-foreground);
+}
+.loading-line-slot {
+    display: grid;
+    justify-items: center;
+}
+.loading-line-slot > span {
+    grid-area: 1 / 1;
+}
+
+/* The mark's finished state is the base: the filled L, the block and the words, with no trace. A screen that has
+   not drawn yet starts them hidden and plays the draw, unless the user prefers reduced motion. */
+.loading-mark-trace {
+    display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    /* "Home first" (lar-brand preview/prototype-startup.html, variant C): the block, the room, appears first; the L wraps
+       around it as wall and floor in one trace; then "ar" slides out from behind the mark and the product fades in. */
+    .loading-screen:not(.is-drawn) .loading-mark-block {
+        opacity: 0;
+        transform: scale(0.3);
+        transform-box: fill-box;
+        transform-origin: center;
+        animation: loading-settle 480ms cubic-bezier(0.34, 1.45, 0.64, 1) 100ms forwards; /* a small overshoot */
+    }
+    .loading-screen:not(.is-drawn) .loading-mark-trace {
+        display: inline;
+        stroke-dasharray: 1 2; /* a gap longer than the path, so only the drawn length shows */
+        stroke-dashoffset: 1;
+        opacity: 0;
+        animation: loading-trace 700ms cubic-bezier(0.42, 0, 0.58, 1) 420ms forwards;
+    }
+    /* The filled L replaces the trace once it ends; the stroke covers the same outline but for its
+       3-unit outer corner, which it draws square, too small for the swap to show. */
+    .loading-screen:not(.is-drawn) .loading-mark-fill {
+        opacity: 0;
+        animation: loading-show 0ms linear 1120ms forwards;
+    }
+    .loading-screen:not(.is-drawn) .loading-lar-slide {
+        translate: -1.25em 0;
+        animation: loading-slide 520ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms forwards;
+    }
+    .loading-screen:not(.is-drawn) .loading-factory {
+        opacity: 0;
+        animation: loading-show 450ms ease-out 1300ms forwards;
+    }
+
+    /* A step change: the old line rolls up and out with a slight blur while the new one rolls in from below. */
+    .loading-roll-in {
+        animation: loading-roll-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+    }
+    .loading-roll-out {
+        animation: loading-roll-out 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+    }
+}
+
+@keyframes loading-trace {
+    0% {
+        opacity: 0;
+        stroke-dashoffset: 1;
+    }
+    1% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+        stroke-dashoffset: 0;
+    }
+}
+@keyframes loading-settle {
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@keyframes loading-show {
+    to {
+        opacity: 1;
+    }
+}
+@keyframes loading-slide {
+    to {
+        translate: 0 0;
+    }
+}
+@keyframes loading-roll-in {
+    from {
+        opacity: 0;
+        translate: 0 0.75em;
+        filter: blur(--spacing(0.75));
+    }
+}
+@keyframes loading-roll-out {
+    to {
+        opacity: 0;
+        translate: 0 -0.75em;
+        filter: blur(--spacing(0.75));
+    }
+}

package/src/board/rows.css

@@ -0,0 +1,180 @@
+/* The board's rows (StageRow.tsx), in Queue, Shaping, Ready to build, Build and Concepts and linked work: a first line of
+   glyph, source, kind, title, state and action, and under it RowSecondLine, on the same columns, so every edge lines up
+   down the board whatever a row lacks. Unlayered, so these win over the utilities of what a row holds. */
+
+.row-first,
+.row-second {
+    --row-inset: --spacing(3);
+    --row-gap: --spacing(3);
+    --row-line: --spacing(7);
+    --row-glyph: 1.5rem;
+    --row-source: 7rem;
+    --row-kind: 6.75rem;
+    --row-state: 10rem;
+    --row-side: 9rem;
+}
+
+.row-first {
+    display: flex;
+    column-gap: var(--row-gap);
+    padding-right: var(--row-inset);
+}
+.row-cols {
+    display: grid;
+    flex: 1;
+    min-width: 0;
+    grid-template-columns: var(--row-glyph) var(--row-source) var(--row-kind) minmax(0, 1fr) var(--row-state);
+    grid-template-rows: var(--row-line);
+    column-gap: var(--row-gap);
+    align-items: center;
+    padding-left: var(--row-inset);
+    text-align: left;
+    font-size: var(--text-xs);
+    line-height: --spacing(4);
+    color: var(--muted-foreground);
+}
+.row-side {
+    flex: none;
+    width: var(--row-side);
+    min-height: var(--row-line);
+}
+
+.row-second {
+    display: grid;
+    grid-template-columns: var(--row-source) var(--row-kind) minmax(0, 1fr) var(--row-state) var(--row-side);
+    column-gap: var(--row-gap);
+    align-items: center;
+    min-height: --spacing(4);
+    margin-top: --spacing(1);
+    padding: 0 var(--row-inset) 0 calc(var(--row-inset) + var(--row-glyph) + var(--row-gap));
+    font-size: var(--text-xs);
+    line-height: --spacing(4);
+    color: var(--muted-foreground);
+}
+.row-second [data-blocked] {
+    flex-shrink: 0;
+    max-width: 100%;
+    height: --spacing(4);
+}
+.row-second [data-activity-badge] {
+    height: --spacing(4);
+}
+/* Figures keep their whole text, reaching into the PR's cell's spare room when they're long. */
+.row-second > [data-col='figures'] {
+    display: flex;
+    justify-content: flex-end;
+    justify-self: end;
+    white-space: nowrap;
+}
+:is(.row-cols, .row-second) :is([data-row-identity], [data-kind-marker]) {
+    font-size: inherit;
+}
+
+/* A part's own title leads its row, so its second line starts where its status does and its list item sets the edge. */
+[data-part] .row-second {
+    padding-inline: --spacing(5) 0;
+}
+
+/* Under 880px of row the title would drop below a readable width: source and kind move under it, and it takes their
+   columns. With no PR, the second line's text takes the PR's cell too. */
+@container (width < 55rem) {
+    .row-first,
+    .row-second {
+        --row-kind: 5rem;
+        --row-state: 7rem;
+    }
+    .row-first {
+        align-items: flex-start;
+    }
+    .row-cols {
+        grid-template-rows: var(--row-line) --spacing(5);
+        row-gap: --spacing(1);
+    }
+    .row-cols > [data-title-cell] {
+        grid-column: 2 / 5;
+        grid-row: 1;
+    }
+    .row-cols > [data-row-identity] {
+        grid-column: 2;
+        grid-row: 2;
+    }
+    .row-cols > [data-kind] {
+        grid-column: 3 / 5;
+        grid-row: 2;
+    }
+    .row-cols > [data-col='state'] {
+        grid-column: 5;
+        grid-row: 1;
+    }
+    .row-second > [data-col='next']:has(+ [data-col='pr']:empty) {
+        grid-column: 3 / 5;
+    }
+    .row-second > [data-col='pr']:empty {
+        display: none;
+    }
+    .row-second > [data-col='figures'] {
+        grid-column: 5;
+    }
+}
+
+/* Under 660px of row the state follows them, the action stays beside the title, and the second line wraps: bar, count
+   and PR, then its text and figures. */
+@container (width < 41.25rem) {
+    .row-first,
+    .row-second {
+        --row-kind: 6.75rem;
+    }
+    .row-first {
+        display: block;
+        position: relative;
+        padding-right: 0;
+    }
+    .row-cols {
+        width: 100%;
+        grid-template-columns: var(--row-glyph) var(--row-source) var(--row-kind) minmax(0, 1fr);
+        padding-right: var(--row-inset);
+    }
+    .row-cols > [data-title-cell] {
+        grid-column: 2 / -1;
+        padding-right: calc(var(--row-side) + var(--row-gap));
+    }
+    .row-cols > [data-kind] {
+        grid-column: 3;
+    }
+    .row-cols > [data-col='state'] {
+        grid-column: 4;
+        grid-row: 2;
+    }
+    .row-side {
+        position: absolute;
+        top: 0;
+        right: var(--row-inset);
+    }
+    .row-second {
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: --spacing(1);
+    }
+    .row-second > :empty {
+        display: none;
+    }
+    .row-second > [data-col='bar'] {
+        flex: 0 0 var(--row-source);
+    }
+    .row-second > [data-col='count'] {
+        flex: 0 0 var(--row-kind);
+    }
+    .row-second > [data-col='pr'] {
+        flex: 1 1 auto;
+        order: 1;
+    }
+    .row-second > [data-col='next'] {
+        flex: 1 1 12rem;
+        order: 2;
+    }
+    .row-second > [data-col='figures'] {
+        flex: 0 0 auto;
+        order: 3;
+        margin-left: auto;
+    }
+}

package/src/board/title-bar.css

@@ -0,0 +1,56 @@
+/* The board's title bar (BoardTitleBar.tsx): the traffic lights' stand-ins, the Refreshed dot's ping, the status
+   strip's counters and the narrow layout. */
+
+/* The traffic lights' grey stand-ins, in a browser. */
+:root {
+    --traffic-stand-in: var(--color-zinc-300);
+
+    @variant dark {
+        --traffic-stand-in: var(--color-zinc-700);
+    }
+}
+
+/* The Refreshed time's dot pings once when a newer read lands: a ring growing from the dot and fading. */
+@keyframes refreshed-ping {
+    from {
+        transform: scale(1);
+        opacity: 0.6;
+    }
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+/* Inside the status strip the counters are 24 px tall, as the Refreshed time is, under the button kinds' 28, and
+   padded as lar-server's summary buttons. Unlayered, so this wins over the Button's utilities. */
+.status-strip [data-kind] {
+    height: --spacing(6);
+    padding-inline: --spacing(1.5);
+}
+
+/* Narrow toolbars give actions their own row. Counters stay on the board, so the controls never overlap them.
+   Browser traffic lights are decorative; native windows keep the space reserved for their real controls. */
+@media (max-width: 48rem) {
+    .title-bar:not([data-native-window]) {
+        padding-left: 0;
+    }
+    .title-bar .browser-window-controls {
+        display: none;
+    }
+    .title-bar header {
+        height: auto;
+        min-height: --spacing(13);
+        flex-wrap: wrap;
+        padding-block: --spacing(2);
+    }
+    .title-bar .status-strip {
+        display: none;
+    }
+    .title-bar header > div:last-child {
+        flex-basis: 100%;
+        min-width: 0;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+    }
+}