@mangtre/ui 0.1.0

package/dist/sandbox.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { Locale } from '@mangtre/core';
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+
+interface Themed {
+    theme?: ThemeMode;
+    className?: string;
+}
+type ScanLevel = "safe" | "review" | "blocked";
+interface SafetyScanBadgeProps extends Themed {
+    level: ScanLevel;
+    locale?: Locale;
+}
+declare function SafetyScanBadge({ level, locale, theme, className }: SafetyScanBadgeProps): react.JSX.Element;
+interface SandboxFrameProps extends Themed {
+    /** The sandboxed iframe (or a probe slot). */
+    children: ReactNode;
+    /** Display origin (e.g. mang-apps.com) shown in the chrome bar. */
+    origin?: string;
+    /** Source label (e.g. "sandbox" / "creator"). */
+    source?: ReactNode;
+}
+declare function SandboxFrame({ children, origin, source, theme, className }: SandboxFrameProps): react.JSX.Element;
+interface SandboxErrorProps extends Themed {
+    message?: ReactNode;
+}
+declare function SandboxError({ message, theme, className }: SandboxErrorProps): react.JSX.Element;
+interface ScanFinding {
+    severity: "error" | "warn" | "info";
+    message: ReactNode;
+}
+interface StaticScanResultProps extends Themed {
+    findings: ScanFinding[];
+    /** Shown when there are no findings. */
+    emptyLabel?: ReactNode;
+}
+declare function StaticScanResult({ findings, emptyLabel, theme, className, }: StaticScanResultProps): react.JSX.Element;
+
+export { SafetyScanBadge, type SafetyScanBadgeProps, SandboxError, type SandboxErrorProps, SandboxFrame, type SandboxFrameProps, type ScanFinding, type ScanLevel, StaticScanResult, type StaticScanResultProps };

package/dist/sandbox.js

@@ -0,0 +1,15 @@
+import "./chunk-VP56Z4BS.js";
+import {
+  SafetyScanBadge,
+  SandboxError,
+  SandboxFrame,
+  StaticScanResult
+} from "./chunk-X7T2DJLU.js";
+import "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  SafetyScanBadge,
+  SandboxError,
+  SandboxFrame,
+  StaticScanResult
+};

package/dist/settings.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+import '@mangtre/core';
+
+interface Themed {
+    theme?: ThemeMode;
+    className?: string;
+    children?: ReactNode;
+}
+declare function SettingsSection({ title, theme, className, children, }: Themed & {
+    title?: ReactNode;
+}): react.JSX.Element;
+interface SettingsRowProps extends Themed {
+    label: ReactNode;
+    description?: ReactNode;
+    /** Trailing control (Switch/Select/Button/…). */
+    control?: ReactNode;
+}
+declare function SettingsRow({ label, description, control, theme, className }: SettingsRowProps): react.JSX.Element;
+interface SettingsToggleProps extends Themed {
+    label: ReactNode;
+    description?: ReactNode;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+declare function SettingsToggle({ label, description, checked, onChange, theme, className, }: SettingsToggleProps): react.JSX.Element;
+
+export { SettingsRow, type SettingsRowProps, SettingsSection, SettingsToggle, type SettingsToggleProps };

package/dist/settings.js

@@ -0,0 +1,13 @@
+import {
+  SettingsRow,
+  SettingsSection,
+  SettingsToggle
+} from "./chunk-VRD66FIA.js";
+import "./chunk-PQGUWJG4.js";
+import "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  SettingsRow,
+  SettingsSection,
+  SettingsToggle
+};

package/dist/surface.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+import '@mangtre/core';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Adds hover lift + pointer affordance. */
+    interactive?: boolean;
+    theme?: ThemeMode;
+}
+declare function Card({ interactive, theme, className, children, ...rest }: CardProps): react.JSX.Element;
+declare const CardHeader: ({ className, children, style, }: {
+    className?: string;
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => react.JSX.Element;
+declare const CardBody: ({ className, children, style, }: {
+    className?: string;
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => react.JSX.Element;
+declare const CardFooter: ({ className, children, style, }: {
+    className?: string;
+    children?: ReactNode;
+    style?: CSSProperties;
+}) => react.JSX.Element;
+interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: ThemeMode;
+}
+/** A sunken, bordered panel for grouping secondary content. */
+declare function Panel({ theme, className, children, ...rest }: PanelProps): react.JSX.Element;
+
+export { Card, CardBody, CardFooter, CardHeader, type CardProps, Panel, type PanelProps };

package/dist/surface.js

@@ -0,0 +1,16 @@
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Panel
+} from "./chunk-5Z4VLQKH.js";
+import "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Panel
+};

package/dist/theme.css

@@ -0,0 +1,63 @@
+/*
+ * Măng Tailwind v4 theme preset — import this into a Tailwind entry to get Măng color +
+ * font utilities (bg-mang-green, text-content-muted, border-line-default, bg-accent-soft,
+ * bg-state-success, font-heading, …) WITHOUT re-declaring them.
+ *
+ *   Shell / Tailwind mini-app CSS entry:
+ *     @layer theme, base, components, utilities;
+ *     @import "tailwindcss/theme.css"     layer(theme);
+ *     @import "@mangtre/ui/theme.css"        layer(theme);
+ *     @import "tailwindcss/utilities.css" layer(utilities);
+ *
+ * ADDITIVE on purpose: no `--*: initial` reset, so Tailwind's built-in spacing/radius/etc.
+ * scales survive alongside these brand tokens. Ships ZERO base/reset rules (Preflight stays
+ * the consumer's choice — mini-apps keep it OFF).
+ *
+ * MIRROR of packages/ui/src/tokens.ts (color + font subset) — parity-checked by tokens.test.ts.
+ */
+@theme {
+  /* --- brand (7) --- */
+  --color-mang-green: #37b693;
+  --color-mang-shoot: #8fe3b8;
+  --color-mang-bamboo: #1f7a5c;
+  --color-mang-soil: #b5793a;
+  --color-mang-sun: #e8c547;
+  --color-mang-paper: #f4f1e8;
+  --color-mang-dark: #14201c;
+
+  /* --- semantic: surface --- */
+  --color-surface-base: #ffffff;
+  --color-surface-sunken: #f6faf9;
+  --color-surface-inverse: #14201c;
+
+  /* --- semantic: content (text) --- */
+  --color-content-default: #16242c;
+  --color-content-strong: #14201c;
+  --color-content-muted: #5d6f78;
+  --color-content-inverse: #f4f1e8;
+  --color-content-on-accent: #ffffff;
+
+  /* --- semantic: line (borders) --- */
+  --color-line-subtle: #eef3f2;
+  --color-line-default: #e4eceb;
+  --color-line-strong: #cdd9d6;
+
+  /* --- semantic: accent --- */
+  --color-accent-default: #37b693;
+  --color-accent-hover: #2e9e80;
+  --color-accent-soft: #e7f6f1;
+
+  /* --- semantic: state --- */
+  --color-state-success: #1f9c7e;
+  --color-state-success-soft: #e7f6f1;
+  --color-state-danger: #d2674a;
+  --color-state-danger-soft: #fbeee9;
+  --color-state-warning: #c77d2e;
+  --color-state-warning-soft: #fbf1e2;
+  --color-state-info: #2e7cb8;
+  --color-state-info-soft: #e6f0f8;
+
+  /* --- fonts --- */
+  --font-heading: "Quicksand Variable", system-ui, sans-serif;
+  --font-body: "Inter", system-ui, sans-serif;
+}

package/dist/theme.d.ts

@@ -0,0 +1,64 @@
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+export { D as Density, M as MangThemeContextValue, a as MangThemeProvider, b as MangThemeProviderProps, u as useDensity, c as useLocale, d as useMangTheme, e as useResolvedTheme } from './MangThemeProvider-BqdGKBP2.js';
+import 'react';
+import '@mangtre/core';
+
+/**
+ * `useScopedStyle` — mount a refcounted, id-keyed `<style>` for a component's lifetime.
+ *
+ * Thin React wrapper over `mountScopedStyle` (`../scopedStyle`): inject `css` under `id` on
+ * mount, dispose on unmount. Many component instances share one id → one `<style>` tag (the
+ * refcount keeps it alive until the last unmounts). This is how every `@mangtre/ui` component
+ * ships its CSS without Tailwind and without a build step.
+ */
+declare function useScopedStyle(id: string, css: string): void;
+
+/**
+ * The ONE shared stylesheet for every `@mangtre/ui` P0 component.
+ *
+ * Why one sheet: each component calls `useKitStyles()` which mounts this string under a single
+ * refcounted id (`mountScopedStyle`), so N components share ONE `<style>` tag — no per-component
+ * duplication, no Tailwind dependency, works bundled into a mini-app (incl. sandboxed) exactly as
+ * in the shell. Built once from the canonical Măng tokens (`../tokens`).
+ *
+ * Theming: every color-bearing component roots `class="mang-ui-scope mang-…" data-theme="light|dark
+ * |auto"`. `.mang-ui-scope` declares the semantic CSS vars (`--m-*`); `[data-theme="dark"]` overrides
+ * them; `[data-theme="auto"]` follows the OS. Components then style themselves with `var(--m-*)`, so a
+ * single rule set serves both surfaces (AD v0.2 §9: dark shell · light mini-app interiors).
+ *
+ * All motion is transform/opacity + the Măng ease, disabled under `prefers-reduced-motion`.
+ * Canonical spec: `sot/Mang_UI_Component_Library_v0.1.md`.
+ */
+declare const KIT_STYLE_ID = "mang-ui-kit";
+/** Mount the shared kit stylesheet (refcounted; one `<style>` for the whole kit). */
+declare function useKitStyles(): void;
+
+/**
+ * Shared helpers every color-bearing `@mangtre/ui` component uses on its root element:
+ *  - `useKitStyles()` mounts the one shared sheet (re-exported for convenience),
+ *  - `useScope(theme)` returns the `class="mang-ui-scope" data-theme data-density` props that
+ *    establish the `--m-*` CSS vars for that subtree (resolving prop → ambient context),
+ *  - `cx(...)` joins class names (drops falsy).
+ */
+
+/**
+ * Mount the base kit sheet (the `.mang-ui-scope` `--m-*` vars + P0 component styles) PLUS an
+ * area-specific sheet under its own refcounted id. P1/P2 component groups call this so they get
+ * the shared theme vars without duplicating them, and their own CSS lives in a separate `<style>`.
+ */
+declare function useAreaStyles(id: string, css: string): void;
+/** Join class names; falsy entries are dropped. */
+declare function cx(...parts: Array<string | false | null | undefined>): string;
+interface ScopeProps {
+    className: string;
+    "data-theme": ThemeMode;
+    "data-density": string;
+}
+/**
+ * Root props that turn an element into a Măng UI scope: the `mang-ui-scope` class (declares the
+ * `--m-*` vars) + the resolved `data-theme`/`data-density`. Spread onto a component's root, then
+ * append the component class via `cx`.
+ */
+declare function useScope(theme?: ThemeMode): ScopeProps;
+
+export { KIT_STYLE_ID, type ScopeProps, ThemeMode, cx, useAreaStyles, useKitStyles, useScope, useScopedStyle };

package/dist/theme.js

@@ -0,0 +1,27 @@
+import {
+  KIT_STYLE_ID,
+  MangThemeProvider,
+  cx,
+  useAreaStyles,
+  useDensity,
+  useKitStyles,
+  useLocale,
+  useMangTheme,
+  useResolvedTheme,
+  useScope,
+  useScopedStyle
+} from "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  KIT_STYLE_ID,
+  MangThemeProvider,
+  cx,
+  useAreaStyles,
+  useDensity,
+  useKitStyles,
+  useLocale,
+  useMangTheme,
+  useResolvedTheme,
+  useScope,
+  useScopedStyle
+};

package/dist/tokens.css

@@ -0,0 +1,119 @@
+/*
+ * Măng design tokens as plain CSS custom properties — framework-agnostic, no Tailwind.
+ *
+ * This is the file a NON-Tailwind mini-app imports to "match Măng":
+ *   @import "@mangtre/ui/tokens.css";
+ *   .my-scope { color: var(--mang-content-default); border-radius: var(--mang-radius-lg); }
+ *
+ * MIRROR of packages/ui/src/tokens.ts — the TS object is the source of truth; this file is
+ * parity-checked against it by tokens.test.ts. Edit tokens.ts first, then update here.
+ */
+:root {
+  /* --- brand (7) --- */
+  --mang-color-mangGreen: #37b693;
+  --mang-color-shoot: #8fe3b8;
+  --mang-color-bamboo: #1f7a5c;
+  --mang-color-soil: #b5793a;
+  --mang-color-sun: #e8c547;
+  --mang-color-paper: #f4f1e8;
+  --mang-color-dark: #14201c;
+
+  /* --- semantic: surface --- */
+  --mang-surface-base: #ffffff;
+  --mang-surface-sunken: #f6faf9;
+  --mang-surface-inverse: #14201c;
+
+  /* --- semantic: content (text) --- */
+  --mang-content-default: #16242c;
+  --mang-content-strong: #14201c;
+  --mang-content-muted: #5d6f78;
+  --mang-content-inverse: #f4f1e8;
+  --mang-content-on-accent: #ffffff;
+
+  /* --- semantic: line (borders) --- */
+  --mang-line-subtle: #eef3f2;
+  --mang-line-default: #e4eceb;
+  --mang-line-strong: #cdd9d6;
+
+  /* --- semantic: accent --- */
+  --mang-accent-default: #37b693;
+  --mang-accent-hover: #2e9e80;
+  --mang-accent-soft: #e7f6f1;
+
+  /* --- semantic: state --- */
+  --mang-state-success: #1f9c7e;
+  --mang-state-success-soft: #e7f6f1;
+  --mang-state-danger: #d2674a;
+  --mang-state-danger-soft: #fbeee9;
+  --mang-state-warning: #c77d2e;
+  --mang-state-warning-soft: #fbf1e2;
+  --mang-state-info: #2e7cb8;
+  --mang-state-info-soft: #e6f0f8;
+
+  /* --- spacing --- */
+  --mang-space-0: 0;
+  --mang-space-1: 0.25rem;
+  --mang-space-2: 0.5rem;
+  --mang-space-3: 0.75rem;
+  --mang-space-4: 1rem;
+  --mang-space-5: 1.25rem;
+  --mang-space-6: 1.5rem;
+  --mang-space-8: 2rem;
+  --mang-space-10: 2.5rem;
+  --mang-space-12: 3rem;
+  --mang-space-16: 4rem;
+
+  /* --- radius --- */
+  --mang-radius-none: 0;
+  --mang-radius-sm: 0.5rem;
+  --mang-radius-md: 0.6875rem;
+  --mang-radius-lg: 1rem;
+  --mang-radius-xl: 1.375rem;
+  --mang-radius-full: 999px;
+
+  /* --- shadow --- */
+  --mang-shadow-sm: 0 1px 2px rgba(11, 30, 45, 0.05);
+  --mang-shadow-md: 0 1px 2px rgba(11, 30, 45, 0.05), 0 12px 28px -16px rgba(11, 30, 45, 0.28);
+  --mang-shadow-lg: 0 18px 40px -18px rgba(11, 30, 45, 0.32);
+
+  /* --- font sizes --- */
+  --mang-font-size-xs: 0.75rem;
+  --mang-font-size-sm: 0.85rem;
+  --mang-font-size-base: 1rem;
+  --mang-font-size-lg: 1.15rem;
+  --mang-font-size-xl: 1.35rem;
+  --mang-font-size-2xl: 1.6rem;
+  --mang-font-size-3xl: 2.1rem;
+
+  /* --- font weights --- */
+  --mang-font-weight-normal: 400;
+  --mang-font-weight-medium: 600;
+  --mang-font-weight-semibold: 700;
+  --mang-font-weight-bold: 800;
+
+  /* --- line heights --- */
+  --mang-leading-tight: 1.15;
+  --mang-leading-snug: 1.3;
+  --mang-leading-normal: 1.5;
+  --mang-leading-relaxed: 1.7;
+
+  /* --- motion --- */
+  --mang-duration-fast: 140ms;
+  --mang-duration-base: 180ms;
+  --mang-duration-slow: 240ms;
+  --mang-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+  --mang-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --mang-ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+  /* --- z-index --- */
+  --mang-z-base: 0;
+  --mang-z-dropdown: 100;
+  --mang-z-sticky: 200;
+  --mang-z-overlay: 900;
+  --mang-z-modal: 1000;
+  --mang-z-toast: 1100;
+
+  /* --- fonts (quoted — ready to drop into font-family) --- */
+  --mang-font-heading: "Quicksand Variable";
+  --mang-font-body: "Inter";
+}

package/dist/tokens.d.ts

@@ -0,0 +1,128 @@
+import { ThemeTokens } from '@mangtre/core';
+
+/** The full Măng design-token object. Single source of truth. */
+declare const tokens: {
+    readonly color: {
+        readonly mangGreen: "#37B693";
+        readonly shoot: "#8FE3B8";
+        readonly bamboo: "#1F7A5C";
+        readonly soil: "#B5793A";
+        readonly sun: "#E8C547";
+        readonly paper: "#F4F1E8";
+        readonly dark: "#14201C";
+    };
+    readonly font: {
+        readonly heading: "Quicksand Variable";
+        readonly body: "Inter";
+    };
+    readonly semantic: {
+        readonly surface: {
+            readonly base: "#FFFFFF";
+            readonly sunken: "#F6FAF9";
+            readonly inverse: "#14201C";
+        };
+        readonly content: {
+            readonly default: "#16242C";
+            readonly strong: "#14201C";
+            readonly muted: "#5D6F78";
+            readonly inverse: "#F4F1E8";
+            readonly onAccent: "#FFFFFF";
+        };
+        readonly line: {
+            readonly subtle: "#EEF3F2";
+            readonly default: "#E4ECEB";
+            readonly strong: "#CDD9D6";
+        };
+        readonly accent: {
+            readonly default: "#37B693";
+            readonly hover: "#2E9E80";
+            readonly soft: "#E7F6F1";
+        };
+        readonly state: {
+            readonly success: "#1F9C7E";
+            readonly successSoft: "#E7F6F1";
+            readonly danger: "#D2674A";
+            readonly dangerSoft: "#FBEEE9";
+            readonly warning: "#C77D2E";
+            readonly warningSoft: "#FBF1E2";
+            readonly info: "#2E7CB8";
+            readonly infoSoft: "#E6F0F8";
+        };
+    };
+    readonly space: {
+        readonly 0: "0";
+        readonly 1: "0.25rem";
+        readonly 2: "0.5rem";
+        readonly 3: "0.75rem";
+        readonly 4: "1rem";
+        readonly 5: "1.25rem";
+        readonly 6: "1.5rem";
+        readonly 8: "2rem";
+        readonly 10: "2.5rem";
+        readonly 12: "3rem";
+        readonly 16: "4rem";
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly sm: "0.5rem";
+        readonly md: "0.6875rem";
+        readonly lg: "1rem";
+        readonly xl: "1.375rem";
+        readonly full: "999px";
+    };
+    readonly shadow: {
+        readonly sm: "0 1px 2px rgba(11, 30, 45, 0.05)";
+        readonly md: "0 1px 2px rgba(11, 30, 45, 0.05), 0 12px 28px -16px rgba(11, 30, 45, 0.28)";
+        readonly lg: "0 18px 40px -18px rgba(11, 30, 45, 0.32)";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.85rem";
+        readonly base: "1rem";
+        readonly lg: "1.15rem";
+        readonly xl: "1.35rem";
+        readonly "2xl": "1.6rem";
+        readonly "3xl": "2.1rem";
+    };
+    readonly fontWeight: {
+        readonly normal: "400";
+        readonly medium: "600";
+        readonly semibold: "700";
+        readonly bold: "800";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.15";
+        readonly snug: "1.3";
+        readonly normal: "1.5";
+        readonly relaxed: "1.7";
+    };
+    readonly motion: {
+        readonly duration: {
+            readonly fast: "140ms";
+            readonly base: "180ms";
+            readonly slow: "240ms";
+        };
+        readonly ease: {
+            readonly standard: "cubic-bezier(0.16, 1, 0.3, 1)";
+            readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
+            readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+        };
+    };
+    readonly z: {
+        readonly base: "0";
+        readonly dropdown: "100";
+        readonly sticky: "200";
+        readonly overlay: "900";
+        readonly modal: "1000";
+        readonly toast: "1100";
+    };
+};
+type Tokens = typeof tokens;
+/**
+ * The runtime theme handed to mini-apps via `sdk.theme`. This is the brand subset only —
+ * the assignment below also structurally enforces that `color`/`font` match the locked
+ * `ThemeTokens` contract from `@mangtre/core`.
+ */
+declare const defaultTheme: ThemeTokens;
+
+export { type Tokens, defaultTheme, tokens };

package/dist/tokens.js

@@ -0,0 +1,8 @@
+import {
+  defaultTheme,
+  tokens
+} from "./chunk-PPOYMKV3.js";
+export {
+  defaultTheme,
+  tokens
+};