@tanishqkancharla/maui 0.0.2 → 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,6 +18,7 @@ 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",

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/Icons.d.ts

@@ -12,6 +12,10 @@ 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;
@@ -26,5 +30,9 @@ export declare const Icons: {
     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

@@ -39,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,
@@ -53,4 +65,8 @@ export const Icons = {
     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

@@ -38,5 +38,6 @@ 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 { 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

@@ -41,5 +41,6 @@ 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 { 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",
@@ -41,6 +41,7 @@
 		"deploy": "npx vercel deploy",
 		"test": "vitest",
 		"mcp:browser": "node .cursor/libretto-browser-mcp.mjs",
+		"mcp:agentation": "node .cursor/agentation-mcp.mjs",
 		"release": "npm run build:lib && npm publish"
 	},
 	"author": "Tanishq Kancharla",
@@ -54,6 +55,8 @@
 		"@types/react": "^19.2.17",
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^6.0.2",
+		"agentation": "^3.0.2",
+		"agentation-mcp": "^1.2.0",
 		"esbuild": "^0.28.0",
 		"libretto-browser-tools": "^0.1.2",
 		"process": "^0.11.10",
@@ -77,7 +80,6 @@
 		"@types/inline-style-prefixer": "^5.0.3",
 		"dedent": "^1.7.2",
 		"inline-style-prefixer": "^7.0.1",
-		"leva": "^0.10.1",
 		"lodash": "^4.18.1",
 		"purse-styles": "^0.2.1",
 		"react": "^19.2.7",

package/skills/maui/SKILL.md

@@ -5,7 +5,7 @@ description: Conventions for consuming the Maui design system. Use when building
 
 # Maui
 
-TypeScript-first design system styled with `purse-styles`. Wrap the app in `MauiProvider`, then import tokens and components from `"maui"`.
+TypeScript-first design system styled with `purse-styles`. Wrap the app in `MauiProvider`, then import tokens and components from `"@tanishqkancharla/maui"`.
 
 ```ts
 import { style } from "purse-styles"
@@ -16,7 +16,7 @@ import {
 	colors,
 	radius,
 	shadow,
-} from "maui"
+} from "@tanishqkancharla/maui"
 
 function App() {
 	return (
@@ -29,9 +29,9 @@ function App() {
 
 The published package exposes:
 
-- `"maui"` — built barrel (`dist/`) of provider, theme, tokens, and components
-- `"maui/src/*"` — TypeScript source for deep imports
-- `"maui/skills/maui"` — this skill file
+- `"@tanishqkancharla/maui"` — built barrel (`dist/`) of provider, theme, tokens, and components
+- `"@tanishqkancharla/maui/src/*"` — TypeScript source for deep imports
+- `"@tanishqkancharla/maui/skills/maui"` — this skill file
 
 `MauiProvider` sets up theme (`data-theme` / `color-scheme`), `PurseProvider`, design-system globals, and the focus UI database used by Button/Dialog.
 
@@ -57,7 +57,7 @@ internal button or segment.
 
 ## Focus
 
-`focusRing()` applies a theme-aware Radix blue shadow (`blueAlpha[8]` hard edge + `blueAlpha[5]` glow). Do not hand-roll a competing outline or box-shadow for keyboard focus.
+`focusRing()` applies a theme-aware Radix blue shadow (`blueA8` hard edge + `blueA5` glow). Do not hand-roll a competing outline or box-shadow for keyboard focus.
 
 ## Layout utilities
 
@@ -65,23 +65,19 @@ internal button or segment.
 
 ## Reference: patterns and apps
 
-Patterns and demo apps are **not** part of the `"maui"` package barrel. Use them as in-repo reference implementations (also available via `"maui/src/..."` when the package ships source):
+Patterns and demo apps are **not** part of the `"@tanishqkancharla/maui"` package barrel. Use them as in-repo reference implementations (also available via `"@tanishqkancharla/maui/src/..."` when the package ships source):
 
 ### Patterns — `src/patterns/`
 
-| Path | Role |
-| --- | --- |
-| `src/patterns/AssistantMessage.tsx` | Streaming markdown reply (Streamdown + Maui prose) |
-| `src/patterns/Editor.tsx` | TipTap markdown composer |
-| `src/patterns/Loader.tsx` | Game-of-life loader |
-| `src/patterns/Sidebar.tsx` | App sidebar chrome |
-| `src/patterns/Tree.tsx` | Nested tree navigation |
-| `src/patterns/Inbox.tsx` | Mail inbox layout |
-| `src/patterns/MessageList.tsx` | Message list rows |
+- `src/patterns/AssistantMessage.tsx` — Streaming markdown reply (Streamdown + Maui prose)
+- `src/patterns/Editor.tsx` — TipTap markdown composer
+- `src/patterns/Loader.tsx` — Game-of-life loader
+- `src/patterns/Sidebar.tsx` — App sidebar chrome
+- `src/patterns/Inbox.tsx` — Mail inbox layout
+- `src/patterns/MessageList.tsx` — Message list rows
 
 ### Apps — `src/apps/`
 
-| Path | Role |
-| --- | --- |
-| `src/apps/AiChat/` | Mock streaming AI chat (Editor + AssistantMessage) |
-| `src/apps/EmailClient/` | Email client demo composing inbox patterns |
+- `src/apps/AiChat/` — Mock streaming AI chat (Editor + AssistantMessage)
+- `src/apps/EmailClient/` — Email client demo composing inbox patterns
+- `src/apps/Calendar/` — Three-pane schedule (mini month, week grid, event details)