@mangtre/ui 0.1.0

package/LICENSE

@@ -0,0 +1,26 @@
+Măng — Proprietary License
+
+Copyright © 2026 RumitX. All rights reserved.
+
+This software and its source code (the "Software"), including the Măng shell,
+the @mangtre/* packages, and the bundled mini-apps in this repository, are the
+confidential and proprietary property of RumitX.
+
+No license, right, or permission is granted to any person to use, copy, modify,
+merge, publish, distribute, sublicense, sell, or create derivative works of the
+Software, in whole or in part, without the prior written consent of RumitX.
+
+Unauthorized copying, distribution, or use of the Software, via any medium, is
+strictly prohibited.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL RUMITX BE LIABLE
+FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: this proprietary notice protects the codebase during the early (NOW)
+horizon. When Măng opens to third-party creators, a separate license may be
+issued for the fork-able starter kit.
+
+For licensing inquiries: RumitX — https://rumitx.com

package/dist/MangThemeProvider-BqdGKBP2.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { Locale } from '@mangtre/core';
+
+/** Surface theme. `"auto"` follows the OS (`prefers-color-scheme`). */
+type ThemeMode = "light" | "dark" | "auto";
+/** Control density — affects padding/heights on inputs and buttons. */
+type Density = "comfortable" | "compact" | "touch";
+interface MangThemeContextValue {
+    theme: ThemeMode;
+    locale: Locale;
+    density: Density;
+}
+interface MangThemeProviderProps {
+    /** Surface theme for descendants. Default `"light"`. */
+    theme?: ThemeMode;
+    /** UI language for localized component labels. Default `"vi"`. */
+    locale?: Locale;
+    /** Control density. Default `"comfortable"`. */
+    density?: Density;
+    children: ReactNode;
+}
+/** Provides ambient theme/locale/density to `@mangtre/ui` components (context only, no DOM). */
+declare function MangThemeProvider({ theme, locale, density, children, }: MangThemeProviderProps): react.FunctionComponentElement<react.ProviderProps<MangThemeContextValue>>;
+/** The full ambient context (theme + locale + density). */
+declare function useMangTheme(): MangThemeContextValue;
+/** Resolve a component's effective theme: explicit prop wins, else the ambient context. */
+declare function useResolvedTheme(override?: ThemeMode): ThemeMode;
+/** Ambient UI language (for components with built-in labels). */
+declare function useLocale(): Locale;
+/** Ambient control density. */
+declare function useDensity(): Density;
+
+export { type Density as D, type MangThemeContextValue as M, type ThemeMode as T, MangThemeProvider as a, type MangThemeProviderProps as b, useLocale as c, useMangTheme as d, useResolvedTheme as e, useDensity as u };

package/dist/Money-Dw3GnUvX.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+
+/** Format an integer amount of VND with vi-VN grouping + the "đ" suffix (e.g. 1500000 → "1.500.000 đ"). */
+declare function formatVnd(amount: number): string;
+type Sign = "auto" | "none" | "positive" | "negative";
+interface VndTextProps {
+    amount: number;
+    /** Color by sign. `"auto"` colors +/- automatically; `"none"` keeps neutral. Default "none". */
+    sign?: Sign;
+    theme?: ThemeMode;
+    className?: string;
+}
+declare function VndText({ amount, sign, theme, className }: VndTextProps): react.JSX.Element;
+interface MoneyTextProps {
+    amount: number;
+    /** BCP-47 locale for grouping. Default "vi-VN". */
+    locale?: string;
+    /** ISO 4217 currency. Default "VND". */
+    currency?: string;
+    sign?: Sign;
+    theme?: ThemeMode;
+    className?: string;
+}
+declare function MoneyText({ amount, locale, currency, sign, theme, className, }: MoneyTextProps): react.JSX.Element;
+
+export { MoneyText as M, VndText as V, type MoneyTextProps as a, type VndTextProps as b, formatVnd as f };

package/dist/actions.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+import '@mangtre/core';
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Stretch to the full width of the container. */
+    block?: boolean;
+    /** Leading icon/emoji node. */
+    icon?: ReactNode;
+    theme?: ThemeMode;
+}
+declare function Button({ variant, size, block, icon, theme, className, children, type, ...rest }: ButtonProps): react.JSX.Element;
+interface IconButtonProps extends Omit<ButtonProps, "block" | "icon"> {
+    /** Accessible label (required — the button has no visible text). */
+    label: string;
+}
+/** Square, icon-only button. `label` is required for accessibility. */
+declare function IconButton({ label, size, variant, className, children, ...rest }: IconButtonProps): react.JSX.Element;
+interface ButtonGroupProps {
+    className?: string;
+    children?: ReactNode;
+}
+/** Inline row of buttons with consistent gap. */
+declare function ButtonGroup({ className, children }: ButtonGroupProps): react.JSX.Element;
+
+export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, IconButton, type IconButtonProps };

package/dist/actions.js

@@ -0,0 +1,13 @@
+import "./chunk-LZORNMBL.js";
+import {
+  Button,
+  ButtonGroup,
+  IconButton
+} from "./chunk-YN5O6YL6.js";
+import "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  Button,
+  ButtonGroup,
+  IconButton
+};

package/dist/ai.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AIPower, AICapability, Locale } from '@mangtre/core';
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+
+interface PowerPickerProps {
+    /** Powers to choose from — pass the ones runnable now (e.g. `ai.powers()` ∩ `status.capabilities`). */
+    powers: readonly AIPower[];
+    /** The currently selected capability tier (or null before a default is set). */
+    value: AICapability | null;
+    /** Called with the chosen tier. */
+    onChange: (capability: AICapability) => void;
+    /** UI language for the localized power labels/descriptions + the group label. */
+    locale: Locale;
+    /** Disable interaction (e.g. while generating). */
+    disabled?: boolean;
+    /**
+     * Surface theme. Default `"light"` (white/light cards). Use `"dark"` on a dark surface, or
+     * `"auto"` to follow the OS (`prefers-color-scheme`). The host picks this from ITS surface.
+     */
+    theme?: "light" | "dark" | "auto";
+}
+/** The canonical Măng power picker. Renders null when there's nothing to choose (< 2 powers). */
+declare function PowerPicker({ powers, value, onChange, locale, disabled, theme, }: PowerPickerProps): react.JSX.Element | null;
+
+interface AiStatusCardProps {
+    ready: boolean;
+    /** Optional status detail line. */
+    detail?: ReactNode;
+    locale?: Locale;
+    theme?: ThemeMode;
+    className?: string;
+}
+declare function AiStatusCard({ ready, detail, locale, theme, className, }: AiStatusCardProps): react.JSX.Element;
+interface AiModelOption {
+    id: string;
+    name: string;
+    /** e.g. size / speed hint. */
+    meta?: string;
+}
+interface AiSetupCardProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Recommended models to pull. */
+    models?: AiModelOption[];
+    /** Called to install the runtime (e.g. open Ollama download). */
+    onInstall?: () => void;
+    /** Called to download a model by id. */
+    onPull?: (id: string) => void;
+    /** Progress UI (e.g. a <Progress/>) shown under the models while pulling. */
+    progress?: ReactNode;
+    locale?: Locale;
+    theme?: ThemeMode;
+    className?: string;
+}
+declare function AiSetupCard({ title, description, models, onInstall, onPull, progress, locale, theme, className, }: AiSetupCardProps): react.JSX.Element;
+
+export { type AiModelOption, AiSetupCard, type AiSetupCardProps, AiStatusCard, type AiStatusCardProps, PowerPicker, type PowerPickerProps };

package/dist/ai.js

@@ -0,0 +1,13 @@
+import {
+  AiSetupCard,
+  AiStatusCard,
+  PowerPicker
+} from "./chunk-BCBN2EGH.js";
+import "./chunk-YN5O6YL6.js";
+import "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  AiSetupCard,
+  AiStatusCard,
+  PowerPicker
+};

package/dist/analytics.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { Locale } from '@mangtre/core';
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+
+interface Themed {
+    theme?: ThemeMode;
+    className?: string;
+}
+interface AnalyticsConsentToggleProps extends Themed {
+    /** True when analytics is ON (i.e. NOT opted out). */
+    enabled: boolean;
+    onChange: (enabled: boolean) => void;
+    locale?: Locale;
+}
+declare function AnalyticsConsentToggle({ enabled, onChange, locale, theme, className, }: AnalyticsConsentToggleProps): react.JSX.Element;
+interface GateMetBadgeProps extends Themed {
+    met: boolean;
+    locale?: Locale;
+}
+declare function GateMetBadge({ met, locale, theme, className }: GateMetBadgeProps): react.JSX.Element;
+interface GateReportRow {
+    app: string;
+    devices: number;
+    returning: number;
+}
+interface GateReportProps extends Themed {
+    rows: GateReportRow[];
+    locale?: Locale;
+}
+declare function GateReport({ rows, locale, theme, className }: GateReportProps): react.JSX.Element;
+interface EventLogRow {
+    name: string;
+    props?: Record<string, unknown>;
+}
+interface EventLogTableProps extends Themed {
+    events: EventLogRow[];
+}
+declare function EventLogTable({ events, theme, className }: EventLogTableProps): react.JSX.Element;
+
+export { AnalyticsConsentToggle, type AnalyticsConsentToggleProps, type EventLogRow, EventLogTable, type EventLogTableProps, GateMetBadge, type GateMetBadgeProps, GateReport, type GateReportProps, type GateReportRow };

package/dist/analytics.js

@@ -0,0 +1,15 @@
+import {
+  AnalyticsConsentToggle,
+  EventLogTable,
+  GateMetBadge,
+  GateReport
+} from "./chunk-ID233AGM.js";
+import "./chunk-PQGUWJG4.js";
+import "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  AnalyticsConsentToggle,
+  EventLogTable,
+  GateMetBadge,
+  GateReport
+};

package/dist/app.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { Locale, ThemeTokens } from '@mangtre/core';
+import { T as ThemeMode, D as Density } from './MangThemeProvider-BqdGKBP2.js';
+
+interface MangAppProps {
+    /** Interior surface theme. Default `"light"` (AD v0.2 §9). */
+    theme?: ThemeMode;
+    /** UI language for built-in component labels. Pass `sdk.locale`. Default `"vi"`. */
+    locale?: Locale;
+    /** Control density. Default `"comfortable"`. */
+    density?: Density;
+    /** Optional runtime accent thread (`sdk.theme`) → CSS vars on the root. */
+    sdkTheme?: ThemeTokens;
+    /** Mount a `ToastProvider` so `useToast()` works anywhere inside. Default `true`. */
+    withToasts?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+/** Theme/locale provider + a scoped root (+ optional toasts) — the mini-app interior wrapper. */
+declare function MangApp({ theme, locale, density, sdkTheme, withToasts, className, style, children, }: MangAppProps): react.JSX.Element;
+
+export { MangApp, type MangAppProps };

package/dist/app.js

@@ -0,0 +1,9 @@
+import {
+  MangApp
+} from "./chunk-7P2EQZYD.js";
+import "./chunk-DTASXPTB.js";
+import "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  MangApp
+};

package/dist/catalog.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The `@mangtre/ui` component **catalog** — the source-of-truth DATA describing every component:
+ * what it is, when to use it, a copy-paste snippet, and its key props. PURE DATA (no JSX) so it
+ * diffs cleanly, exports to JSON, and is editable without touching the guide page. The `?guide=1`
+ * Creator Guide renders FROM this; adding a component = appending one `CatalogEntry`.
+ *
+ * Governance + schema: `sot/Mang_UI_Catalog_v0.1.md`. Inventory + phasing: `Mang_UI_Component_Library_v0.1.md`.
+ */
+/** Localized text (Vietnamese-first; product docs are VN, code identifiers stay English). */
+interface L10n {
+    vi: string;
+    en: string;
+}
+/** Lifecycle of a catalogued component. */
+type CatalogStatus = "stable" | "beta" | "stub" | "deprecated";
+/** The phase a component shipped in (mirrors the library roadmap). */
+type CatalogPhase = "P0" | "P1" | "P2";
+/** The 24 component areas — one per `@mangtre/ui` subpath. */
+type CatalogArea = "theme" | "primitives" | "actions" | "forms" | "surface" | "navigation" | "overlay" | "feedback" | "platform" | "charts" | "ai" | "handoff" | "data-room" | "analytics" | "sandbox" | "creator" | "money" | "learning" | "layout" | "media" | "settings" | "privacy" | "editor" | "monetization";
+/** One documented prop (the guidance subset — not the exhaustive TS type). */
+interface CatalogProp {
+    name: string;
+    type: string;
+    required?: boolean;
+    default?: string;
+    desc: L10n;
+}
+/** A single catalogued component (or tight family rendered together). */
+interface CatalogEntry {
+    /** Unique id, `"<area>/<Name>"` (e.g. `"actions/Button"`). */
+    id: string;
+    area: CatalogArea;
+    /** Primary export name (or comma list for a family, e.g. `"Tabs, TabList, Tab, TabPanel"`). */
+    name: string;
+    /** Where to import from (e.g. `"@mangtre/ui"` or `"@mangtre/ui/charts"`). */
+    importPath: string;
+    status: CatalogStatus;
+    /** Phase it shipped in. */
+    since: CatalogPhase;
+    /** Per-entry semver — bump when the entry's API/guidance changes (versioning lever). */
+    version: string;
+    /** Text guidance: what it is + when to use it. */
+    summary: L10n;
+    /** Copy-paste usage snippet. */
+    code: string;
+    /** Key props worth documenting (not the full type). */
+    props?: CatalogProp[];
+    /** Related entry ids. */
+    related?: string[];
+}
+/** Ordered area metadata for the guide's table of contents. */
+interface CatalogAreaMeta {
+    id: CatalogArea;
+    title: L10n;
+    /** One-line description of the area. */
+    blurb: L10n;
+}
+
+/**
+ * `@mangtre/ui/catalog` — the component catalog (source-of-truth DATA). The `?guide=1` Creator Guide
+ * renders from `CATALOG`; adding a component = appending one `CatalogEntry` in `areas/*`.
+ * Schema + governance: `sot/Mang_UI_Catalog_v0.1.md`.
+ */
+
+/** Catalog data version — bump on any structural/entry change (the versioning lever). */
+declare const CATALOG_VERSION = "0.1.0";
+/** Every catalogued component, in area order. */
+declare const CATALOG: CatalogEntry[];
+/** Ordered area metadata — drives the guide's table of contents. */
+declare const AREAS: CatalogAreaMeta[];
+/** Entries for one area, preserving declared order. */
+declare function entriesByArea(area: CatalogArea): CatalogEntry[];
+/** Look up a single entry by id. */
+declare function getEntry(id: string): CatalogEntry | undefined;
+
+export { AREAS, CATALOG, CATALOG_VERSION, type CatalogArea, type CatalogAreaMeta, type CatalogEntry, type CatalogPhase, type CatalogProp, type CatalogStatus, type L10n, entriesByArea, getEntry };