@tanishqkancharla/maui 0.0.1 → 0.0.3

package/README.md

@@ -1,6 +1,55 @@
-Frontend app boilerplate built with esbuild, typescript, vercel.
+# Maui
 
+TypeScript-first design system styled with [`purse-styles`](https://www.npmjs.com/package/purse-styles). This repo is the published package and a gallery of tokens, components, patterns, and demo apps.
+
+**Gallery:** [maui.tanishqkancharla.dev](https://maui.tanishqkancharla.dev)
+**Package:** [`@tanishqkancharla/maui`](https://www.npmjs.com/package/@tanishqkancharla/maui)
+
+## Install
+
+```bash
+npm install @tanishqkancharla/maui
 ```
+
+Wrap the app in `MauiProvider`, then import tokens and components:
+
+```tsx
+import { MauiProvider, Button } from "@tanishqkancharla/maui"
+
+function App() {
+	return (
+		<MauiProvider>
+			<Button>Hello</Button>
+		</MauiProvider>
+	)
+}
+```
+
+Put the exported `themeFoucScript` in a classic inline `<script>` in `<head>` so `data-theme` is correct on first paint.
+
+## Develop
+
+```bash
+npm install
 npm run dev
-npm run build
 ```
+
+Vite serves the gallery at [http://localhost:5173/](http://localhost:5173/).
+
+| Script | What it does |
+| --- | --- |
+| `npm run dev` | Gallery dev server |
+| `npm run build` | Static gallery → `website/` |
+| `npm run build:lib` | Package ESM + types → `dist/` |
+| `npm run serve` | Preview the gallery build |
+| `npx tsc --noEmit` | Type-check |
+
+## Package
+
+Published as [`@tanishqkancharla/maui`](https://www.npmjs.com/package/@tanishqkancharla/maui). The barrel exports the provider, theme, tokens, and components. Patterns and demo apps in this repo are reference implementations, not part of the package barrel.
+
+Agent conventions for consuming Maui: [`skills/maui`](./skills/maui/SKILL.md).
+
+## License
+
+MIT

package/dist/components/Button.js

@@ -18,13 +18,12 @@ const buttonBaseClass = style(text("xs", 400, "highContrast"), focusRing("&:focu
     gap: spacing.value(3),
     borderRadius: "4px",
     width: "fit-content",
+    height: "28px",
     border: "none",
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
     "& > svg": {
-        width: "16px",
-        height: "16px",
         flexShrink: 0,
     },
     "&:has(> svg)": {

package/dist/components/Code.d.ts

@@ -0,0 +1,5 @@
+import type React from "react";
+type CodeProps = React.HTMLAttributes<HTMLElement>;
+export declare function Code({ className, children, ...props }: CodeProps): React.JSX.Element;
+export declare function Kbd({ className, children, ...props }: CodeProps): React.JSX.Element;
+export {};

package/dist/components/Code.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, useStyles } from "purse-styles";
+import { colors } from "../tokens/colors";
+import { radius } from "../tokens/radius";
+import { spacing } from "../tokens/spacing";
+import { monospace, text } from "../tokens/text";
+const codeClass = style(monospace, radius.sm, spacing.padding({ x: 2, y: 1 }), {
+    backgroundColor: colors.gray[3],
+    color: colors.gray[12],
+    display: "inline",
+    boxDecorationBreak: "clone",
+    fontSize: "0.875em",
+    whiteSpace: "nowrap",
+});
+const kbdClass = style(text("xs", 400, "lowContrast"), radius.sm, {
+    backgroundColor: colors.gray[3],
+    boxDecorationBreak: "clone",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingInline: 3,
+    paddingBlock: 0,
+    whiteSpace: "nowrap",
+});
+export function Code({ className, children, ...props }) {
+    const codeClassName = useStyles(codeClass);
+    return (_jsx("code", { ...props, className: joinClassNames(codeClassName, className), children: children }));
+}
+export function Kbd({ className, children, ...props }) {
+    const kbdClassName = useStyles(kbdClass);
+    return (_jsx("kbd", { ...props, className: joinClassNames(kbdClassName, className), children: children }));
+}
+function joinClassNames(...classNames) {
+    return classNames.filter(Boolean).join(" ");
+}

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,4 @@
+export declare function CodeBlock(props: {
+    children: string;
+    lang: string;
+}): import("react").JSX.Element;

package/dist/components/CodeBlock.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { style, useStyles } from "purse-styles";
+import { highlightCode, isSupportedCodeLang } from "../utils/shiki";
+import { backgroundColor } from "../tokens/background";
+import { colors } from "../tokens/colors";
+import { shadow } from "../tokens/shadow";
+import { monospace, text } from "../tokens/text";
+import { useTheme } from "../theme/ThemeContext";
+const codeBlockClass = style(text("xs", 400, "highContrast"), monospace, shadow.subtle, {
+    backgroundColor: backgroundColor.app,
+    borderRadius: "6px",
+    color: colors.gray[12],
+    lineHeight: 1.6,
+    margin: 0,
+    overflowX: "auto",
+    padding: "12px",
+    "& .shiki": {
+        backgroundColor: "transparent !important",
+    },
+    "& .shiki code": {
+        font: "inherit",
+        fontSize: "inherit",
+        lineHeight: "inherit",
+        tabSize: "inherit",
+    },
+    '& .shiki span[style*="font-weight"]': {
+        fontWeight: "500 !important",
+    },
+});
+const codeClass = style({
+    font: "inherit",
+});
+export function CodeBlock(props) {
+    const className = useStyles(codeBlockClass);
+    const codeClassName = useStyles(codeClass);
+    const [html, setHtml] = useState(null);
+    const { resolvedTheme } = useTheme();
+    useEffect(() => {
+        if (!isSupportedCodeLang(props.lang)) {
+            setHtml(null);
+            return;
+        }
+        let cancelled = false;
+        highlightCode(props.children, props.lang, resolvedTheme).then((result) => {
+            if (!cancelled) {
+                setHtml(result);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [props.children, props.lang, resolvedTheme]);
+    if (!html) {
+        return (_jsx("pre", { className: className, children: _jsx("code", { className: codeClassName, children: props.children }) }));
+    }
+    return (_jsx("div", { className: `maui-code-block ${className}`, dangerouslySetInnerHTML: { __html: html } }));
+}

package/dist/components/Icons.d.ts

@@ -5,12 +5,17 @@ declare function Plus(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function Minus(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function DotsHorizontal(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function ArrowDown(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function ArrowUp(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function Star(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function Archive(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function Trash(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function Envelope(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function Clock(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function Pin(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function ChevronLeft(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function ChevronRight(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Eye(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+declare function Sidebar(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 export declare const Icons: {
     Search: typeof Search;
     CircleX: typeof CircleX;
@@ -18,11 +23,16 @@ export declare const Icons: {
     Minus: typeof Minus;
     DotsHorizontal: typeof DotsHorizontal;
     ArrowDown: typeof ArrowDown;
+    ArrowUp: typeof ArrowUp;
     Star: typeof Star;
     Archive: typeof Archive;
     Trash: typeof Trash;
     Envelope: typeof Envelope;
     Clock: typeof Clock;
     Pin: typeof Pin;
+    ChevronLeft: typeof ChevronLeft;
+    ChevronRight: typeof ChevronRight;
+    Eye: typeof Eye;
+    Sidebar: typeof Sidebar;
 };
 export {};

package/dist/components/Icons.js

@@ -18,6 +18,9 @@ function DotsHorizontal(props) {
 function ArrowDown(props) {
     return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.25 13.75L12 19.25L6.75 13.75" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 18.25V4.75" })] }));
 }
+function ArrowUp(props) {
+    return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.25 10.25L12 4.75L6.75 10.25" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 19.25V5.75" })] }));
+}
 function Star(props) {
     return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M12 4.75L14.16 9.13L19 9.83L15.5 13.24L16.33 18.06L12 15.78L7.67 18.06L8.5 13.24L5 9.83L9.84 9.13L12 4.75Z" }) }));
 }
@@ -36,6 +39,18 @@ function Clock(props) {
 function Pin(props) {
     return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M14.83 4.34L19.66 9.17C20.44 9.95 20.44 11.22 19.66 12L17.83 13.83L10.17 6.17L12 4.34C12.78 3.56 14.05 3.56 14.83 4.34Z" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, d: "M13.5 10.5L6 18M9.5 14.5L4.75 19.25" })] }));
 }
+function ChevronLeft(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M14.25 5.75L8.75 12L14.25 18.25" }) }));
+}
+function ChevronRight(props) {
+    return (_jsx("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9.75 5.75L15.25 12L9.75 18.25" }) }));
+}
+function Eye(props) {
+    return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3.75 12C5.5 8.75 8.4 6.75 12 6.75C15.6 6.75 18.5 8.75 20.25 12C18.5 15.25 15.6 17.25 12 17.25C8.4 17.25 5.5 15.25 3.75 12Z" }), _jsx("circle", { cx: "12", cy: "12", r: "2.25", stroke: "currentColor", strokeWidth: 1.5 })] }));
+}
+function Sidebar(props) {
+    return (_jsxs("svg", { focusable: "false", "aria-hidden": "true", role: "img", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M5.75 5.75H18.25V18.25H5.75V5.75Z" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.5, d: "M9.25 5.75V18.25" })] }));
+}
 export const Icons = {
     Search,
     CircleX,
@@ -43,10 +58,15 @@ export const Icons = {
     Minus,
     DotsHorizontal,
     ArrowDown,
+    ArrowUp,
     Star,
     Archive,
     Trash,
     Envelope,
     Clock,
     Pin,
+    ChevronLeft,
+    ChevronRight,
+    Eye,
+    Sidebar,
 };

package/dist/components/Input.js

@@ -17,6 +17,7 @@ const numberFieldDivider = `color-mix(in oklch, ${colors.gray[12]} 5%, ${backgro
 const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.subtle), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.subtle, {
     width: "100%",
     minWidth: 0,
+    height: "28px",
     color: colors.gray[12],
     border: "none",
     background: backgroundColor.element,
@@ -167,6 +168,7 @@ export function NumberField(props) {
 const quietInputClass = style(inputText, focusRing(), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), {
     width: "100%",
     minWidth: 0,
+    height: "28px",
     color: colors.gray[12],
     background: "transparent",
     border: "none",

package/dist/components/Select.js

@@ -21,6 +21,7 @@ const selectClass = style({
 const triggerClass = style(text("sm", 400, "highContrast"), focusRing("&:focus-visible", shadowVars.subtle), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.subtle, {
     display: "flex",
     alignItems: "center",
+    height: "28px",
     minWidth: 0,
     color: colors.gray[12],
     border: "none",

package/dist/maui.d.ts

@@ -12,9 +12,9 @@ export { spacing, type Space } from "./tokens/spacing";
 export { flex, flexItem, grid, gridItem } from "./tokens/layout";
 export { text, monospace, baseTextStyle, fontFamily, type TextSize, type TextWeight, type TextColor, } from "./tokens/text";
 export { avatar } from "./tokens/avatar";
-export { motion } from "./tokens/motion";
-export { sizingTokens as sizing } from "./tokens/sizing";
-export { prose, proseRhythm, type ProseSize } from "./tokens/prose";
+export { motion, motionDurationMs, motionEasing, motionStreamDurationMs, } from "./tokens/motion";
+export { icon, iconSizeValues, sizingTokens as sizing, type IconSize, } from "./tokens/sizing";
+export { prose, proseRhythm, proseHtml, proseStreamingMarkers, type ProseSize, } from "./tokens/prose";
 export { visuallyHidden } from "./tokens/visuallyHidden";
 export { Avatar } from "./components/Avatar";
 export { Badge } from "./components/Badge";
@@ -37,6 +37,7 @@ export { MenuTrigger, Menu, MenuItem, type MenuTriggerProps, type MenuProps, typ
 export { FuzzyString } from "./components/FuzzyString";
 export { Flex, Padding, Gap, Spacer, Divider } from "./components/Utils";
 export { H1, H2, H3, H4, P, Label, labelText, Blockquote, Ul, Ol, Li, Link, } from "./components/Typography";
-export { Sidebar, SidebarSection, SidebarItem } from "./patterns/Sidebar";
-export { Tree, defaultTreeGuideGeometry, type TreeNode, type TreeGuideGeometry } from "./patterns/Tree";
-export { Loader } from "./patterns/Loader";
+export { CodeBlock } from "./components/CodeBlock";
+export { Code, Kbd } from "./components/Code";
+export { CollectionPopover, type CollectionPopoverProps, } from "./components/CollectionPopover";
+export { navigationItem } from "./components/navigationItem";

package/dist/maui.js

@@ -14,9 +14,9 @@ export { spacing } from "./tokens/spacing";
 export { flex, flexItem, grid, gridItem } from "./tokens/layout";
 export { text, monospace, baseTextStyle, fontFamily, } from "./tokens/text";
 export { avatar } from "./tokens/avatar";
-export { motion } from "./tokens/motion";
-export { sizingTokens as sizing } from "./tokens/sizing";
-export { prose, proseRhythm } from "./tokens/prose";
+export { motion, motionDurationMs, motionEasing, motionStreamDurationMs, } from "./tokens/motion";
+export { icon, iconSizeValues, sizingTokens as sizing, } from "./tokens/sizing";
+export { prose, proseRhythm, proseHtml, proseStreamingMarkers, } from "./tokens/prose";
 export { visuallyHidden } from "./tokens/visuallyHidden";
 // Components
 export { Avatar } from "./components/Avatar";
@@ -40,7 +40,7 @@ export { MenuTrigger, Menu, MenuItem, } from "./components/Menu";
 export { FuzzyString } from "./components/FuzzyString";
 export { Flex, Padding, Gap, Spacer, Divider } from "./components/Utils";
 export { H1, H2, H3, H4, P, Label, labelText, Blockquote, Ul, Ol, Li, Link, } from "./components/Typography";
-// Patterns
-export { Sidebar, SidebarSection, SidebarItem } from "./patterns/Sidebar";
-export { Tree, defaultTreeGuideGeometry } from "./patterns/Tree";
-export { Loader } from "./patterns/Loader";
+export { CodeBlock } from "./components/CodeBlock";
+export { Code, Kbd } from "./components/Code";
+export { CollectionPopover, } from "./components/CollectionPopover";
+export { navigationItem } from "./components/navigationItem";

package/dist/tokens/background.d.ts

@@ -6,7 +6,6 @@ export declare const backgroundColor: {
 };
 export declare const background: {
     app: import("purse-styles").StyleElement;
-    subtle: import("purse-styles").StyleElement;
     element: import("purse-styles").StyleElement;
     elementHover: import("purse-styles").StyleElement;
     elementActive: import("purse-styles").StyleElement;

package/dist/tokens/background.js

@@ -25,7 +25,6 @@ export const backgroundColor = {
 };
 export const background = {
     app: style({ backgroundColor: backgroundColor.app }),
-    subtle: style({ backgroundColor: colors.gray[2] }),
     element: style({ backgroundColor: backgroundColor.element }),
     elementHover: style({ backgroundColor: backgroundColor.elementHover }),
     elementActive: style({ backgroundColor: backgroundColor.elementActive }),

package/dist/tokens/motion.d.ts

@@ -1,3 +1,8 @@
+/** Maui standard interactive transition timing. */
+export declare const motionDurationMs = 80;
+/** Entrance duration for streaming token reveals (Streamdown word fade). */
+export declare const motionStreamDurationMs = 80;
+export declare const motionEasing = "ease-in-out";
 export declare const motion: {
     readonly standard: (...args: string[]) => import("purse-styles").StyleElement;
 };

package/dist/tokens/motion.js

@@ -1,11 +1,15 @@
 import { style } from "purse-styles";
 import { memoize } from "../utils/memoize";
-const standardDuration = "80ms";
-const standardEasing = "ease-in-out";
+/** Maui standard interactive transition timing. */
+export const motionDurationMs = 80;
+/** Entrance duration for streaming token reveals (Streamdown word fade). */
+export const motionStreamDurationMs = 80;
+export const motionEasing = "ease-in-out";
+const standardDuration = `${motionDurationMs}ms`;
 export const motion = {
     standard: memoize((...properties) => style({
         transition: properties
-            .map((property) => `${property} ${standardDuration} ${standardEasing}`)
+            .map((property) => `${property} ${standardDuration} ${motionEasing}`)
             .join(", "),
     })),
 };

package/dist/tokens/prose.d.ts

@@ -28,3 +28,13 @@ export declare const prose: (size: ProseSize) => {
  * becomes the larger break before it.
  */
 export declare const proseRhythm: (size: ProseSize) => import("purse-styles").StyleElement;
+/**
+ * Element styles + vertical rhythm for HTML rendered outside React typography
+ * components (TipTap's ProseMirror tree, Streamdown markdown output).
+ *
+ * Uses a flex column + `gap` stack so spacing doesn't depend on fragile
+ * adjacent-sibling matching across Streamdown's memoized blocks.
+ */
+export declare const proseHtml: (size: ProseSize) => import("purse-styles").StyleElement;
+/** Fade list markers in with Streamdown word animation while streaming. */
+export declare const proseStreamingMarkers: import("purse-styles").StyleElement;

package/dist/tokens/prose.js

@@ -1,6 +1,7 @@
 import { style } from "purse-styles";
 import { memoize } from "../utils/memoize";
 import { colors } from "./colors";
+import { motionEasing, motionStreamDurationMs } from "./motion";
 import { fontFamily } from "./text";
 const metrics = {
     sm: {
@@ -115,3 +116,128 @@ export const proseRhythm = memoize((size) => {
         [`& > ${notHeading} + h4`]: { marginTop: px(m.h4.marginTop) },
     });
 });
+/**
+ * Element styles + vertical rhythm for HTML rendered outside React typography
+ * components (TipTap's ProseMirror tree, Streamdown markdown output).
+ *
+ * Uses a flex column + `gap` stack so spacing doesn't depend on fragile
+ * adjacent-sibling matching across Streamdown's memoized blocks.
+ */
+export const proseHtml = memoize((size) => {
+    const m = metrics[size];
+    return style({
+        display: "flex",
+        flexDirection: "column",
+        gap: px(m.blockGap),
+        "& p": {
+            ...block(m.paragraph),
+            fontWeight: 400,
+            color: bodyColor,
+            margin: 0,
+        },
+        "& h1": {
+            ...block(m.h1),
+            fontWeight: 700,
+            color: headingColor,
+            margin: 0,
+        },
+        "& h2": {
+            ...block(m.h2),
+            fontWeight: 700,
+            color: headingColor,
+            margin: 0,
+        },
+        "& h3": {
+            ...block(m.h3),
+            fontWeight: 600,
+            color: headingColor,
+            margin: 0,
+        },
+        "& h4": {
+            ...block(m.h4),
+            fontWeight: 600,
+            color: headingColor,
+            margin: 0,
+        },
+        "& a": {
+            fontWeight: 500,
+            color: headingColor,
+            textDecoration: "underline",
+        },
+        "& blockquote": {
+            ...block(m.paragraph),
+            fontWeight: 500,
+            fontStyle: "italic",
+            color: quoteColor,
+            borderLeft: `2px solid ${colors.accent[10]}`,
+            paddingLeft: "12px",
+            margin: 0,
+        },
+        "& ul, & ol": {
+            ...block(m.paragraph),
+            fontWeight: 400,
+            color: bodyColor,
+            paddingInlineStart: px(m.listPadding),
+            margin: 0,
+            listStyleType: "none",
+        },
+        "& ol": {
+            counterReset: "maui-ol",
+        },
+        "& ul > li, & ol > li": {
+            position: "relative",
+        },
+        "& ul > li::before": {
+            content: '"•"',
+            position: "absolute",
+            left: px(-m.listPadding),
+            width: px(m.listPadding),
+            color: colors.gray[11],
+            textAlign: "center",
+        },
+        "& ol > li": {
+            counterIncrement: "maui-ol",
+        },
+        "& ol > li::before": {
+            content: 'counter(maui-ol) "."',
+            position: "absolute",
+            left: px(-m.listPadding),
+            width: px(m.listPadding),
+            color: colors.gray[11],
+            textAlign: "right",
+            paddingRight: "0.4em",
+            boxSizing: "border-box",
+        },
+        "& ul > li + li, & ol > li + li": {
+            marginTop: px(m.listItemGap),
+        },
+        "& li > ul, & li > ol": {
+            marginTop: px(m.listNestedGap),
+        },
+        "& strong": { fontWeight: 600 },
+        "& em": { fontStyle: "italic" },
+        "& code": {
+            fontFamily: 'ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+            fontSize: "0.875em",
+        },
+        "& pre, & .maui-code-block": {
+            margin: 0,
+            overflowX: "auto",
+            minWidth: 0,
+        },
+        "& hr": {
+            border: "none",
+            borderTop: `1px solid ${colors.gray[6]}`,
+            margin: 0,
+        },
+        "& table": {
+            margin: 0,
+        },
+    });
+});
+/** Fade list markers in with Streamdown word animation while streaming. */
+export const proseStreamingMarkers = style({
+    "& li::before": {
+        animation: `sd-fadeIn ${motionStreamDurationMs}ms ${motionEasing} both`,
+    },
+});

package/dist/tokens/sizing.d.ts

@@ -1,4 +1,15 @@
+import type { TextSize } from "./text";
+/** Same t-shirt scale as `text(...)`. */
+export type IconSize = TextSize;
+/**
+ * Icon box sizes paired with text sizes. Values sit slightly above the
+ * matching font-size so stroke icons balance optically next to type.
+ * Intrinsic SVG artwork is 24×24 (`xl`).
+ */
+export declare const iconSizeValues: Record<IconSize, string>;
+export declare const icon: (size: TextSize) => import("purse-styles").StyleElement;
 export declare const sizingTokens: {
+    /** @deprecated Prefer `icon("sm")` — kept as the default inline icon size. */
     readonly icon: import("purse-styles").StyleElement;
     readonly fullWidth: import("purse-styles").StyleElement;
     readonly contentWidth: import("purse-styles").StyleElement;

package/dist/tokens/sizing.js

@@ -1,6 +1,26 @@
 import { style } from "purse-styles";
+import { memoize } from "../utils/memoize";
+/**
+ * Icon box sizes paired with text sizes. Values sit slightly above the
+ * matching font-size so stroke icons balance optically next to type.
+ * Intrinsic SVG artwork is 24×24 (`xl`).
+ */
+export const iconSizeValues = {
+    "2xs": "12px",
+    xs: "14px",
+    sm: "16px",
+    md: "18px",
+    lg: "20px",
+    xl: "24px",
+};
+export const icon = memoize((size) => style({
+    width: iconSizeValues[size],
+    height: iconSizeValues[size],
+    flexShrink: 0,
+}));
 export const sizingTokens = {
-    icon: style({ width: "16px", height: "16px" }),
+    /** @deprecated Prefer `icon("sm")` — kept as the default inline icon size. */
+    icon: icon("sm"),
     fullWidth: style({ width: "100%" }),
     contentWidth: style({ maxWidth: "72ch" }),
 };