@mangtre/ui 0.1.0

package/dist/chunk-IVYXOKMO.js

@@ -0,0 +1,74 @@
+import {
+  Badge
+} from "./chunk-FZRXVRC7.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/privacy/Privacy.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-privacy";
+var { fontSize, radius } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-privacy { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.7rem 0.85rem; border-radius: ${radius.md}; background: var(--m-success-soft); color: var(--m-success-on); font-size: ${fontSize.sm}; }
+.mang-privacy[data-tone="warn"] { background: var(--m-warning-soft); color: var(--m-warning-on); }
+.mang-privacy-icon { flex: none; }
+`
+);
+function PrivacyNotice({ children, icon = "\u{1F512}", theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-privacy", className), role: "note", children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-privacy-icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { children })
+  ] });
+}
+function LocalFirstNotice({
+  locale = "vi",
+  theme,
+  className
+}) {
+  return /* @__PURE__ */ jsx(PrivacyNotice, { theme, className, children: locale === "vi" ? "Ch\u1EA1y offline \xB7 d\u1EEF li\u1EC7u ch\u1EC9 \u1EDF tr\xEAn m\xE1y b\u1EA1n" : "Runs offline \xB7 data stays on your device" });
+}
+function NoPiiBadge({ locale = "vi", theme, className }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: "success", icon: "\u{1F512}", theme, className, children: locale === "vi" ? "Kh\xF4ng thu th\u1EADp PII" : "No PII" });
+}
+function ExternalLinkWarning({
+  href,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-privacy", className),
+      "data-tone": "warn",
+      role: "note",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mang-privacy-icon", "aria-hidden": "true", children: "\u2197" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          locale === "vi" ? "M\u1EDF li\xEAn k\u1EBFt ngo\xE0i: " : "Opens an external link: ",
+          /* @__PURE__ */ jsx("b", { children: href })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  PrivacyNotice,
+  LocalFirstNotice,
+  NoPiiBadge,
+  ExternalLinkWarning
+};

package/dist/chunk-IX3DYETF.js

@@ -0,0 +1,61 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+
+// src/platform/Money.tsx
+import { jsx } from "react/jsx-runtime";
+function formatVnd(amount) {
+  const rounded = Math.round(amount);
+  const grouped = new Intl.NumberFormat("vi-VN").format(Math.abs(rounded));
+  return `${rounded < 0 ? "-" : ""}${grouped} \u0111`;
+}
+function signAttr(value, sign) {
+  if (sign === "none") return void 0;
+  if (sign === "positive") return "positive";
+  if (sign === "negative") return "negative";
+  if (value > 0) return "positive";
+  if (value < 0) return "negative";
+  return void 0;
+}
+function VndText({ amount, sign = "none", theme, className }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-money", className),
+      "data-sign": signAttr(amount, sign),
+      children: formatVnd(amount)
+    }
+  );
+}
+function MoneyText({
+  amount,
+  locale = "vi-VN",
+  currency = "VND",
+  sign = "none",
+  theme,
+  className
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const text = new Intl.NumberFormat(locale, { style: "currency", currency }).format(amount);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-money", className),
+      "data-sign": signAttr(amount, sign),
+      children: text
+    }
+  );
+}
+
+export {
+  formatVnd,
+  VndText,
+  MoneyText
+};

package/dist/chunk-JJB4PJC3.js

@@ -0,0 +1,166 @@
+import {
+  SafetyScanBadge,
+  StaticScanResult
+} from "./chunk-X7T2DJLU.js";
+import {
+  Badge
+} from "./chunk-FZRXVRC7.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/creator/Creator.tsx
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-creator";
+var { fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-drop { display: grid; gap: 0.4rem; justify-items: center; text-align: center; padding: 1.75rem 1.25rem; border: 2px dashed var(--m-line-strong); border-radius: ${radius.lg}; background: var(--m-sunken); color: var(--m-text-muted); cursor: pointer; transition: border-color 140ms, background 140ms; }
+.mang-drop[data-over="true"] { border-color: var(--m-accent); background: var(--m-accent-soft); }
+.mang-drop-icon { font-size: 1.8rem; }
+.mang-drop-title { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; color: var(--m-text-strong); font-size: ${fontSize.base}; }
+.mang-drop-file { font-size: ${fontSize.sm}; color: var(--m-text); }
+.mang-manifest { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border: 1px solid var(--m-line); border-radius: ${radius.lg}; background: var(--m-surface); }
+.mang-manifest-row { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; font-size: ${fontSize.sm}; }
+.mang-manifest-key { color: var(--m-text-muted); font-weight: ${fontWeight.semibold}; }
+.mang-manifest-val { color: var(--m-text); }
+.mang-manifest-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+.mang-scanpanel { display: grid; gap: 0.6rem; }
+`
+);
+function BundleUploadDropzone({
+  onFile,
+  accept = ".js,.mjs",
+  file,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const inputRef = useRef(null);
+  const [over, setOver] = useState(false);
+  const pick = (f) => {
+    if (f) onFile(f);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setOver(false);
+    pick(e.dataTransfer.files?.[0]);
+  };
+  const trigger = { role: "button", tabIndex: 0 };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...scope,
+      ...trigger,
+      className: cx(scope.className, "mang-drop", className),
+      "data-over": over ? "true" : void 0,
+      onClick: () => inputRef.current?.click(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        setOver(true);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mang-drop-icon", "aria-hidden": "true", children: "\u{1F4E6}" }),
+        /* @__PURE__ */ jsx("span", { className: "mang-drop-title", children: locale === "vi" ? "K\xE9o th\u1EA3 bundle ho\u1EB7c b\u1EA5m \u0111\u1EC3 ch\u1ECDn" : "Drop a bundle or click to choose" }),
+        file && /* @__PURE__ */ jsxs("span", { className: "mang-drop-file", children: [
+          file.name,
+          " \xB7 ",
+          (file.size / 1024).toFixed(0),
+          " KB"
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            hidden: true,
+            onChange: (e) => {
+              pick(e.target.files?.[0]);
+              e.target.value = "";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function ManifestPreview({ manifest, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const row = (k, v) => /* @__PURE__ */ jsxs("div", { className: "mang-manifest-row", children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-manifest-key", children: k }),
+    /* @__PURE__ */ jsx("span", { className: "mang-manifest-val", children: v })
+  ] });
+  const chips = (items) => items && items.length > 0 ? /* @__PURE__ */ jsx("span", { className: "mang-manifest-chips", children: items.map((it) => /* @__PURE__ */ jsx(Badge, { tone: "neutral", theme, children: it }, it)) }) : "\u2014";
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-manifest", className), children: [
+    row("id", /* @__PURE__ */ jsx("code", { children: manifest.id })),
+    manifest.name != null && row("name", manifest.name),
+    manifest.version != null && row("version", /* @__PURE__ */ jsx("code", { children: manifest.version })),
+    row("permissions", chips(manifest.permissions)),
+    row("surfaces", chips(manifest.surfaces)),
+    row("commands", chips(manifest.commands))
+  ] });
+}
+function StaticScanPanel({
+  level,
+  findings,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-scanpanel", className), children: [
+    /* @__PURE__ */ jsx(SafetyScanBadge, { level, locale, theme }),
+    /* @__PURE__ */ jsx(StaticScanResult, { findings, theme })
+  ] });
+}
+var REVIEW_META = {
+  draft: { tone: "neutral", icon: "\u{1F4DD}", vi: "Nh\xE1p", en: "Draft" },
+  pending_review: { tone: "info", icon: "\u23F3", vi: "Ch\u1EDD duy\u1EC7t", en: "Pending review" },
+  changes: { tone: "warning", icon: "\u270F\uFE0F", vi: "C\u1EA7n s\u1EEDa", en: "Changes requested" },
+  live: { tone: "success", icon: "\u{1F7E2}", vi: "\u0110ang ch\u1EA1y", en: "Live" },
+  rejected: { tone: "danger", icon: "\u26D4", vi: "T\u1EEB ch\u1ED1i", en: "Rejected" }
+};
+function ReviewStatusBadge({
+  status,
+  locale = "vi",
+  theme,
+  className
+}) {
+  const m = REVIEW_META[status];
+  return /* @__PURE__ */ jsx(Badge, { tone: m.tone, icon: m.icon, theme, className, children: locale === "vi" ? m.vi : m.en });
+}
+function VersionBadge({ version, theme, className }) {
+  return /* @__PURE__ */ jsxs(Badge, { tone: "neutral", theme, className, children: [
+    "v",
+    version.replace(/^v/, "")
+  ] });
+}
+function BuildBadge({ sha, theme, className }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: "neutral", icon: "\u{1F3D7}\uFE0F", theme, className, children: sha.slice(0, 7) });
+}
+
+export {
+  BundleUploadDropzone,
+  ManifestPreview,
+  StaticScanPanel,
+  ReviewStatusBadge,
+  VersionBadge,
+  BuildBadge
+};

package/dist/chunk-K5Q3RCV6.js

@@ -0,0 +1,119 @@
+import {
+  Badge
+} from "./chunk-FZRXVRC7.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/platform/StatusBadges.tsx
+import { jsx } from "react/jsx-runtime";
+var SURFACE_META = {
+  desktop: { icon: "\u{1F5A5}\uFE0F", vi: "M\xE1y t\xEDnh", en: "Desktop" },
+  web: { icon: "\u{1F310}", vi: "Web", en: "Web" },
+  zalo: { icon: "\u{1F4AC}", vi: "Zalo", en: "Zalo" }
+};
+function SurfaceBadge({ surface, locale = "vi", theme, className }) {
+  const m = SURFACE_META[surface];
+  return /* @__PURE__ */ jsx(Badge, { tone: "neutral", icon: m.icon, theme, className, children: locale === "vi" ? m.vi : m.en });
+}
+function PermissionBadge({ permission, sensitive, theme, className }) {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      tone: sensitive ? "warning" : "neutral",
+      icon: sensitive ? "\u{1F512}" : "\u{1F511}",
+      theme,
+      className,
+      children: permission
+    }
+  );
+}
+function LocalBadge({ locale = "vi", theme, className }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: "neutral", icon: "\u{1F4E6}", theme, className, children: locale === "vi" ? "Tr\xEAn m\xE1y" : "On-device" });
+}
+function CloudBadge({ locale = "vi", theme, className }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: "info", icon: "\u2601\uFE0F", theme, className, children: locale === "vi" ? "\u0110\xE1m m\xE2y" : "Cloud" });
+}
+function RealtimeBadge({ locale = "vi", theme, className }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: "success", icon: "\u26A1", theme, className, children: locale === "vi" ? "Tr\u1EF1c ti\u1EBFp" : "Live" });
+}
+
+// src/platform/Gates.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-gates";
+var { fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-degrade { display: grid; gap: 0.4rem; justify-items: center; text-align: center; padding: 1.25rem; border: 1px dashed var(--m-line-strong); border-radius: ${radius.lg}; background: var(--m-sunken); color: var(--m-text-muted); }
+.mang-degrade-icon { font-size: 1.6rem; }
+.mang-degrade-title { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; color: var(--m-text-strong); font-size: ${fontSize.base}; }
+.mang-degrade-body { font-size: ${fontSize.sm}; max-width: 28rem; }
+`
+);
+var SURFACE_LABEL = {
+  desktop: { vi: "m\xE1y t\xEDnh", en: "desktop" },
+  web: { vi: "web", en: "web" },
+  zalo: { vi: "Zalo", en: "Zalo" }
+};
+function GracefulDegradePanel({
+  icon = "\u{1F6A7}",
+  title,
+  children,
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-degrade", className), role: "note", children: [
+    /* @__PURE__ */ jsx2("span", { className: "mang-degrade-icon", "aria-hidden": "true", children: icon }),
+    title != null && /* @__PURE__ */ jsx2("span", { className: "mang-degrade-title", children: title }),
+    children != null && /* @__PURE__ */ jsx2("span", { className: "mang-degrade-body", children })
+  ] });
+}
+function SurfaceGate({
+  surfaces,
+  current,
+  locale = "vi",
+  fallback,
+  theme,
+  children
+}) {
+  const allowed = !surfaces || surfaces.length === 0 || surfaces.includes(current);
+  if (allowed) return /* @__PURE__ */ jsx2(Fragment, { children });
+  if (fallback !== void 0) return /* @__PURE__ */ jsx2(Fragment, { children: fallback });
+  const where = (surfaces ?? []).map((s) => SURFACE_LABEL[s][locale]).join(" / ");
+  return /* @__PURE__ */ jsx2(
+    GracefulDegradePanel,
+    {
+      theme,
+      title: locale === "vi" ? "Ch\u01B0a h\u1ED7 tr\u1EE3 \u1EDF \u0111\xE2y" : "Not available here",
+      children: locale === "vi" ? `T\xEDnh n\u0103ng n\xE0y ch\u1EA1y tr\xEAn ${where}.` : `This feature runs on ${where}.`
+    }
+  );
+}
+function PermissionGate({ granted, fallback = null, children }) {
+  return /* @__PURE__ */ jsx2(Fragment, { children: granted ? children : fallback });
+}
+var DesktopOnly = ({ current, children }) => current === "desktop" ? /* @__PURE__ */ jsx2(Fragment, { children }) : null;
+var WebOnly = ({ current, children }) => current === "web" ? /* @__PURE__ */ jsx2(Fragment, { children }) : null;
+var ZaloOnly = ({ current, children }) => current === "zalo" ? /* @__PURE__ */ jsx2(Fragment, { children }) : null;
+
+export {
+  SurfaceBadge,
+  PermissionBadge,
+  LocalBadge,
+  CloudBadge,
+  RealtimeBadge,
+  GracefulDegradePanel,
+  SurfaceGate,
+  PermissionGate,
+  DesktopOnly,
+  WebOnly,
+  ZaloOnly
+};

package/dist/chunk-LNRUPJDF.js

@@ -0,0 +1,161 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+
+// src/overlay/Dialog.tsx
+import { useId, useRef } from "react";
+
+// src/overlay/useOverlay.ts
+import { useEffect } from "react";
+var FOCUSABLE = 'a[href],button:not(:disabled),textarea:not(:disabled),input:not(:disabled),select:not(:disabled),[tabindex]:not([tabindex="-1"])';
+function useOverlay(open, onClose, ref) {
+  useEffect(() => {
+    if (!open) return;
+    const node = ref.current;
+    const prevActive = document.activeElement;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const focusables = node ? Array.from(node.querySelectorAll(FOCUSABLE)) : [];
+    (focusables[0] ?? node)?.focus();
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !node) return;
+      const items = Array.from(node.querySelectorAll(FOCUSABLE)).filter(
+        (el) => el.offsetParent !== null
+      );
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (!first || !last) {
+        e.preventDefault();
+        return;
+      }
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.body.style.overflow = prevOverflow;
+      prevActive?.focus?.();
+    };
+  }, [open, onClose, ref]);
+}
+
+// src/overlay/Dialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Dialog({
+  open,
+  onClose,
+  title,
+  footer,
+  dismissOnBackdrop = true,
+  theme,
+  className,
+  children
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const ref = useRef(null);
+  const titleId = useId();
+  useOverlay(open, onClose, ref);
+  if (!open) return null;
+  const panel = {
+    role: "dialog",
+    "aria-modal": true,
+    "aria-labelledby": title ? titleId : void 0
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mang-overlay-backdrop",
+      onMouseDown: (e) => {
+        if (dismissOnBackdrop && e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          ...scope,
+          ...panel,
+          tabIndex: -1,
+          className: cx(scope.className, "mang-dialog", className),
+          children: [
+            title != null && /* @__PURE__ */ jsx("div", { className: "mang-dialog-head", children: /* @__PURE__ */ jsx("h2", { className: "mang-dialog-title", id: titleId, children: title }) }),
+            /* @__PURE__ */ jsx("div", { className: "mang-dialog-body", children }),
+            footer != null && /* @__PURE__ */ jsx("div", { className: "mang-dialog-foot", children: footer })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/overlay/Sheet.tsx
+import { useId as useId2, useRef as useRef2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Sheet({
+  open,
+  onClose,
+  side = "right",
+  title,
+  footer,
+  dismissOnBackdrop = true,
+  theme,
+  className,
+  children
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const ref = useRef2(null);
+  const titleId = useId2();
+  useOverlay(open, onClose, ref);
+  if (!open) return null;
+  const panel = {
+    role: "dialog",
+    "aria-modal": true,
+    "aria-labelledby": title ? titleId : void 0
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "mang-overlay-backdrop",
+      "data-variant": "sheet",
+      onMouseDown: (e) => {
+        if (dismissOnBackdrop && e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          ref,
+          ...scope,
+          ...panel,
+          tabIndex: -1,
+          "data-side": side,
+          className: cx(scope.className, "mang-sheet", className),
+          children: [
+            title != null && /* @__PURE__ */ jsx2("div", { className: "mang-sheet-head", children: /* @__PURE__ */ jsx2("h2", { className: "mang-sheet-title", id: titleId, children: title }) }),
+            /* @__PURE__ */ jsx2("div", { className: "mang-sheet-body", style: { flex: 1, overflow: "auto" }, children }),
+            footer != null && /* @__PURE__ */ jsx2("div", { className: "mang-sheet-foot", children: footer })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  Dialog,
+  Sheet
+};