velloo 0.4.1 → 0.6.0

package/pkgs/provider-antd/src/registry.ts

@@ -36,6 +36,7 @@ import {
 import { Drawer, Dropdown, Modal, Popover, Tooltip } from "./overlays.ts";
 
 const REUSED_HELPER_IDS = [
+  "Box",
   "Icon",
   "Image",
   "Placeholder",
@@ -49,8 +50,9 @@ const REUSED_HELPER_IDS = [
  * The runtime registry for antd-native folders: design `$ref` ids → real antd
  * components, SSR'd in-process via the adapter's cssinjs render pass. Dotted
  * antd subcomponents get manifest-friendly flat ids (`Typography.Title` ⇒
- * `TypographyTitle`, `List.Item` ⇒ `ListItem`) — the MCP intro tells the agent
- * how those destructure in emitted code. The overlay surface
+ * `TypographyTitle`, `List.Item` ⇒ `ListItem`) because neither a manifest id nor
+ * a `$ref` can carry a dot; the manifest records the dotted export as
+ * `nativeExport`, so emitted code names it directly. The overlay surface
  * (Modal/Drawer/Popover/Tooltip/Dropdown) is canvas-safe-wrapped in
  * `overlays.ts` — antd's own overlays portal and render NOTHING in SSR, so the
  * shims render them open + inline instead.
@@ -97,8 +99,9 @@ export const registry: ComponentRegistry = {
   TypographyText: Typography.Text,
   TypographyTitle: Typography.Title,
   // Framework-neutral velloo helpers antd has no equivalent for — chiefly
-  // `Icon` (lucide; @ant-design/icons isn't surfaced) + imagery/composition
-  // helpers. Reused verbatim from `@velloo/helpers`, like provider-mui. They
-  // size via props (`Icon size`), not Tailwind — the JIT is off on an antd folder.
+  // `Icon` (lucide; @ant-design/icons isn't surfaced), `Box` (the plain element
+  // compose lowers `<div>` and stray text to) + imagery/composition helpers.
+  // Reused verbatim from `@velloo/helpers`, like provider-mui. They size via
+  // props (`Icon size`), not Tailwind — the JIT is off on an antd folder.
   ...helpersRegistry(REUSED_HELPER_IDS),
 };

package/pkgs/provider-antd/src/render-pass.ts

@@ -2,8 +2,9 @@ import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
 import type { RenderPass } from "@velloo/provider";
 import type { Theme as VellooTheme } from "@velloo/schema";
 import { ConfigProvider } from "antd";
+import antdResetCss from "antd/dist/reset.css" with { type: "text" };
 import { createElement } from "react";
-import { antdThemeConfig } from "./theme.ts";
+import { antdDocumentCss, antdThemeConfig } from "./theme.ts";
 
 /**
  * A fresh cssinjs + antd render pass for one SSR. `wrap` nests the tree under
@@ -11,8 +12,12 @@ import { antdThemeConfig } from "./theme.ts";
  * projected velloo tokens (with `cssVar: true`, so `--ant-*` variables reach
  * inline styles); `css()` extracts the style rules the render registered in
  * the cache. The renderer injects that CSS into a `data-velloo-adapter`
- * <style>. Unlike emotion, cssinjs extraction reads the cache directly — the
- * rendered HTML isn't needed.
+ * <style>, led by antd's own `reset.css` — the global sheet every antd app
+ * imports, which makes boxes border-box and zeroes body and heading margins,
+ * so a sized container measures what it does in the app — and the document
+ * baseline (`antdDocumentCss`) that gives plain elements the theme's type
+ * and color. Unlike emotion, cssinjs extraction
+ * reads the cache directly — the rendered HTML isn't needed.
  *
  * SSR works in-process because antd is a velloo dependency, so it links the
  * shared monorepo React — no dual-React hazard.
@@ -29,7 +34,8 @@ export function makeRenderPass(theme: VellooTheme, dark = false): RenderPass {
       ),
     // `plain: true` returns bare CSS text; strip <style> wrappers defensively
     // anyway — the RenderPass contract returns CSS, not markup.
-    css: () => stripStyleTags(extractStyle(cache, { plain: true })),
+    css: () =>
+      `${antdResetCss}\n${antdDocumentCss(theme, dark)}\n${stripStyleTags(extractStyle(cache, { plain: true }))}`,
   };
 }
 

package/pkgs/provider-antd/src/reset-css.d.ts

@@ -0,0 +1,5 @@
+/** antd's global reset, imported as text so the render pass can inline it. */
+declare module "antd/dist/reset.css" {
+  const css: string;
+  export default css;
+}

package/pkgs/provider-antd/src/theme.ts

@@ -3,6 +3,8 @@ import {
   type ColorPair,
   DEFAULT_TYPESET_NAME,
   resolveColors,
+  sanitizeCssTokenValue,
+  TYPESET_DEFAULT,
   typesetScale,
   type Theme as VellooTheme,
 } from "@velloo/schema";
@@ -18,7 +20,9 @@ import { formatRgb, parse } from "culori";
  * theme stays hex (and round-trips identically in codegen).
  */
 function antdColor(css: string): string {
-  const s = css.trim();
+  // Theme strings are free text from the design JSON and end up inside
+  // cssinjs rules, so nothing that could close a declaration gets through.
+  const s = sanitizeCssTokenValue(css);
   if (/^(#|rgb|hsl)/i.test(s)) return s;
   return formatRgb(parse(s)) ?? s;
 }
@@ -74,17 +78,27 @@ function antdTokens(theme: VellooTheme, dark: boolean): NonNullable<ThemeConfig[
  * antd has only five heading tokens (h1–h5), so the velloo `h6` rung has no
  * antd equivalent and is intentionally dropped here; `Prose` regions still get
  * it from the typeset CSS.
+ *
+ * Line heights are left to antd unless the typeset chose its own leading.
+ * antd derives each one from its font size (14px reads 1.5714), and an antd
+ * app that sets only sizes gets those; velloo's default leading is a
+ * long-form reading rhythm, not something the app asked for, so projecting
+ * it would put every component on a rhythm the app does not have. A leading
+ * the user changed is a decision, and it reaches every antd line height.
  */
 function antdTypography(theme: VellooTheme): NonNullable<ThemeConfig["token"]> {
   const typography = theme.typography;
-  const scale = typesetScale(typography.typesets?.[DEFAULT_TYPESET_NAME], {
+  const typeset = typography.typesets?.[DEFAULT_TYPESET_NAME];
+  const scale = typesetScale(typeset, {
     ...(typography.fontFamily ? { fontFamily: typography.fontFamily } : {}),
   });
+  const ownLeading = typeset?.leading !== undefined && typeset.leading !== TYPESET_DEFAULT.leading;
   return {
-    fontFamily:
+    fontFamily: sanitizeCssTokenValue(
       scale.body.fontFamily ??
-      typography.fontFamily?.sans ??
-      "system-ui, -apple-system, sans-serif",
+        typography.fontFamily?.sans ??
+        "system-ui, -apple-system, sans-serif",
+    ),
     fontSize: scale.body.fontSize,
     fontSizeSM: scale.caption.fontSize,
     fontSizeLG: scale.lead.fontSize,
@@ -93,12 +107,16 @@ function antdTypography(theme: VellooTheme): NonNullable<ThemeConfig["token"]> {
     fontSizeHeading3: scale.h3.fontSize,
     fontSizeHeading4: scale.h4.fontSize,
     fontSizeHeading5: scale.h5.fontSize,
-    lineHeight: scale.body.lineHeight,
-    lineHeightHeading1: scale.h1.lineHeight,
-    lineHeightHeading2: scale.h2.lineHeight,
-    lineHeightHeading3: scale.h3.lineHeight,
-    lineHeightHeading4: scale.h4.lineHeight,
-    lineHeightHeading5: scale.h5.lineHeight,
+    ...(ownLeading
+      ? {
+          lineHeight: scale.body.lineHeight,
+          lineHeightHeading1: scale.h1.lineHeight,
+          lineHeightHeading2: scale.h2.lineHeight,
+          lineHeightHeading3: scale.h3.lineHeight,
+          lineHeightHeading4: scale.h4.lineHeight,
+          lineHeightHeading5: scale.h5.lineHeight,
+        }
+      : {}),
   };
 }
 
@@ -116,6 +134,31 @@ export function antdThemeConfig(theme: VellooTheme, dark = false): ThemeConfig {
   };
 }
 
+/**
+ * The document rules an antd frame renders on, after antd's own `reset.css`
+ * (which a real antd app imports, and which sets box-sizing and margins but
+ * no type or color). antd v5 styles only its own components, so a plain
+ * element — a `Box`, a `Flex` container's own text — inherits from `<body>`,
+ * and the `style` channel skips the JIT that gives other providers a themed
+ * body. So `<body>` takes antd's resolved tokens for this theme, the values
+ * its components read, and the text between antd components matches them.
+ * The seed tokens are already sanitized, so they interpolate as-is.
+ */
+export function antdDocumentCss(theme: VellooTheme, dark = false): string {
+  const token = antdTheme.getDesignToken(antdThemeConfig(theme, dark));
+  return (
+    "html,body{" +
+    [
+      `background-color:${token.colorBgBase}`,
+      `color:${token.colorTextBase}`,
+      `font-family:${token.fontFamily}`,
+      `font-size:${token.fontSize}px`,
+      `line-height:${token.lineHeight}`,
+    ].join(";") +
+    "}"
+  );
+}
+
 /**
  * The codegen projection (`themeToNative`): the same token mapping, but the
  * algorithm emits as a bare identifier (`antdTheme.darkAlgorithm`) that the

package/pkgs/provider-chakra/src/manifest.ts

@@ -96,7 +96,11 @@ function helper(
 
 export const CHAKRA_MANIFEST: Manifest = [
   // --- layout ---
-  ui("Box", [children], "Generic layout primitive; style via sx."),
+  ui(
+    "Box",
+    [children, str("as")],
+    'Generic layout primitive; style via sx. `as` renders another HTML tag ("span", "section").',
+  ),
   ui(
     "Flex",
     [children, json("gap", "number | string"), str("align"), str("justify"), str("direction")],

package/pkgs/provider-html/src/index.ts

@@ -0,0 +1,68 @@
+import {
+  type ComponentDescriptor,
+  type FrameworkAdapter,
+  type Manifest,
+  STYLE_PROP,
+} from "@velloo/provider";
+import { componentsDir, entryCssPath, NONE_MANIFEST } from "@velloo/provider-none";
+import { registry } from "./registry.ts";
+import { HTML_VERSION } from "./version.ts";
+
+export { Html, isSafeTag, safeAttributeValue } from "./registry.ts";
+
+const htmlDescriptors: ComponentDescriptor[] = [
+  {
+    id: "Html",
+    category: "ui",
+    source: "velloo",
+    group: "layout",
+    family: "Html",
+    allowUnknownProps: true,
+    designModeNotes:
+      "Use for a native HTML element. Set as to a semantic tag and pass ordinary HTML or hx-* attributes as props.",
+    props: [
+      { name: "as", type: "string", optional: true, control: "string", defaultValue: "div" },
+      { name: "className", type: "string", optional: true, control: "string" },
+      { name: "style", type: "CSSProperties", optional: true, control: "string" },
+      { name: "children", type: "ReactNode", optional: true, control: "string" },
+    ],
+  },
+];
+
+const HTML_MANIFEST: Manifest = [...NONE_MANIFEST, ...htmlDescriptors];
+
+const HTML_INTRO = [
+  "**This is a server-rendered HTML/htmx app.** Compose semantic HTML with `Html` nodes (`as=\"form\"`, …), styled by the app's own CSS classes or inline `style` — there is no Tailwind; new classes need CSS authored in the app. Give forms and controls the real `hx-*` attributes: the canvas never fires them, and `emit_code` keeps them in the native HTML it returns for the app's templates.",
+  "",
+  "A design never contacts the running app: it is styled by copies of the app's stylesheets, which `store_host_files` refreshes from source or from a capture (including built CSS a `screenshot` reports missing). Reference the app's files by their real paths (`src=\"/static/logo.png\"`), not as Velloo assets. Theme tokens are CSS variables (`var(--color-primary)`); `emit_theme` writes the stylesheet that defines them.",
+  "",
+  "To reproduce a page, capture it from the running app with `start_capture_session` (the user signs in if needed), rebuild it from `get_capture` with the content written into the nodes, and verify with `compare_to_url { captureId }`.",
+  "",
+  "On a form, a custom `hx-trigger` replaces htmx's default submit trigger — include `submit` when a submit button must swap a response instead of navigating.",
+  "",
+];
+
+/**
+ * The HTML/htmx adapter: the no-library primitives and helpers on the inline
+ * `style` channel, plus `Html`, styled by the app's own stylesheets. No browser
+ * component bundle — the server render is the page — and emission is native
+ * HTML, not JSX.
+ */
+export function createProvider(): FrameworkAdapter {
+  return {
+    id: "html",
+    version: HTML_VERSION,
+    label: "HTML + htmx",
+    componentsDir,
+    styleEntryPath: entryCssPath,
+    registry,
+    loadManifest: async () => HTML_MANIFEST,
+    styleChannel: STYLE_PROP,
+    styleChannels: ["style"],
+    registryForChannel: () => registry,
+    mcpIntro: () => HTML_INTRO,
+    hostStylesheets: true,
+    codegenFormat: "html",
+    elementComponent: "Html",
+  };
+}

package/pkgs/provider-html/src/registry.ts

@@ -0,0 +1,121 @@
+/**
+ * The HTML/htmx components and their sanitizer, free of Node APIs: the canvas
+ * renders them server-side, and the cloud share viewer imports this module in
+ * the browser to render a published HTML design. A published tree is
+ * untrusted input there, so every guarantee below holds at render time, not
+ * only when a design is written.
+ */
+import type { ComponentRegistry } from "@velloo/provider";
+import { inlineRegistry } from "@velloo/provider-none/registry-inline";
+import { styleObjectFromCss } from "@velloo/schema";
+import { createElement, type HTMLAttributes, type ReactNode } from "react";
+
+// Keep executable/embedded tags out of editable designs while accepting the
+// ordinary semantic elements and static SVG shapes found in native templates.
+const SAFE_TAG =
+  /^(?:a|abbr|address|article|aside|b|bdi|bdo|blockquote|br|button|caption|circle|cite|clipPath|code|col|colgroup|data|dd|defs|del|details|dfn|div|dl|dt|ellipse|em|fieldset|figcaption|figure|footer|form|g|h[1-6]|header|hr|i|img|input|ins|kbd|label|legend|li|line|linearGradient|main|mark|mask|meter|nav|ol|optgroup|option|output|p|path|picture|polygon|polyline|pre|progress|q|radialGradient|rect|s|samp|section|select|small|source|span|stop|strong|sub|summary|sup|svg|table|tbody|td|text|textarea|tfoot|th|thead|time|tr|tspan|u|ul|var|wbr)$/;
+
+/** Attributes whose value the browser loads or navigates to. */
+const URL_ATTRIBUTES = new Set([
+  "href",
+  "src",
+  "action",
+  "formaction",
+  "poster",
+  "cite",
+  "xlinkhref",
+  "xlink:href",
+]);
+// Browsers ignore ASCII whitespace and control characters inside a scheme, so
+// `java\tscript:` must be caught too.
+const SCRIPT_URL = /^(?:javascript|vbscript):|^data:text\/html/i;
+
+const withoutControls = (value: string): string =>
+  [...value].filter((char) => char.charCodeAt(0) > 0x20).join("");
+
+/**
+ * HTML attribute names an agent writing markup reaches for, as the React props
+ * that render them — React renders `autocomplete` too, but warns on every
+ * render and drops `class`'s meaning for its own `className` handling.
+ */
+const REACT_PROP: Record<string, string> = {
+  class: "className",
+  for: "htmlFor",
+  autocomplete: "autoComplete",
+  autofocus: "autoFocus",
+  tabindex: "tabIndex",
+  readonly: "readOnly",
+  maxlength: "maxLength",
+  minlength: "minLength",
+  colspan: "colSpan",
+  rowspan: "rowSpan",
+  enctype: "encType",
+  novalidate: "noValidate",
+  datetime: "dateTime",
+  srcset: "srcSet",
+  crossorigin: "crossOrigin",
+  accesskey: "accessKey",
+  contenteditable: "contentEditable",
+  spellcheck: "spellCheck",
+  formaction: "formAction",
+  formmethod: "formMethod",
+  inputmode: "inputMode",
+  referrerpolicy: "referrerPolicy",
+};
+
+type HtmlProps = HTMLAttributes<HTMLElement> & {
+  as?: string;
+  children?: ReactNode;
+  [key: string]: unknown;
+};
+
+/** Whether `Html` renders this tag: semantic HTML and static SVG, nothing that runs or embeds. */
+export function isSafeTag(tag: string): boolean {
+  return SAFE_TAG.test(tag);
+}
+
+/**
+ * Whether an attribute may carry this value: never an event handler or raw
+ * inner HTML, and never a URL that runs script.
+ */
+export function safeAttributeValue(name: string, value: unknown): boolean {
+  const key = name.toLowerCase();
+  if (key.startsWith("on") || key === "dangerouslysetinnerhtml") return false;
+  if (URL_ATTRIBUTES.has(key) && typeof value === "string") {
+    return !SCRIPT_URL.test(withoutControls(value));
+  }
+  return true;
+}
+
+function safeTag(component: string, as: string): string {
+  if (!SAFE_TAG.test(as))
+    throw new Error(`${component}: unsupported HTML tag ${JSON.stringify(as)}`);
+  return as;
+}
+
+/**
+ * Props a design may put on a native element: never event handlers, raw inner
+ * HTML, or a URL that runs script — the canvas executes the document, so an
+ * attribute is as dangerous as a `<script>` tag.
+ */
+function nativeAttributes(props: Record<string, unknown>): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(props)
+      .map(([name, value]) => [REACT_PROP[name] ?? name, value] as const)
+      .filter(([name, value]) => safeAttributeValue(name, value))
+      .flatMap(([name, value]) => {
+        // HTML's own `style="…"` (a snapshot of server output, or a design
+        // written as markup) is text; React only takes an object.
+        if (name !== "style" || typeof value !== "string") return [[name, value] as const];
+        const style = styleObjectFromCss(value);
+        return style ? [[name, style] as const] : [];
+      }),
+  );
+}
+
+export function Html({ as = "div", children, ...props }: HtmlProps) {
+  return createElement(safeTag("Html", as), nativeAttributes(props), children);
+}
+
+/** The inline-style primitives and helpers, plus the native HTML components. */
+export const registry: ComponentRegistry = { ...inlineRegistry, Html };

package/pkgs/provider-html/src/version.ts

@@ -0,0 +1 @@
+export const HTML_VERSION = "1";

package/pkgs/provider-mui/src/index.ts

@@ -82,8 +82,10 @@ export function createProvider(): FrameworkAdapter {
                       {
                         importPath: path,
                         exportName: id,
-                        fidelity: "fallback" as const,
-                        note: "Velloo helper used alongside the host framework.",
+                        // A helper is Velloo's own component, not a stand-in
+                        // for an MUI one: this file is its real render.
+                        fidelity: "exact" as const,
+                        note: "Velloo helper, mounted beside the host framework's components.",
                       },
                     ],
                   },

package/pkgs/provider-mui/src/manifest.ts

@@ -70,7 +70,16 @@ function helper(
 }
 
 export const MUI_MANIFEST: Manifest = [
-  ui("Box", [children], "Generic layout primitive; style via sx."),
+  ui(
+    "Box",
+    [
+      children,
+      // Compose writes `<span>` as `as="span"` on every library's element; MUI
+      // types and documents the override as `component`, so it emits as that.
+      { name: "as", type: "string", optional: true, control: "string", nativeName: "component" },
+    ],
+    'Generic layout primitive; style via sx. `as` renders another HTML tag ("span", "section") and emits as MUI\'s `component`.',
+  ),
   ui(
     "Stack",
     [children, enumProp("direction", ["row", "column"], "column")],

package/pkgs/provider-mui/src/render-pass.ts

@@ -1,6 +1,7 @@
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import createEmotionServer from "@emotion/server/create-instance";
+import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
 import type { RenderPass } from "@velloo/provider";
 import type { Theme as VellooTheme } from "@velloo/schema";
@@ -13,6 +14,14 @@ import { muiThemeFrom } from "./theme.ts";
  * tokens; `css(html)` extracts exactly the emotion rules the rendered markup
  * uses. The renderer injects that CSS into a `data-velloo-adapter` <style>.
  *
+ * The tree renders beside a `CssBaseline`, as a real MUI app's root does: MUI
+ * styles only its own components, and the style channel skips the Tailwind
+ * JIT, so without it a plain element inherits a bare `<body>` (Times, 16px,
+ * black, an 8px margin). The baseline puts the theme's body1 type, text color
+ * and background on the body, from the same theme the components get, and
+ * `enableColorScheme` gives a dark frame dark native controls. Its rules are
+ * emotion globals, which `extractCriticalToChunks` always keeps.
+ *
  * SSR works in-process because @mui/material is a velloo dependency, so it links
  * the shared monorepo React — no dual-React hazard.
  */
@@ -25,7 +34,12 @@ export function makeRenderPass(theme: VellooTheme, dark = false): RenderPass {
       createElement(
         CacheProvider,
         { value: cache },
-        createElement(ThemeProvider, { theme: muiTheme }, element),
+        createElement(
+          ThemeProvider,
+          { theme: muiTheme },
+          createElement(CssBaseline, { enableColorScheme: true }),
+          element,
+        ),
       ),
     css: (html) =>
       server

package/pkgs/provider-mui/src/theme.ts

@@ -3,6 +3,7 @@ import {
   type ColorPair,
   DEFAULT_TYPESET_NAME,
   resolveColors,
+  sanitizeCssTokenValue,
   typesetScale,
   type Theme as VellooTheme,
 } from "@velloo/schema";
@@ -16,7 +17,9 @@ import { formatRgb, parse } from "culori";
  * theme stays hex (and round-trips identically in codegen).
  */
 function muiColor(css: string): string {
-  const s = css.trim();
+  // Theme strings are free text from the design JSON and end up inside
+  // emotion rules, so nothing that could close a declaration gets through.
+  const s = sanitizeCssTokenValue(css);
   if (/^(#|rgb|hsl)/i.test(s)) return s;
   return formatRgb(parse(s)) ?? s;
 }
@@ -90,15 +93,18 @@ function muiTypography(theme: VellooTheme): NonNullable<ThemeOptions["typography
     ...(typography.fontFamily ? { fontFamily: typography.fontFamily } : {}),
   });
   // The body face, falling back to the `sans` role then the system stack.
-  const bodyFamily =
-    scale.body.fontFamily ?? typography.fontFamily?.sans ?? "system-ui, -apple-system, sans-serif";
+  const bodyFamily = sanitizeCssTokenValue(
+    scale.body.fontFamily ?? typography.fontFamily?.sans ?? "system-ui, -apple-system, sans-serif",
+  );
 
   const variant = (role: keyof typeof scale) => {
     const r = scale[role];
     return {
       // Only override the family when the typeset names a *different* face for
       // this role; otherwise inherit the theme's own fontFamily.
-      ...(r.fontFamily && r.fontFamily !== bodyFamily ? { fontFamily: r.fontFamily } : {}),
+      ...(r.fontFamily && sanitizeCssTokenValue(r.fontFamily) !== bodyFamily
+        ? { fontFamily: sanitizeCssTokenValue(r.fontFamily) }
+        : {}),
       fontSize: `${r.fontSize}px`,
       lineHeight: r.lineHeight,
       letterSpacing: r.letterSpacing,

package/pkgs/provider-none/src/components-inline.tsx

@@ -1,6 +1,12 @@
 import { headingInlineStyle, textInlineStyle } from "@velloo/schema/typeset";
 import * as React from "react";
-import type { ButtonProps, ContainerProps, InputProps, StackProps } from "./components.tsx";
+import {
+  BOX_TAG,
+  type ButtonProps,
+  type ContainerProps,
+  type InputProps,
+  type StackProps,
+} from "./components.tsx";
 
 /**
  * Inline-styled variants of the no-library primitives, for a `none`-CSS folder
@@ -28,8 +34,11 @@ function merge(
 /** Tailwind's spacing scale is 0.25rem per step (gap-4 ⇒ 1rem). */
 const space = (n: number) => `${n * 0.25}rem`;
 
-export const Box = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ style, ...rest }, ref) => <div ref={ref} style={style} {...rest} />,
+export const Box = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { as?: string }
+>(({ as, ...rest }, ref) =>
+  React.createElement(typeof as === "string" && BOX_TAG.test(as) ? as : "div", { ref, ...rest }),
 );
 Box.displayName = "Box";
 

package/pkgs/provider-none/src/components.tsx

@@ -1,3 +1,12 @@
+import {
+  BUTTON_BASE_CLASS,
+  BUTTON_VARIANT_CLASS,
+  CARD_CLASS,
+  CONTAINER_WIDTH_CLASS,
+  INPUT_CLASS,
+  STACK_ALIGN_CLASS,
+  STACK_JUSTIFY_CLASS,
+} from "@velloo/helpers";
 import { clsx } from "clsx";
 import * as React from "react";
 
@@ -14,9 +23,17 @@ import * as React from "react";
 
 interface DivProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-export const Box = React.forwardRef<HTMLDivElement, DivProps>(({ className, ...rest }, ref) => (
-  <div ref={ref} className={clsx(className)} {...rest} />
-));
+/** `as` takes a lowercase HTML tag only — anything else renders the div. */
+export const BOX_TAG = /^[a-z][a-z0-9]*$/;
+
+export const Box = React.forwardRef<HTMLDivElement, DivProps & { as?: string }>(
+  ({ as, className, ...rest }, ref) =>
+    React.createElement(typeof as === "string" && BOX_TAG.test(as) ? as : "div", {
+      ref,
+      className: clsx(className),
+      ...rest,
+    }),
+);
 Box.displayName = "Box";
 
 export interface StackProps extends DivProps {
@@ -30,20 +47,6 @@ export interface StackProps extends DivProps {
   justify?: "start" | "center" | "end" | "between" | "around";
 }
 
-const alignClass: Record<NonNullable<StackProps["align"]>, string> = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-};
-const justifyClass: Record<NonNullable<StackProps["justify"]>, string> = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-};
-
 export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
   ({ direction = "col", gap = 4, align, justify, className, ...rest }, ref) => (
     <div
@@ -52,8 +55,8 @@ export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
         "flex",
         direction === "row" ? "flex-row" : "flex-col",
         `gap-${gap}`,
-        align ? alignClass[align] : undefined,
-        justify ? justifyClass[justify] : undefined,
+        align ? STACK_ALIGN_CLASS[align] : undefined,
+        justify ? STACK_JUSTIFY_CLASS[justify] : undefined,
         className,
       )}
       {...rest}
@@ -67,19 +70,11 @@ export interface ContainerProps extends DivProps {
   size?: "sm" | "md" | "lg" | "xl" | "full";
 }
 
-const containerWidth: Record<NonNullable<ContainerProps["size"]>, string> = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-screen-xl",
-  full: "max-w-full",
-};
-
 export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
   ({ size = "md", className, ...rest }, ref) => (
     <div
       ref={ref}
-      className={clsx("mx-auto w-full px-4", containerWidth[size], className)}
+      className={clsx("mx-auto w-full px-4", CONTAINER_WIDTH_CLASS[size], className)}
       {...rest}
     />
   ),
@@ -90,23 +85,12 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   variant?: "default" | "ghost" | "outline";
 }
 
-const buttonVariant: Record<NonNullable<ButtonProps["variant"]>, string> = {
-  default: "bg-foreground text-background hover:bg-foreground/90",
-  ghost: "bg-transparent text-foreground hover:bg-muted",
-  outline: "bg-transparent text-foreground border border-border hover:bg-muted",
-};
-
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = "default", className, type, ...rest }, ref) => (
     <button
       ref={ref}
       type={type ?? "button"}
-      className={clsx(
-        "inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
-        "focus-visible:outline-2 focus-visible:outline-offset-2",
-        buttonVariant[variant],
-        className,
-      )}
+      className={clsx(BUTTON_BASE_CLASS, BUTTON_VARIANT_CLASS[variant], className)}
       {...rest}
     />
   ),
@@ -128,11 +112,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         value={value}
         onChange={onChange}
         readOnly={isStatic || rest.readOnly}
-        className={clsx(
-          "block w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-          "placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2",
-          className,
-        )}
+        className={clsx(INPUT_CLASS, className)}
         {...rest}
       />
     );
@@ -143,13 +123,6 @@ Input.displayName = "Input";
 export interface CardProps extends DivProps {}
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ...rest }, ref) => (
-  <div
-    ref={ref}
-    className={clsx(
-      "rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm",
-      className,
-    )}
-    {...rest}
-  />
+  <div ref={ref} className={clsx(CARD_CLASS, className)} {...rest} />
 ));
 Card.displayName = "Card";