@tanishqkancharla/maui 0.0.1 → 0.0.2

package/dist/components/Button.js

@@ -23,8 +23,6 @@ const buttonBaseClass = style(text("xs", 400, "highContrast"), focusRing("&:focu
     overflow: "hidden",
     whiteSpace: "nowrap",
     "& > svg": {
-        width: "16px",
-        height: "16px",
         flexShrink: 0,
     },
     "&:has(> svg)": {

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,6 +5,7 @@ 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;
@@ -18,6 +19,7 @@ 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;

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" }) }));
 }
@@ -43,6 +46,7 @@ export const Icons = {
     Minus,
     DotsHorizontal,
     ArrowDown,
+    ArrowUp,
     Star,
     Archive,
     Trash,

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,6 @@ 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 { 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,6 @@ 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 { CollectionPopover, } from "./components/CollectionPopover";
+export { navigationItem } from "./components/navigationItem";

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" }),
 };

package/dist/utils/mauiShikiTheme.d.ts

@@ -0,0 +1,87 @@
+import type { ThemeRegistration } from "shiki";
+export declare const mauiThemeTokens: {
+    readonly dark: readonly [{
+        readonly role: "Foreground";
+        readonly sublime: "fgBase";
+        readonly color: string;
+    }, {
+        readonly role: "Comment";
+        readonly sublime: "comment";
+        readonly color: string;
+    }, {
+        readonly role: "Keyword";
+        readonly sublime: "keyword";
+        readonly color: string;
+    }, {
+        readonly role: "Operator";
+        readonly sublime: "keyword.operator";
+        readonly color: string;
+    }, {
+        readonly role: "Type";
+        readonly sublime: "entity.name.type";
+        readonly color: string;
+    }, {
+        readonly role: "Type reference";
+        readonly sublime: "support.type";
+        readonly color: string;
+    }, {
+        readonly role: "String / constant";
+        readonly sublime: "string, constant";
+        readonly color: string;
+    }, {
+        readonly role: "Function";
+        readonly sublime: "entity.name.function";
+        readonly color: string;
+    }, {
+        readonly role: "Punctuation";
+        readonly sublime: "punctuation";
+        readonly color: string;
+    }, {
+        readonly role: "Bracket / accent";
+        readonly sublime: "brackets";
+        readonly color: string;
+    }];
+    readonly light: readonly [{
+        readonly role: "Foreground";
+        readonly sublime: "fgBase";
+        readonly color: string;
+    }, {
+        readonly role: "Comment";
+        readonly sublime: "comment";
+        readonly color: string;
+    }, {
+        readonly role: "Keyword";
+        readonly sublime: "keyword";
+        readonly color: string;
+    }, {
+        readonly role: "Operator";
+        readonly sublime: "keyword.operator";
+        readonly color: string;
+    }, {
+        readonly role: "Type";
+        readonly sublime: "entity.name.type";
+        readonly color: string;
+    }, {
+        readonly role: "Type reference";
+        readonly sublime: "support.type";
+        readonly color: string;
+    }, {
+        readonly role: "String / constant";
+        readonly sublime: "string, constant";
+        readonly color: string;
+    }, {
+        readonly role: "Function";
+        readonly sublime: "entity.name.function";
+        readonly color: string;
+    }, {
+        readonly role: "Punctuation";
+        readonly sublime: "punctuation";
+        readonly color: string;
+    }, {
+        readonly role: "Bracket / accent";
+        readonly sublime: "brackets";
+        readonly color: string;
+    }];
+};
+export declare const mauiShikiThemeDark: ThemeRegistration;
+export declare const mauiShikiThemeLight: ThemeRegistration;

package/dist/utils/mauiShikiTheme.js

@@ -0,0 +1,174 @@
+// Adapted from rsms/sublime-theme (rsms-dark), remapped to Maui gray + accent.
+const darkColors = {
+    foreground: "#eeeeee", // --gray-12
+    foregroundMuted: "#b4b4b4", // --gray-11
+    unimportant: "#6e6e6e", // --gray-9
+    comment: "#6e6e6e",
+    keyword: "#8b8fd8", // desaturated accent
+    operator: "#d9a066", // rsms orange, softened
+    type: "#ecebe8",
+    typeRef: "#e8c9a0", // rsms typeRef, warm
+    string: "#6fbf9a", // rsms dataBase green
+    stringBright: "#8fd9b8",
+    function: "#ecebe8",
+    meta: "#8a9f94",
+    accent: "#a8a6f0", // --accent-color / brackets
+    invalid: "#e85d4f",
+};
+const lightColors = {
+    foreground: "#202020",
+    foregroundMuted: "#646464",
+    unimportant: "#838383",
+    comment: "#646464",
+    keyword: "#3e63dd",
+    operator: "#a15c00",
+    type: "#272962",
+    typeRef: "#8a4b08",
+    string: "#18794e",
+    stringBright: "#147d64",
+    function: "#202020",
+    meta: "#66736d",
+    accent: "#3e63dd",
+    invalid: "#ce2c31",
+};
+function createThemeTokens(colors) {
+    return [
+        { role: "Foreground", sublime: "fgBase", color: colors.foreground },
+        { role: "Comment", sublime: "comment", color: colors.comment },
+        { role: "Keyword", sublime: "keyword", color: colors.keyword },
+        { role: "Operator", sublime: "keyword.operator", color: colors.operator },
+        { role: "Type", sublime: "entity.name.type", color: colors.type },
+        { role: "Type reference", sublime: "support.type", color: colors.typeRef },
+        {
+            role: "String / constant",
+            sublime: "string, constant",
+            color: colors.string,
+        },
+        {
+            role: "Function",
+            sublime: "entity.name.function",
+            color: colors.function,
+        },
+        { role: "Punctuation", sublime: "punctuation", color: colors.unimportant },
+        { role: "Bracket / accent", sublime: "brackets", color: colors.accent },
+    ];
+}
+export const mauiThemeTokens = {
+    dark: createThemeTokens(darkColors),
+    light: createThemeTokens(lightColors),
+};
+function createMauiShikiTheme(name, type, colors) {
+    return {
+        name,
+        type,
+        colors: {
+            "editor.background": "#00000000",
+            "editor.foreground": colors.foreground,
+        },
+        tokenColors: [
+            {
+                settings: {
+                    foreground: colors.foreground,
+                },
+            },
+            {
+                scope: ["comment", "punctuation.definition.comment"],
+                settings: { foreground: colors.comment, fontStyle: "italic" },
+            },
+            {
+                scope: ["meta.keyword", "meta.annotation"],
+                settings: { foreground: colors.meta },
+            },
+            {
+                scope: [
+                    "punctuation.separator",
+                    "punctuation.terminator",
+                    "punctuation.accessor",
+                    "punctuation.section",
+                    "keyword.operator.type.annotation",
+                ],
+                settings: { foreground: colors.unimportant },
+            },
+            {
+                scope: [
+                    "entity.name.type",
+                    "entity.name.class",
+                    "entity.name.struct",
+                    "entity.name.enum",
+                    "meta.type.declaration entity.name.type",
+                ],
+                settings: { foreground: colors.type, fontStyle: "bold" },
+            },
+            {
+                scope: [
+                    "support.type",
+                    "meta.type.annotation entity.name.type",
+                    "entity.other.inherited-class",
+                ],
+                settings: { foreground: colors.typeRef },
+            },
+            {
+                scope: [
+                    "keyword",
+                    "storage",
+                    "storage.type.keyword",
+                    "keyword.operator.new",
+                    "keyword.operator.delete",
+                ],
+                settings: { foreground: colors.keyword },
+            },
+            {
+                scope: ["keyword.operator"],
+                settings: { foreground: colors.operator },
+            },
+            {
+                scope: ["entity.name.function", "support.function"],
+                settings: { foreground: colors.function, fontStyle: "bold" },
+            },
+            {
+                scope: [
+                    "string",
+                    "constant",
+                    "string punctuation.definition",
+                    "constant punctuation.definition",
+                    "constant.numeric",
+                ],
+                settings: { foreground: colors.string },
+            },
+            {
+                scope: ["string constant"],
+                settings: { foreground: colors.stringBright },
+            },
+            {
+                scope: ["string variable", "variable", "variable.other"],
+                settings: { foreground: colors.foregroundMuted },
+            },
+            {
+                scope: ["meta.tag"],
+                settings: { foreground: colors.unimportant },
+            },
+            {
+                scope: ["meta.tag entity.name"],
+                settings: { foreground: colors.typeRef },
+            },
+            {
+                scope: ["meta.tag entity", "meta.tag.attributes"],
+                settings: { foreground: colors.foregroundMuted },
+            },
+            {
+                scope: ["entity.other.attribute-name"],
+                settings: { foreground: colors.typeRef },
+            },
+            {
+                scope: ["punctuation.definition.tag"],
+                settings: { foreground: colors.unimportant },
+            },
+            {
+                scope: ["invalid.illegal"],
+                settings: { foreground: colors.foreground, background: colors.invalid },
+            },
+        ],
+    };
+}
+export const mauiShikiThemeDark = createMauiShikiTheme("maui-dark", "dark", darkColors);
+export const mauiShikiThemeLight = createMauiShikiTheme("maui-light", "light", lightColors);

package/dist/utils/shiki.d.ts

@@ -0,0 +1,7 @@
+import type { ResolvedTheme } from "../theme/ThemeContext";
+/** Canonical Shiki language ids loaded into the highlighter. */
+export declare const supportedCodeLangs: readonly ["typescript", "javascript", "tsx", "css", "json", "bash"];
+export type SupportedCodeLang = (typeof supportedCodeLangs)[number];
+export declare function resolveCodeLang(lang: string): SupportedCodeLang | null;
+export declare function isSupportedCodeLang(lang: string): boolean;
+export declare function highlightCode(code: string, lang: string, theme: ResolvedTheme): Promise<string>;