AppShell
++ HeaderBar (package links + Packages dropdown + Docs + User), Sidebar, FooterBar — live in chrome. +
+{banner}
+
+ Labels match variant. Bootstrap-inspired, JOO cyan-tuned.
+
+ ActionBar separate/group,{" "}
+ ActionMenu, SplitButton,
+ icons.
+
+ Developer guidance only. Explicit variant always wins
+ over intent.
+
| Variant | +Sample | +Typical use | +
|---|---|---|
+ {row.variant}
+ |
+
+ |
+ {row.use} | +
+ From ACTION_COLOR_GUIDE. Not enforced — override with{" "}
+ variant anytime.
+
| Intent | +Suggested | +Sample | +Use | +
|---|---|---|---|
+ {row.intent}
+ |
+
+ {suggested}
+ |
+
+ |
+ {row.use} | +
+ Last click: {lastAction}
+
+ Use BaseCard when you need a titled surface that is not a metric — lists, explanations, + or mixed content. +
+ +{flash}
+- {flash} -
- ) : null} +{flash}
+
- Canvas variant is {variant}. Switch it from the control bar to compare{" "}
- plain, card, and{" "}
+ Canvas variant is {variant}. Switch it from the control bar
+ to compare plain, card, and{" "}
flush.
+ For action button colors, menus, and the intent guide, open{" "} + + Buttons + + . +
{row.packageName},
+ },
+ {
+ key: "status",
+ label: "Status",
+ render: (row) => (
+ {flash}
++ Each sidebar item is a full guide + live demo for that package. +
++ StatusToggle on the dashboard — full sizes and values on{" "} + + /ui + + . +
++ Identity uses ActionBar already; gallery lives on{" "} + + /buttons + + . +
++ Confirm / form / large scroll demos on{" "} + + /modal + + . +
++ This page renders inside AppShell → PageShell. Slot maps:{" "} + + /layout + + {" · "} + + /content + + . +
+AppShell
++ HeaderBar (package links + Packages dropdown + Docs + User), Sidebar, FooterBar — live in chrome. +
+PageShell
++ Banner, Identity (Primary actions), Canvas — Primary CTAs only via action-buttons here. +
++ In-memory save only — full Create-via-Identity guide at{" "} + + /config + + . +
+
+ This uses @jooservices/react-modal. Full size / form demos are
+ on{" "}
+ setModalOpen(false)}>
+ /modal
+
+ .
+
+ No article for {slug}. Pick a topic from the Docs menu.
+
+ Human markdown lives under docs/ in the repo. This view is the
+ navigable demo summary — each topic links to the matching live package page when available.
+
{focus}
+ ) : null}
- Prefer AppShell.HeaderBar over composing low-level header slots. This package
- does not ship a light/dark theme switcher.
+ Prefer AppShell.HeaderBar and{" "}
+ AppShell.FooterBar over composing low-level slots. This package does not
+ ship a light/dark theme switcher.
+ This cannot be undone. Escape and backdrop are locked while the fake submit runs. +
++ Scrollable body line {index + 1}. The panel caps height so Header/Footer stay pinned. +
+ ))} +{row.packageName},
- },
- {
- key: "status",
- label: "Status",
- render: (row) => (
- - {flash} -
- ) : null} - -- In-memory save only — full page at{" "} - - /config - - . -
-{preview}
: null} +- {message} -
+{message}
) : null}Message only — icon + dismiss, no tinted background.
+\n {formatStatValue(value)}\n
\n {subtext !== undefined && subtext !== null ? (\n{subtext}
\n ) : null}\n+ {formatStatValue(value)} +
+ {subtext !== undefined && subtext !== null ? ( +{subtext}
+ ) : null} +