@tanishqkancharla/maui 0.0.25 → 0.0.26

package/README.md

@@ -60,7 +60,7 @@ Vite serves the gallery at [http://localhost:5173/](http://localhost:5173/).
 
 ## Package
 
-The default package export is compiled `dist/` JavaScript and declarations. TypeScript source remains available through the `source` export condition and `maui/src`. Patterns and demo apps in this repo are reference implementations, not part of the package barrel.
+The default package export is compiled `dist/` JavaScript and declarations. TypeScript source remains available through the `source` export condition and `maui/src`. Patterns, demo apps, and the gallery `Panel` preview frame are reference implementations, not package components.
 
 Pushes to `main` publish a new patch of `@tanishqkancharla/maui` to npm (tag `vX.Y.Z`, provenance). Add `[skip release]` to the merge commit message to skip. Manual `git tag vX.Y.Z && git push origin vX.Y.Z` still publishes when the tag matches `package.json`. The gallery deploys to [maui.tanishqkancharla.dev](https://maui.tanishqkancharla.dev) through Vercel on `main`.
 

package/dist/components/Utils.d.ts

@@ -6,24 +6,15 @@ import { type Space } from "../tokens/spacing";
 export type FlexShadow = keyof typeof shadow;
 export type FlexRadius = keyof typeof radius;
 export type FlexBorder = true | BorderColor;
-type PaddingProps = {
-    top?: Space;
-    left?: Space;
-    right?: Space;
-    bottom?: Space;
-    x?: Space;
-    y?: Space;
-    xy?: Space;
-    children?: React.ReactNode;
-};
-export declare function Padding(props: PaddingProps): React.JSX.Element;
 type FlexProps = {
     gap?: Space;
     p?: Space;
     px?: Space;
     py?: Space;
     pt?: Space;
+    pr?: Space;
     pb?: Space;
+    pl?: Space;
     padding?: Space;
     children?: React.ReactNode;
     alignItems?: React.CSSProperties["alignItems"];

package/dist/components/Utils.js

@@ -6,17 +6,8 @@ import { flex } from "../tokens/layout";
 import { radius } from "../tokens/radius";
 import { shadow } from "../tokens/shadow";
 import { spacing } from "../tokens/spacing";
-export function Padding(props) {
-    const className = useStyles(spacing.padding({
-        top: props.top ?? props.y ?? props.xy,
-        bottom: props.bottom ?? props.y ?? props.xy,
-        left: props.left ?? props.x ?? props.xy,
-        right: props.right ?? props.x ?? props.xy,
-    }));
-    return _jsx("div", { className: className, children: props.children });
-}
 export function Flex(props) {
-    const { column, children, style: styleProp, gap, p, px, py, pt, pb, padding, alignItems, border: borderProp, shadow: shadowProp, radius: radiusProp, } = props;
+    const { column, children, style: styleProp, gap, p, px, py, pt, pr, pb, pl, padding, alignItems, border: borderProp, shadow: shadowProp, radius: radiusProp, } = props;
     const resolvedBorder = shadowProp || borderProp == null
         ? undefined
         : borderProp === true
@@ -29,7 +20,9 @@ export function Flex(props) {
         px === undefined &&
         py === undefined &&
         pt === undefined &&
+        pr === undefined &&
         pb === undefined &&
+        pl === undefined &&
         padding === undefined
         ? undefined
         : spacing.padding({
@@ -37,7 +30,9 @@ export function Flex(props) {
             x: px,
             y: py,
             top: pt,
+            right: pr,
             bottom: pb,
+            left: pl,
         }), alignItems === undefined ? undefined : style({ alignItems }), shadowProp ? shadow[shadowProp] : undefined, resolvedBorder ? border([], resolvedBorder) : undefined, radiusProp ? radius[radiusProp] : undefined);
     const rawStyle = styleProp;
     const inlineStyle = rawStyle != null && typeof rawStyle === "object" && !Array.isArray(rawStyle)

package/dist/maui.d.ts

@@ -39,7 +39,7 @@ export * from "./icons/root";
 export { ListBox, ListBoxItem, type ListBoxProps, type ListBoxItemProps, } from "./components/ListBox";
 export { MenuTrigger, Menu, MenuItem, type MenuTriggerProps, type MenuProps, type MenuItemProps, } from "./components/Menu";
 export { FuzzyString } from "./components/FuzzyString";
-export { Flex, Padding, Gap, Spacer, Divider, type FlexShadow, type FlexRadius, type FlexBorder, } from "./components/Utils";
+export { Flex, Gap, Spacer, Divider, type FlexShadow, type FlexRadius, type FlexBorder, } from "./components/Utils";
 export { Text, type TextProps } from "./components/Text";
 export { H1, H2, H3, H4, P, Label, labelText, Blockquote, Ul, Ol, Li, Link, } from "./components/Typography";
 export { CodeBlock } from "./components/CodeBlock";

package/dist/maui.js

@@ -42,7 +42,7 @@ export * from "./icons/root";
 export { ListBox, ListBoxItem, } from "./components/ListBox";
 export { MenuTrigger, Menu, MenuItem, } from "./components/Menu";
 export { FuzzyString } from "./components/FuzzyString";
-export { Flex, Padding, Gap, Spacer, Divider, } from "./components/Utils";
+export { Flex, Gap, Spacer, Divider, } from "./components/Utils";
 export { Text } from "./components/Text";
 export { H1, H2, H3, H4, P, Label, labelText, Blockquote, Ul, Ol, Li, Link, } from "./components/Typography";
 export { CodeBlock } from "./components/CodeBlock";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.25",
+	"version": "0.0.26",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/skills/maui/SKILL.md

@@ -54,7 +54,7 @@ Before designing or implementing new UI:
 | A pattern | [Patterns](#patterns) |
 | An app | [Apps](#apps) |
 
-Patterns, demo apps, and the gallery `Panel` preview surface are **not** part of the `"maui"` package barrel. Prefer the recipes in those references and rebuild with barrel exports (`Button`, `Flex`, `text(...)`, …).
+Patterns, demo apps, and the gallery `Panel` preview frame are **not** package components. `Panel` is not on the `"maui"` barrel, not in `src/components`, and not in the JSX editor catalog. Prefer the recipes in those references and rebuild with barrel exports (`Button`, `Flex`, `text(...)`, …).
 
 ## Design constraints
 
@@ -88,7 +88,7 @@ internal button or segment.
 
 ## Layout utilities
 
-`Flex`, `Padding`, and `Gap` take spacing scale steps (`1 | 2 | 3 | 4 | 6 | 8 | 12 | 16`), not raw pixels. Example: `<Flex row gap={4}>` is 9px, not 4px. `Spacer` grows to fill leftover flex space. `Divider` is a horizontal rule.
+`Flex` and `Gap` take spacing scale steps (`1 | 2 | 3 | 4 | 6 | 8 | 12 | 16`), not raw pixels. Example: `<Flex row gap={4} padding={4}>` is 9px gap and 9px inset, not 4px. Put padding on `Flex` (`padding` / `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl`) — there is no `Padding` component. `Spacer` grows to fill leftover flex space. `Divider` is a horizontal rule.
 
 ## Icons
 

package/skills/maui/references/apps/ai-chat.md

@@ -13,7 +13,7 @@ Column shell: outline border, `radius.lg`, `minHeight` ~560px / `maxHeight` ~720
 
 **Feed** (`role="log"` `aria-label="Conversation"` `aria-relevant="additions"`)
 
-- Padding `x: 8, y: 6`, column `gap` 6, `flex: 1`, `overflowY: auto`. Scroll to bottom when messages change.
+- `Flex column` with `px={8} py={6} gap={6}`, `flex: 1`, `overflowY: auto`. Scroll to bottom when messages change.
 - **User**: `justify: end`, bubble `maxWidth: 80%`, `prose("sm")` paragraph, `radius.md`, `shadow.subtle`, `background.element`, `pre-wrap`.
 - **Assistant**: full-width column.
   1. Optional tool-call lines (lowContrast, ellipsis): `Read path`, `Wrote path`, `$ command` (command in `monospace`).
@@ -22,8 +22,8 @@ Column shell: outline border, `radius.lg`, `minHeight` ~560px / `maxHeight` ~720
 
 **Composer**
 
-- Outer padding `x: 6, top: 4, bottom: 6`.
-- Inner shell: `radius.lg`, `shadow.subtle`, `background.element`, padding `x: 4, y: 3`, column.
+- Outer `Flex` with `px={6} pt={4} pb={6}`.
+- Inner shell: `radius.lg`, `shadow.subtle`, `background.element`, `Flex column` with `px={4} py={3}`.
 - `<Editor size="sm" onSubmit={send} editable={!streaming} placeholder="Message the assistant…" />`
 - Send: circular quiet-ish `Button` (`radius.circle`, no box-shadow, `gray[3]` fill so it reads on `element`), icon `ArrowUp`, `aria-label="Send"`, disabled while streaming or empty. ⌘/Ctrl+Enter also sends (`Editor onSubmit`).
 

package/skills/maui/references/apps/calendar.md

@@ -14,7 +14,7 @@ This is a **full-bleed schedule**, not a prose column.
 
 ## Sidebar
 
-Raised `background.element` + `shadow.subtle`, column `gap` 6, padding 4.
+Raised `background.element` + `shadow.subtle`, `Flex column` with `gap={6} p={4}`.
 
 - Toolbar: quiet icon buttons — hide sidebar (`Sidebar` icon), new event (`Plus`). Wrap in `Tooltip`.
 - **Mini month**: 7-column weekday initials (`2xs`), 24px circular day buttons. Today = `accent[9]` + `onAccent` text. Selected (not today) = `grayAlpha[4]`. Outside-month = `gray[8]`. Hover = `elementHover` (no background transition on the chrome; day buttons may use `motion.standard` on color only). Prev/next month chevrons.
@@ -34,7 +34,7 @@ Event colors: `accent` | `green` | `orange` | `pink` — fill step 3, text 11, s
 
 ## Details pane
 
-Raised column, padding 8.
+Raised `Flex column` with `p={8}`.
 
 - `SearchField` “Search events”. Matches render as a list of title (`FuzzyString`) + meta; click jumps to that event and date.
 - Selected event: title `lg`/600, time range or “All day”, duration, calendar swatch + name, `Button` “Add meeting note”.

package/skills/maui/references/apps/email-client.md

@@ -14,13 +14,13 @@ Shell: `radius.lg`, `shadow.subtle`, `minHeight` ~640px, `overflow: hidden`, `ba
 
 **Inbox pane**
 
-- Column, padding step 2, `minHeight: 0`, list `overflowY: auto`.
+- `Flex column` with `p={2}`, `minHeight: 0`, list `overflowY: auto`.
 - Header: `H3` “Inbox” (or mailbox name), padded to match multi-line row text (`pt` 6, `px` 4).
 - Body: InboxMultiLine with `threads`, `selectedId`, `onSelectThread`. Reset the pattern’s default `marginTop` so it sits flush under the header.
 
 **Reading pane**
 
-- Padding `x: 16, y: 8`, column `gap` 6, `overflowY: auto`.
+- `Flex column` with `px={16} py={8} gap={6}`, `overflowY: auto`.
 - Selected: `H2` subject, then MessageList of that thread’s messages (`sender`, `timestamp`, optional `edited`, `P` children).
 - None selected: lowContrast “Select a thread to read messages.”
 

package/skills/maui/references/components/layout-utilities.md

@@ -2,7 +2,7 @@
 
 Gallery: `/components/layout-utilities`. Import from `"maui"`. Layout tokens: [tokens.md](../tokens.md).
 
-Gallery-only: `Panel` is a preview frame in the docs site. It is **not** exported. Use `Flex` + `shadow` + `radius` instead.
+Gallery-only: `Panel` is a dotted preview frame in the docs site (`src/pages/Panel.tsx`). It is **not** a `"maui"` export (barrel or `src/components`). Use `Flex` + `shadow` + `radius` instead.
 
 ## `Flex`
 
@@ -22,16 +22,14 @@ Row **or** column (exactly one of `row` / `column` is required).
 | `row` / `column` | Required, mutually exclusive |
 | `gap` | Spacing step |
 | `p` / `padding` | All-side padding step |
-| `px` `py` `pt` `pb` | Axis / side padding |
+| `px` `py` `pt` `pr` `pb` `pl` | Axis / side padding |
 | `alignItems` | CSS `align-items` |
 | `border` | `true` (outline) or `"border" \| "outline" \| "accent"`. **Skipped when `shadow` is set** |
 | `shadow` | `"subtle" \| "medium" \| "strong"` — includes a ring; do not also set `border` |
 | `radius` | Token key (`sm`, `lg`, `pill`, …) |
 | `style` | React style object |
 
-## `Padding`
-
-`xy` (all), `x` / `y`, or `top` `right` `bottom` `left`. Spacing steps.
+Do not wrap children in a `Padding` box — that component does not exist. Use `Flex` padding props.
 
 ## `Gap`
 

package/skills/maui/references/tokens.md

@@ -50,7 +50,7 @@ function Row({ children }: { children: React.ReactNode }) {
 - `text({...})`, `shadow.subtle`, `background.element`, `radius.md`, `flex({...})`, `spacing.padding({...})` are already style objects — pass them to `useStyles`.
 - `style({ ... })` is for leftover CSS that tokens do not cover (`minWidth`, grid templates, absolute positioning).
 - Compose several objects in one `useStyles` call. Falsy entries are skipped.
-- For one-off layout, prefer the `Flex` / `Padding` components (see [layout-utilities.md](components/layout-utilities.md)). For repeated custom chrome, prefer tokens + `useStyles`.
+- For one-off layout, prefer `Flex` (see [layout-utilities.md](components/layout-utilities.md)). For repeated custom chrome, prefer tokens + `useStyles`.
 
 ## Color
 
@@ -140,7 +140,7 @@ spacing.gap[4]           // style { gap: 9px }
 spacing.value(4)         // "9px" — only when gap/padding tokens cannot apply
 ```
 
-`Flex` / `Padding` / `Gap` / `flex({ gap })` all take these steps.
+`Flex` / `Gap` / `flex({ gap })` all take these steps. Put inset on `Flex` with `padding` / `p` / `px` / `py` / `pt` / `pr` / `pb` / `pl`.
 
 ## Layout tokens
 

package/src/apps/JsxEditor/catalog.ts

@@ -50,7 +50,7 @@ import {
 	P,
 	Ul,
 } from "../../components/Typography"
-import { Divider, Flex, Gap, Padding, Spacer } from "../../components/Utils"
+import { Divider, Flex, Gap, Spacer } from "../../components/Utils"
 import { backgroundColor } from "../../tokens/background"
 import { borderColor } from "../../tokens/borders"
 import { colors, colorNames } from "../../tokens/colors"
@@ -86,16 +86,19 @@ export const iconNames = Object.keys(Icons)
 export const catalog: CatalogComponent[] = [
 	{
 		name: "Flex",
-		info: "Row or column flex layout. gap and p/px/py/pt/pb are spacing steps, not pixels.",
+		info: "Row or column flex layout. gap and padding/p/px/py/pt/pr/pb/pl are spacing steps, not pixels.",
 		attributes: [
 			{ name: "row", boolean: true, info: "Horizontal direction" },
 			{ name: "column", boolean: true, info: "Vertical direction" },
 			{ name: "gap", values: spaceValues, info: "Spacing scale step" },
+			{ name: "padding", values: spaceValues, info: "Padding on all sides (alias of p)" },
 			{ name: "p", values: spaceValues, info: "Padding on all sides" },
 			{ name: "px", values: spaceValues, info: "Horizontal padding" },
 			{ name: "py", values: spaceValues, info: "Vertical padding" },
 			{ name: "pt", values: spaceValues, info: "Padding top" },
+			{ name: "pr", values: spaceValues, info: "Padding right" },
 			{ name: "pb", values: spaceValues, info: "Padding bottom" },
+			{ name: "pl", values: spaceValues, info: "Padding left" },
 			{ name: "alignItems", values: alignItems },
 			{
 				name: "border",
@@ -118,19 +121,6 @@ export const catalog: CatalogComponent[] = [
 			},
 		],
 	},
-	{
-		name: "Padding",
-		info: "Padding box using the spacing scale.",
-		attributes: [
-			{ name: "xy", values: spaceValues },
-			{ name: "x", values: spaceValues },
-			{ name: "y", values: spaceValues },
-			{ name: "top", values: spaceValues },
-			{ name: "right", values: spaceValues },
-			{ name: "bottom", values: spaceValues },
-			{ name: "left", values: spaceValues },
-		],
-	},
 	{
 		name: "Gap",
 		info: "Fixed-size spacer. Pass width or height as a spacing step.",
@@ -535,7 +525,6 @@ export const previewScope: Record<string, unknown> = {
 	Divider,
 	Flex,
 	Gap,
-	Padding,
 	Spacer,
 	colors,
 	backgroundColor,

package/src/apps/JsxEditor/lint.test.ts

@@ -95,6 +95,15 @@ describe("collectJsxDiagnosticsFromSource", () => {
 		])
 	})
 
+	test("accepts Flex padding aliases and side props", () => {
+		const diagnostics = collectJsxDiagnosticsFromSource(
+			`<Flex column padding={6} px={4} py={3} pt={2} pr={8} pb={2} pl={8}>
+				<Text>Inset</Text>
+			</Flex>`,
+		)
+		expect(diagnostics).toEqual([])
+	})
+
 	test("accepts MenuTrigger with a Maui Button", () => {
 		const diagnostics = collectJsxDiagnosticsFromSource(
 			`<MenuTrigger>
@@ -109,3 +118,14 @@ describe("collectJsxDiagnosticsFromSource", () => {
 		expect(diagnostics).toEqual([])
 	})
 })
+
+describe("JSX editor catalog", () => {
+	test("does not expose Padding or Panel", async () => {
+		const { catalog, previewScope } = await import("./catalog")
+		const names = catalog.map((entry) => entry.name)
+		expect(names).not.toContain("Padding")
+		expect(names).not.toContain("Panel")
+		expect(previewScope).not.toHaveProperty("Padding")
+		expect(previewScope).not.toHaveProperty("Panel")
+	})
+})

package/src/components/Utils.tsx

@@ -11,37 +11,15 @@ export type FlexShadow = keyof typeof shadow
 export type FlexRadius = keyof typeof radius
 export type FlexBorder = true | BorderColor
 
-type PaddingProps = {
-	top?: Space
-	left?: Space
-	right?: Space
-	bottom?: Space
-	x?: Space
-	y?: Space
-	xy?: Space
-	children?: React.ReactNode
-}
-
-export function Padding(props: PaddingProps) {
-	const className = useStyles(
-		spacing.padding({
-			top: props.top ?? props.y ?? props.xy,
-			bottom: props.bottom ?? props.y ?? props.xy,
-			left: props.left ?? props.x ?? props.xy,
-			right: props.right ?? props.x ?? props.xy,
-		}),
-	)
-
-	return <div className={className}>{props.children}</div>
-}
-
 type FlexProps = {
 	gap?: Space
 	p?: Space
 	px?: Space
 	py?: Space
 	pt?: Space
+	pr?: Space
 	pb?: Space
+	pl?: Space
 	padding?: Space
 	children?: React.ReactNode
 	alignItems?: React.CSSProperties["alignItems"]
@@ -70,7 +48,9 @@ export function Flex(props: FlexProps) {
 		px,
 		py,
 		pt,
+		pr,
 		pb,
+		pl,
 		padding,
 		alignItems,
 		border: borderProp,
@@ -92,7 +72,9 @@ export function Flex(props: FlexProps) {
 			px === undefined &&
 			py === undefined &&
 			pt === undefined &&
+			pr === undefined &&
 			pb === undefined &&
+			pl === undefined &&
 			padding === undefined
 			? undefined
 			: spacing.padding({
@@ -100,7 +82,9 @@ export function Flex(props: FlexProps) {
 					x: px,
 					y: py,
 					top: pt,
+					right: pr,
 					bottom: pb,
+					left: pl,
 				}),
 		alignItems === undefined ? undefined : style({ alignItems }),
 		shadowProp ? shadow[shadowProp] : undefined,

package/src/maui.ts

@@ -134,7 +134,6 @@ export {
 export { FuzzyString } from "./components/FuzzyString"
 export {
 	Flex,
-	Padding,
 	Gap,
 	Spacer,
 	Divider,

package/src/pages/AssistantMessagePage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { style, useStyles } from "purse-styles"
 import { Button } from "../components/Button"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import {

package/src/pages/AvatarPage.tsx

@@ -1,5 +1,5 @@
 import { Avatar } from "../components/Avatar"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { Flex } from "../components/Utils"

package/src/pages/BackgroundColorTokenPage.tsx

@@ -1,6 +1,6 @@
 import { useStyles } from "purse-styles"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"

package/src/pages/BadgePage.tsx

@@ -1,5 +1,5 @@
 import { Badge } from "../components/Badge"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { Flex } from "../components/Utils"

package/src/pages/BordersTokenPage.tsx

@@ -2,7 +2,7 @@ import { style, useStyles, type CSSProperties } from "purse-styles"
 import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { border, type BorderColor, type BorderSide } from "../tokens/borders"

package/src/pages/ColorTokenPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, H4, P } from "../components/Typography"
 import { Flex } from "../components/Utils"

package/src/pages/CornerRadiusTokenPage.tsx

@@ -1,5 +1,5 @@
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"

package/src/pages/CrossfadePage.tsx

@@ -3,7 +3,7 @@ import { Button } from "../components/Button"
 import { Crossfade, type CrossfadeDirection } from "../components/Crossfade"
 import { CodeBlock } from "../components/CodeBlock"
 import { Icons } from "../components/Icons"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { RadioOption, RadioOptionGroup } from "../components/Radio"
 import { Text } from "../components/Text"

package/src/pages/CrossfadeStudioPage.tsx

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { style, useStyles } from "purse-styles"
 import { Button } from "../components/Button"
 import { Crossfade } from "../components/Crossfade"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { Text } from "../components/Text"
 import { H2, H3, Link, P } from "../components/Typography"

package/src/pages/EditorPage.tsx

@@ -1,6 +1,6 @@
 import { style, useStyles } from "purse-styles"
 import { Editor } from "../components/Editor"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { backgroundColor } from "../tokens/background"

package/src/pages/FlexTokenPage.tsx

@@ -1,5 +1,5 @@
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"
@@ -15,8 +15,9 @@ export function FlexTokenPage() {
 			<P>
 				<code>Flex</code> is a small layout wrapper around the spacing scale.
 				Pass <code>row</code> or <code>column</code>, and use scale steps for{" "}
-				<code>gap</code> and padding (<code>p</code>, <code>px</code>,{" "}
-				<code>py</code>, <code>pt</code>, <code>pb</code>) (not raw pixels).
+				<code>gap</code> and padding (<code>padding</code> / <code>p</code>,{" "}
+				<code>px</code>, <code>py</code>, <code>pt</code>, <code>pr</code>,{" "}
+				<code>pb</code>, <code>pl</code>) (not raw pixels).
 				Optional{" "}
 				<code>border</code>, <code>shadow</code>, and <code>radius</code> turn
 				it into a surface. Shadows already include a 1px ring, so{" "}
@@ -81,8 +82,9 @@ export function FlexTokenPage() {
 					</TableRow>
 					<TableRow>
 						<TableCell>
-							<code>p</code>, <code>px</code>, <code>py</code>, <code>pt</code>,{" "}
-							<code>pb</code>
+							<code>padding</code> / <code>p</code>, <code>px</code>,{" "}
+							<code>py</code>, <code>pt</code>, <code>pr</code>,{" "}
+							<code>pb</code>, <code>pl</code>
 						</TableCell>
 						<TableCell>
 							<code style={unionCodeStyle}>
@@ -97,7 +99,8 @@ export function FlexTokenPage() {
 							</code>
 						</TableCell>
 						<TableCell>
-							Padding from the spacing scale. More specific axes win (
+							Padding from the spacing scale. <code>padding</code> is an alias
+							of <code>p</code>. More specific axes win (
 							<code>pt</code> over <code>py</code> over <code>p</code>).
 						</TableCell>
 					</TableRow>

package/src/pages/FocusRingTokenPage.tsx

@@ -2,7 +2,7 @@ import { style, useStyles } from "purse-styles"
 import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { focusRing } from "../tokens/focusRing"

package/src/pages/FuzzyStringPage.tsx

@@ -4,7 +4,7 @@ import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"
 import { FuzzyString } from "../components/FuzzyString"
 import { SearchField } from "../components/Input"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { text } from "../tokens/text"

package/src/pages/IconsPage.tsx

@@ -4,7 +4,7 @@ import { useStyles } from "purse-styles"
 import { Icons, type IconProps } from "../components/Icons"
 import { CodeBlock } from "../components/CodeBlock"
 import { SearchField } from "../components/Input"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, H4, P } from "../components/Typography"
 import { borderColor } from "../tokens/borders"

package/src/pages/LayoutTokenPage.tsx

@@ -2,7 +2,7 @@ import { style, useStyles } from "purse-styles"
 import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, H4, P } from "../components/Typography"
 import { flex, flexItem, grid, gridItem } from "../tokens/layout"

package/src/pages/LayoutUtilitiesPage.tsx

@@ -2,22 +2,23 @@ import { CodeBlock } from "../components/CodeBlock"
 import { Prose } from "../components/Prose"
 import { Text } from "../components/Text"
 import { H2, H3, P } from "../components/Typography"
-import { Divider, Flex, Gap, Padding, Spacer } from "../components/Utils"
+import { Divider, Flex, Gap, Spacer } from "../components/Utils"
 
 export function LayoutUtilitiesPage() {
 	return (
 		<Prose style={{ marginBottom: "32px" }}>
 			<H2>Layout utilities</H2>
 			<P>
-				<code>Padding</code>, <code>Flex</code>, and <code>Gap</code> take
-				spacing scale steps (<code>1</code>–<code>16</code>), not raw pixels.{" "}
-				<code>Flex</code> also accepts <code>border</code>, <code>shadow</code>,{" "}
-				<code>radius</code>, and padding (<code>p</code>, <code>px</code>,{" "}
-				<code>py</code>, <code>pt</code>, <code>pb</code>) when it should read
-				as a surface. Shadows already include a 1px ring, so do not also set{" "}
-				<code>border</code>.
+				<code>Flex</code> and <code>Gap</code> take spacing scale steps (
+				<code>1</code>–<code>16</code>), not raw pixels. Put inset on{" "}
+				<code>Flex</code> with <code>padding</code> / <code>p</code>,{" "}
+				<code>px</code>, <code>py</code>, <code>pt</code>, <code>pr</code>,{" "}
+				<code>pb</code>, <code>pl</code>. <code>Flex</code> also accepts{" "}
+				<code>border</code>, <code>shadow</code>, and <code>radius</code> when
+				it should read as a surface. Shadows already include a 1px ring, so do
+				not also set <code>border</code>.
 			</P>
-			<Padding xy={6}>
+			<Flex column padding={6}>
 				<Flex row alignItems="center" px={4} py={3} border="outline" radius="md">
 					<Text size="sm">Flex</Text>
 					<Gap width={6} />
@@ -25,19 +26,19 @@ export function LayoutUtilitiesPage() {
 					<Spacer />
 					<Text size="sm">Spacer</Text>
 				</Flex>
-			</Padding>
+			</Flex>
 			<H3>Surface</H3>
 			<CodeBlock lang="tsx">{`<Flex column gap={4} p={6} shadow="subtle" radius="lg">
   <Text size="sm">Raised group</Text>
 </Flex>`}</CodeBlock>
-			<Padding xy={6}>
+			<Flex column padding={6}>
 				<Flex column gap={4} p={6} shadow="subtle" radius="lg">
 					<Text size="sm">Raised group</Text>
 					<Text size="sm" color="lowContrast">
 						shadow=&quot;subtle&quot; includes the ring
 					</Text>
 				</Flex>
-			</Padding>
+			</Flex>
 			<Divider />
 		</Prose>
 	)

package/src/pages/MessageListPage.tsx

@@ -1,5 +1,5 @@
 import { style, useStyles } from "purse-styles"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { EmailMessageThread } from "../patterns/MessageList"

package/src/pages/MotionTokenPage.tsx

@@ -4,7 +4,7 @@ import { Table, TableBody, TableCell, TableHead,
 import { style, useStyles } from "purse-styles"
 import { Button } from "../components/Button"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { motion, motionDurationMs, motionEasing } from "../tokens/motion"

package/src/{components → pages}/Panel.tsx

@@ -1,3 +1,4 @@
+/** Gallery-only preview frame. Not a `"maui"` package component. */
 import type React from "react"
 import { style, useStyles } from "purse-styles"
 import { border } from "../tokens/borders"

package/src/pages/ProsePage.tsx

@@ -1,4 +1,4 @@
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import {
 	Blockquote,

package/src/pages/ShadowTokenPage.tsx

@@ -1,6 +1,6 @@
 import { style, useStyles } from "purse-styles"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import {
 	Table,

package/src/pages/SidebarPage.tsx

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { style, useStyles } from "purse-styles"
 import { Badge } from "../components/Badge"
 import { Icons } from "../components/Icons"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, P } from "../components/Typography"
 import { Sidebar, SidebarItem, SidebarSection } from "../patterns/Sidebar"

package/src/pages/SizingTokenPage.tsx

@@ -8,7 +8,7 @@ import {
 	TableRow,
 } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, H4, P } from "../components/Typography"
 import { borderColor } from "../tokens/borders"

package/src/pages/SpacingTokenPage.tsx

@@ -2,7 +2,7 @@ import { useStyles } from "purse-styles"
 import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, H4, P } from "../components/Typography"
 import { spacing } from "../tokens/spacing"

package/src/pages/TablePage.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react"
 import type { Selection } from "react-aria-components"
 import { Code } from "../components/Code"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import {
 	Table,

package/src/pages/TextPage.tsx

@@ -1,6 +1,6 @@
 import { Code } from "../components/Code"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import {
 	Table,

package/src/pages/TextTokenPage.tsx

@@ -2,7 +2,7 @@ import { useStyles } from "purse-styles"
 import { Table, TableBody, TableCell, TableHead,
 	TableHeader, TableRow } from "../components/Table"
 import { CodeBlock } from "../components/CodeBlock"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { H2, H3, H4, P } from "../components/Typography"
 import { text, type TextSize } from "../tokens/text"

package/src/pages/ThinkingPage.tsx

@@ -1,5 +1,5 @@
 import { style, useStyles } from "purse-styles"
-import { Panel } from "../components/Panel"
+import { Panel } from "./Panel"
 import { Prose } from "../components/Prose"
 import { Thinking } from "../components/Thinking"
 import { H2, H3, P } from "../components/Typography"