velloo 0.0.0 → 0.2.0

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

@@ -0,0 +1,129 @@
+import { createTheme, type Theme as MuiTheme, type ThemeOptions } from "@mui/material/styles";
+import {
+  type ColorPair,
+  DEFAULT_TYPESET_NAME,
+  resolveColors,
+  typesetScale,
+  type Theme as VellooTheme,
+} from "@velloo/schema";
+import { formatRgb, parse } from "culori";
+
+/**
+ * MUI's color manipulator (lighten/darken in createPalette) only parses
+ * `#hex`, `rgb()/rgba()`, `hsl()/hsla()`, `color()` — NOT `oklch()`, which is
+ * exactly what velloo themes store. Convert anything outside MUI's set to
+ * `rgb(...)` via culori; pass MUI-native formats through untouched so a hex
+ * theme stays hex (and round-trips identically in codegen).
+ */
+function muiColor(css: string): string {
+  const s = css.trim();
+  if (/^(#|rgb|hsl)/i.test(s)) return s;
+  return formatRgb(parse(s)) ?? s;
+}
+
+/** A color slot is a CSS string or a { DEFAULT, foreground } pair — pull the base color (MUI-safe). */
+function base(slot: ColorPair | undefined, fallback: string): string {
+  if (typeof slot === "string") return muiColor(slot);
+  if (slot && typeof slot === "object" && typeof slot.DEFAULT === "string")
+    return muiColor(slot.DEFAULT);
+  return muiColor(fallback);
+}
+
+/** The `foreground` half of a pair (the on-color, MUI-safe), or a fallback. */
+function fg(slot: ColorPair | undefined, fallback: string): string {
+  if (slot && typeof slot === "object" && typeof slot.foreground === "string")
+    return muiColor(slot.foreground);
+  return muiColor(fallback);
+}
+
+/** MUI's shape.borderRadius is a px number; coerce velloo's radius.md (number or CSS len). */
+function radiusPx(theme: VellooTheme): number {
+  const md = (theme.radius as Record<string, unknown> | undefined)?.md;
+  if (typeof md === "number") return md;
+  if (typeof md === "string") {
+    const n = Number.parseFloat(md);
+    return Number.isFinite(n) ? (md.includes("rem") ? n * 16 : n) : 8;
+  }
+  return 8;
+}
+
+/**
+ * Project velloo's unified token tree onto MUI `ThemeOptions` (the input POJO
+ * for `createTheme`) — the adapter's `themeToNative`. This is the SINGLE source
+ * of the velloo→MUI mapping: `muiThemeFrom` wraps it for the canvas render
+ * pass, and codegen serializes the same POJO to a `createTheme(...)` artifact,
+ * so the preview and the emitted theme never diverge. velloo colors are
+ * arbitrary CSS strings (oklch/hsl/hex); MUI's palette accepts any CSS color.
+ */
+export function muiThemeOptions(theme: VellooTheme, dark = false): ThemeOptions {
+  // In dark mode, overlay the theme's dark color slots — otherwise flipping
+  // palette.mode to "dark" would keep the light color values.
+  const c = resolveColors(theme, dark);
+  return {
+    palette: {
+      mode: dark ? "dark" : "light",
+      primary: { main: base(c.primary, "#4f46e5"), contrastText: fg(c.primary, "#ffffff") },
+      secondary: { main: base(c.secondary, "#64748b"), contrastText: fg(c.secondary, "#ffffff") },
+      error: { main: base(c.destructive, "#dc2626"), contrastText: fg(c.destructive, "#ffffff") },
+      background: { default: muiColor(c.background), paper: base(c.card, c.background) },
+      text: { primary: muiColor(c.foreground), secondary: base(c.muted, c.foreground) },
+      divider: c.border ? muiColor(c.border) : "rgba(0,0,0,0.12)",
+    },
+    shape: { borderRadius: radiusPx(theme) },
+    typography: muiTypography(theme),
+  };
+}
+
+/**
+ * Project the default typeset onto MUI's typography variants.
+ *
+ * MUI's theme is a serialized POJO — it ends up inside a `createTheme(...)`
+ * artifact where no CSS variables exist — so this reads `typesetScale`, the
+ * concrete-value form of the same ratio table `typesetCss` uses symbolically.
+ * The canvas render pass and the emitted artifact both come through here, so a
+ * preview cannot disagree with generated code.
+ */
+function muiTypography(theme: VellooTheme): NonNullable<ThemeOptions["typography"]> {
+  const typography = theme.typography;
+  const typeset = typography.typesets?.[DEFAULT_TYPESET_NAME];
+  const scale = typesetScale(typeset, {
+    ...(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 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 } : {}),
+      fontSize: `${r.fontSize}px`,
+      lineHeight: r.lineHeight,
+      letterSpacing: r.letterSpacing,
+      fontWeight: r.fontWeight,
+    };
+  };
+
+  return {
+    fontFamily: bodyFamily,
+    fontSize: scale.body.fontSize,
+    h1: variant("h1"),
+    h2: variant("h2"),
+    h3: variant("h3"),
+    h4: variant("h4"),
+    h5: variant("h5"),
+    h6: variant("h6"),
+    subtitle1: variant("lead"),
+    subtitle2: variant("small"),
+    body1: variant("body"),
+    body2: variant("caption"),
+    caption: variant("caption"),
+  };
+}
+
+/** The MUI `Theme` for the render pass — `createTheme` over {@link muiThemeOptions}. */
+export function muiThemeFrom(theme: VellooTheme, dark = false): MuiTheme {
+  return createTheme(muiThemeOptions(theme, dark));
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Lives in its own module (exported as `@velloo/provider-mui/version`) so
+ * version-only consumers — the CLI init wizard — don't pull the provider's
+ * registry (and with it all of @mui/material) into their import graph. The
+ * bundled CLI lazy-loads the full provider per folder config; see
+ * `packages/server/src/providers.ts`.
+ */
+export const MUI_VERSION = "6" as const;

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

@@ -0,0 +1,204 @@
+import { headingInlineStyle, textInlineStyle } from "@velloo/schema/typeset";
+import * as React from "react";
+import type { ButtonProps, ContainerProps, InputProps, StackProps } from "./components.tsx";
+
+/**
+ * Inline-styled variants of the no-library primitives, for a `none`-CSS folder
+ * (`config.styling.framework === "none"`). Identical props + structural defaults
+ * to the Tailwind set in `components.tsx`, but every default is a plain `style`
+ * object instead of a Tailwind class — so they paint with the JIT off. Theme
+ * tokens reach them as the CSS variables `themeToCss` injects
+ * (`var(--color-foreground)`, `var(--radius)`, …), so a `none/none` folder still
+ * themes. The node's authored `style` (set via `update_props`) merges last and wins.
+ *
+ * Typography is the same story one level deeper: Heading/Text reference the
+ * typeset's `var(--text-*)` / `var(--leading-*)` tokens rather than hardcoded
+ * rem values, so a `none/none` folder's type follows its typeset — and moves
+ * live when one changes — exactly like every other channel.
+ */
+
+/** Merge structural defaults with the node's authored inline style (author wins). */
+function merge(
+  defaults: React.CSSProperties,
+  authored: React.CSSProperties | undefined,
+): React.CSSProperties {
+  return authored ? { ...defaults, ...authored } : defaults;
+}
+
+/** 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} />,
+);
+Box.displayName = "Box";
+
+const alignStyle: Record<NonNullable<StackProps["align"]>, string> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+};
+const justifyStyle: Record<NonNullable<StackProps["justify"]>, string> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+};
+
+export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  ({ direction = "col", gap = 4, align, justify, style, ...rest }, ref) => (
+    <div
+      ref={ref}
+      style={merge(
+        {
+          display: "flex",
+          flexDirection: direction === "row" ? "row" : "column",
+          gap: space(gap),
+          ...(align ? { alignItems: alignStyle[align] } : {}),
+          ...(justify ? { justifyContent: justifyStyle[justify] } : {}),
+        },
+        style,
+      )}
+      {...rest}
+    />
+  ),
+);
+Stack.displayName = "Stack";
+
+const containerMaxWidth: Record<NonNullable<ContainerProps["size"]>, string> = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  full: "100%",
+};
+
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  ({ size = "md", style, ...rest }, ref) => (
+    <div
+      ref={ref}
+      style={merge(
+        {
+          marginInline: "auto",
+          width: "100%",
+          paddingInline: "1rem",
+          maxWidth: containerMaxWidth[size],
+        },
+        style,
+      )}
+      {...rest}
+    />
+  ),
+);
+Container.displayName = "Container";
+
+const buttonVariantStyle: Record<NonNullable<ButtonProps["variant"]>, React.CSSProperties> = {
+  default: { background: "var(--color-foreground)", color: "var(--color-background)" },
+  ghost: { background: "transparent", color: "var(--color-foreground)" },
+  outline: {
+    background: "transparent",
+    color: "var(--color-foreground)",
+    border: "1px solid var(--color-border)",
+  },
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "default", type, style, ...rest }, ref) => (
+    <button
+      ref={ref}
+      type={type ?? "button"}
+      style={merge(
+        {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.5rem",
+          borderRadius: "var(--radius)",
+          padding: "0.5rem 1rem",
+          fontSize: "0.875rem",
+          fontWeight: 500,
+          cursor: "pointer",
+          ...buttonVariantStyle[variant],
+        },
+        style,
+      )}
+      {...rest}
+    />
+  ),
+);
+Button.displayName = "Button";
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ type = "text", value, onChange, style, ...rest }, ref) => {
+    const isStatic = value !== undefined && onChange === undefined;
+    return (
+      <input
+        ref={ref}
+        type={type}
+        value={value}
+        onChange={onChange}
+        readOnly={isStatic || rest.readOnly}
+        style={merge(
+          {
+            display: "block",
+            width: "100%",
+            borderRadius: "var(--radius)",
+            border: "1px solid var(--color-input)",
+            background: "var(--color-background)",
+            padding: "0.5rem 0.75rem",
+            fontSize: "0.875rem",
+          },
+          style,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ style, ...rest }, ref) => (
+    <div
+      ref={ref}
+      style={merge(
+        {
+          borderRadius: "var(--radius)",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-card)",
+          color: "var(--color-card-foreground)",
+          padding: "1.5rem",
+          boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        },
+        style,
+      )}
+      {...rest}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ level = 1, style, ...rest }, ref) => {
+    const Tag = `h${level}` as const;
+    return <Tag ref={ref} style={merge(headingInlineStyle(level), style)} {...rest} />;
+  },
+);
+Heading.displayName = "Heading";
+
+interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  variant?: "default" | "muted" | "small" | "lead";
+}
+
+export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
+  ({ variant = "default", style, ...rest }, ref) => (
+    <p ref={ref} style={merge(textInlineStyle(variant), style)} {...rest} />
+  ),
+);
+Text.displayName = "Text";

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

@@ -0,0 +1,155 @@
+import { clsx } from "clsx";
+import * as React from "react";
+
+/**
+ * The no-library provider's primitives — thin wrappers over plain HTML
+ * elements. Anything that needs visual styling does it through Tailwind
+ * classes the user (or agent) supplies via the `className` prop. No
+ * portals, no providers, no internal state. This is intentionally the
+ * lowest-rope primitive set: ideal for throwaway prototypes, designs
+ * that haven't picked a UI library yet, and as the proof that the
+ * `ComponentProvider` abstraction works at the trivial end of the
+ * spectrum.
+ */
+
+interface DivProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Box = React.forwardRef<HTMLDivElement, DivProps>(({ className, ...rest }, ref) => (
+  <div ref={ref} className={clsx(className)} {...rest} />
+));
+Box.displayName = "Box";
+
+export interface StackProps extends DivProps {
+  /** Layout direction. Defaults to "col" (flex-column). */
+  direction?: "row" | "col";
+  /** Tailwind gap scale (2, 4, 6, …). Defaults to 4. */
+  gap?: number;
+  /** Cross-axis alignment. */
+  align?: "start" | "center" | "end" | "stretch";
+  /** Main-axis justification. */
+  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
+      ref={ref}
+      className={clsx(
+        "flex",
+        direction === "row" ? "flex-row" : "flex-col",
+        `gap-${gap}`,
+        align ? alignClass[align] : undefined,
+        justify ? justifyClass[justify] : undefined,
+        className,
+      )}
+      {...rest}
+    />
+  ),
+);
+Stack.displayName = "Stack";
+
+export interface ContainerProps extends DivProps {
+  /** Max-width preset. Defaults to "md". */
+  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)}
+      {...rest}
+    />
+  ),
+);
+Container.displayName = "Container";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  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,
+      )}
+      {...rest}
+    />
+  ),
+);
+Button.displayName = "Button";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", value, onChange, ...rest }, ref) => {
+    // Same canvas-safe pattern as the shadcn snapshot's Input: if a
+    // static `value` is supplied without `onChange`, switch to
+    // `readOnly` so React doesn't warn about uncontrolled→controlled.
+    const isStatic = value !== undefined && onChange === undefined;
+    return (
+      <input
+        ref={ref}
+        type={type}
+        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,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
+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}
+  />
+));
+Card.displayName = "Card";

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

@@ -0,0 +1,57 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { type FrameworkAdapter, type Manifest, TAILWIND_CLASSNAME } from "@velloo/provider";
+import { resolveProviderSrcDir } from "@velloo/provider/src-dir";
+import { NONE_INLINE_INTRO, NONE_INTRO } from "./intro.ts";
+import { NONE_MANIFEST } from "./manifest.ts";
+import { registry } from "./registry.ts";
+import { inlineRegistry } from "./registry-inline.ts";
+
+export { Box, Button, Card, Container, Input, Stack } from "./components.tsx";
+export { NONE_MANIFEST } from "./manifest.ts";
+export { registry } from "./registry.ts";
+
+export { noLibVersion } from "./version.ts";
+
+import { noLibVersion } from "./version.ts";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+/** Component sources + Tailwind entry CSS. Resolves from source and from the
+ *  bundled CLI (build.ts copies them to `<dist>/pkgs/provider-none/src`). */
+const srcDir = resolveProviderSrcDir(here, "provider-none", process.env.VELLOO_NOLIB_SRC);
+
+/** Absolute path to the Tailwind entry CSS shipped with the no-library provider. */
+export const entryCssPath: string = join(srcDir, "tailwind-entry.css");
+
+/** Absolute path to the no-library provider's component sources for JIT scanning. */
+export const componentsDir: string = srcDir;
+
+export async function loadManifest(): Promise<Manifest> {
+  return NONE_MANIFEST;
+}
+
+/**
+ * Build the no-library `ComponentProvider`. Identical interface shape
+ * to the shadcn provider — the renderer / JIT / codegen / canvas don't
+ * know which one is active; they just consume the contract.
+ */
+export function createProvider(): FrameworkAdapter {
+  return {
+    id: "none",
+    version: noLibVersion,
+    componentsDir,
+    styleEntryPath: entryCssPath,
+    registry,
+    loadManifest,
+    label: `none ${noLibVersion}`,
+    // Default to Tailwind (existing folders); a folder whose `config.styling`
+    // is `none` resolves to the inline-`style` channel instead.
+    styleChannel: TAILWIND_CLASSNAME,
+    styleChannels: ["tailwind-classname", "style"],
+    mcpIntro: (channel) => [...(channel === "style" ? NONE_INLINE_INTRO : NONE_INTRO)],
+    // Inline-styled primitives for the `style` channel; Tailwind-classed for
+    // every other channel. Lets a `none/none` folder paint with the JIT off.
+    registryForChannel: (kind) => (kind === "style" ? inlineRegistry : registry),
+  };
+}

package/pkgs/provider-none/src/intro.ts

@@ -0,0 +1,18 @@
+/**
+ * MCP instruction framing for a no-framework folder
+ * (`FrameworkAdapter.mcpIntro`), one variant per style channel.
+ *
+ * The server's base brief is framework-neutral, so these state the (small)
+ * vocabulary positively rather than correcting a shadcn claim.
+ */
+export const NONE_INTRO: readonly string[] = [
+  "**This folder has no component library** — only bare primitives wrapping plain HTML: `Box`/`Stack`/`Container` for layout, `Card`, `Button`, `Input`, plus the velloo helpers (`Heading`/`Text`, `Image`, `Gradient`, `Layer`, `SVG`, `Divider`, `Placeholder`, `Icon`). There is no `Badge`/`Avatar`/`Tabs`/`Dialog` — build those from primitives or define snippets. Call `list_components` for the exact set. Styling is **Tailwind classes**.",
+  "",
+];
+
+export const NONE_INLINE_INTRO: readonly string[] = [
+  "**This folder has no component library and no CSS framework** — bare primitives wrapping plain HTML (`Box`/`Stack`/`Container`, `Card`, `Button`, `Input`) plus the velloo helpers (`Heading`/`Text`, `Image`, `Icon`, `SVG`, `Divider`, `Gradient`, `Layer`, `Placeholder`). There is no `Badge`/`Avatar`/`Tabs`/`Dialog` — build those from primitives or snippets. Call `list_components` for the exact set.",
+  "",
+  '**Style through inline `style` objects.** `update_props { style: { display: "flex", gap: "16px", padding: "24px", borderRadius: "8px", color: "var(--color-foreground)" } }` — a plain React style object (merges shallowly; an inner `null` drops a key, `style: null` clears). Reference theme tokens as CSS variables (`var(--color-primary)`, `var(--radius)`) from `get_theme` so the design stays themable. `emit_code` emits `style={{…}}` on plain elements — no imports, no Tailwind. Tailwind utility diagnostics do not apply.',
+  "",
+];