velloo 0.5.0 → 0.7.0

package/pkgs/helpers/src/icon.tsx

@@ -27,11 +27,13 @@ function lookup(name: string): IconNode | undefined {
   return viaPascal === undefined ? undefined : ICON_NODES[viaPascal];
 }
 
-const FALLBACK = lookup("HelpCircle");
-
 export function Icon({ name, className, size = 16, strokeWidth = 2, ...props }: IconProps) {
   const hit = lookup(name);
-  const node = hit ?? FALLBACK;
+  // Looked up here, not once at module level: a call at the top of this file
+  // is a side effect to a bundler, which then keeps the module — and the 0.6 MB
+  // of icon data behind it — in every bundle that imports anything at all from
+  // the helpers index, `Icon` on the screen or not.
+  const node = hit ?? lookup("HelpCircle");
   if (!node) return null;
   const tint = hit ? className : cn("text-[var(--color-fg-muted)]", className);
   return (

package/pkgs/helpers/src/index.ts

@@ -1,4 +1,4 @@
-export { Box } from "./box.tsx";
+export { Box, ELEMENT_TAG } from "./box.tsx";
 export { cn, mergeTailwind } from "./cn.ts";
 export { HELPER_DESCRIPTORS, helperDescriptors } from "./descriptors.ts";
 export { Divider, type DividerProps } from "./divider.tsx";
@@ -15,15 +15,18 @@ export {
 } from "./icon-data.ts";
 export { Image, type ImageProps } from "./image.tsx";
 export { Layer, type LayerProps } from "./layer.tsx";
+export { PLACEHOLDER_ASPECT_CLASS, PLACEHOLDER_AVATAR_SIZE_CLASS } from "./lowering.ts";
+export { Placeholder, type PlaceholderProps } from "./placeholder.tsx";
 export {
+  BUTTON_BASE_CLASS,
+  BUTTON_VARIANT_CLASS,
+  CARD_CLASS,
   CONTAINER_WIDTH_CLASS,
-  PLACEHOLDER_ASPECT_CLASS,
-  PLACEHOLDER_AVATAR_SIZE_CLASS,
+  INPUT_CLASS,
   STACK_ALIGN_CLASS,
   STACK_JUSTIFY_CLASS,
-} from "./lowering.ts";
-export { Placeholder, type PlaceholderProps } from "./placeholder.tsx";
+} from "./primitive-classes.tsx";
 export { Prose, type ProseProps } from "./prose.tsx";
 export { helpersRegistry } from "./registry.ts";
 export { SVG, type SVGProps } from "./svg.tsx";
-export { Text, type TextProps } from "./text.tsx";
+export { Text, type TextProps, TextRunContext, textTag } from "./text.tsx";

package/pkgs/helpers/src/lowering.ts

@@ -27,27 +27,3 @@ export const PLACEHOLDER_AVATAR_SIZE_CLASS: Record<string, string> = {
   lg: "size-14 text-base",
   xl: "size-20 text-lg",
 };
-
-// Keep in sync with packages/provider-none/src/components.tsx (Stack/Container
-// live there, not here — these tables ride along so codegen has one home for
-// every lowered-primitive class map).
-export const STACK_ALIGN_CLASS: Record<string, string> = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-};
-export const STACK_JUSTIFY_CLASS: Record<string, string> = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-};
-export const CONTAINER_WIDTH_CLASS: Record<string, 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",
-};

package/pkgs/helpers/src/primitive-classes.tsx

@@ -0,0 +1,43 @@
+/**
+ * The class tables the no-library primitives (`@velloo/provider-none`'s
+ * Stack, Container, Card, Button, Input) apply, shared with codegen's
+ * lowering of the same primitives so the emitted classes are the rendered
+ * ones by construction.
+ *
+ * A `.tsx` module although it holds no JSX: the server's Tailwind JIT scans
+ * only `.tsx` files for class candidates, and these literals are the only
+ * place the utilities appear once the components import them.
+ */
+
+export const STACK_ALIGN_CLASS: Record<string, string> = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+};
+export const STACK_JUSTIFY_CLASS: Record<string, string> = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+};
+export const CONTAINER_WIDTH_CLASS: Record<string, 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 CARD_CLASS =
+  "rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm";
+export const BUTTON_BASE_CLASS =
+  "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";
+export const BUTTON_VARIANT_CLASS: Record<string, 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 INPUT_CLASS =
+  "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";

package/pkgs/helpers/src/text.tsx

@@ -3,14 +3,38 @@ import { textClasses } from "@velloo/schema/typeset";
 import * as React from "react";
 import { cn } from "./cn.ts";
 
-export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
   /** Visual weight. Selects a rung of the theme's type ladder plus a tone. */
   variant?: "default" | "muted" | "small" | "lead";
 }
 
-export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
-  ({ variant = "default", className, ...props }, ref) => (
-    <p ref={ref} className={cn(textClasses(variant), className)} {...props} />
-  ),
+/**
+ * True beneath a `Text`. A paragraph cannot hold a paragraph: an HTML parser
+ * ends the outer `<p>` where the inner one starts, so markup that is rendered
+ * on the server and parsed again (a screenshot, a comparison) lays the inner
+ * text out as a sibling, while the same tree mounted on the client keeps it
+ * nested. A `Text` inside a `Text` is a run of that paragraph, so it renders
+ * the element a run is — and every path draws the same line.
+ */
+export const TextRunContext = React.createContext(false);
+
+/** The element a `Text` renders: a paragraph, or a run inside one. */
+export function textTag(run: boolean): "p" | "span" {
+  return run ? "span" : "p";
+}
+
+export const Text = React.forwardRef<HTMLElement, TextProps>(
+  ({ variant, className, ...props }, ref) => {
+    const run = React.useContext(TextRunContext);
+    return (
+      <TextRunContext.Provider value={true}>
+        {React.createElement(textTag(run), {
+          ref,
+          className: cn(textClasses(variant, run), className) || undefined,
+          ...props,
+        })}
+      </TextRunContext.Provider>
+    );
+  },
 );
 Text.displayName = "Text";

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

@@ -5,10 +5,10 @@
  * and the style channel positively rather than correcting a shadcn claim.
  */
 export const ANTD_INTRO: readonly string[] = [
-  "**This folder targets Ant Design v5.** Components are real antd: `Flex`/`Space`/`Row`+`Col` for layout, `Card`, `TypographyTitle`/`TypographyText`/`TypographyParagraph` (ALL text — these are antd's `Typography.Title/Text/Paragraph` under flat ids), `Button`, `Input`/`Select`/`Checkbox`/`Radio`/`Switch`/`Segmented`/`Slider`/`Rate`, `Tag`/`Badge`/`Avatar`/`Alert`/`Statistic`/`Progress`/`Skeleton`/`Empty`, `Table`/`List`+`ListItem`/`Tabs`/`Steps`/`Breadcrumb`/`Pagination`/`Menu` (data components take `items`/`columns` arrays — no render functions), and the overlay surface `Modal`/`Drawer`/`Popover`/`Tooltip`/`Dropdown` (rendered open + inline in design mode). Call `list_components` for the full set and per-component `example` props.",
+  "**This folder targets Ant Design v5.** Components are real antd: `Flex`/`Space`/`Row`+`Col` for layout, `Card`, `TypographyTitle`/`TypographyText`/`TypographyParagraph` (ALL text — antd's `Typography.Title/Text/Paragraph`, which compose under flat ids because a `$ref` can't carry a dot, and emit as the dotted exports), `Button`, `Input`/`Select`/`Checkbox`/`Radio`/`Switch`/`Segmented`/`Slider`/`Rate`, `Tag`/`Badge`/`Avatar`/`Alert`/`Statistic`/`Progress`/`Skeleton`/`Empty`, `Table`/`List`+`ListItem`/`Tabs`/`Steps`/`Breadcrumb`/`Pagination`/`Menu` (data components take `items`/`columns` arrays — no render functions), and the overlay surface `Modal`/`Drawer`/`Popover`/`Tooltip`/`Dropdown` (rendered open + inline in design mode). Call `list_components` for the full set and per-component `example` props.",
   "",
-  '**Style through the inline `style` object.** `update_props { style: { display: "flex", alignItems: "center", gap: "16px", padding: "24px" } }` — a plain React style object (merges shallowly; an inner `null` drops a key, `style: null` clears). The theme runs in antd\'s `cssVar` mode, so antd tokens are CSS variables: inside any antd component subtree you can reference `var(--ant-color-primary)`, `var(--ant-color-text-secondary)`, `var(--ant-color-bg-container)`, `var(--ant-border-radius)` etc. to stay themable; plain CSS values always work. Prefer component props (`type`, `size`, `gap`) over style overrides where they exist.',
+  '**Style through the inline `style` object.** `update_props { style: { display: "flex", alignItems: "center", gap: "16px", padding: "24px" } }` — a plain React style object (merges shallowly; an inner `null` drops a key, `style: null` clears). The theme runs in antd\'s `cssVar` mode, so antd tokens are CSS variables: inside any antd component subtree you can reference `var(--ant-color-primary)`, `var(--ant-color-text-secondary)`, `var(--ant-color-bg-container)`, `var(--ant-border-radius)` etc. to stay themable; plain CSS values always work. Prefer component props (`type`, `size`, `gap`) over style overrides where they exist. A plain `<div>`/`<span>` composes as `Box` and emits as the bare element.',
   "",
-  '`emit_code` emits idiomatic antd JSX with `style={{…}}` — components import from `"antd"`. The flat typography/list ids map to dotted antd exports: destructure them when writing real code (`const { Title: TypographyTitle, Text: TypographyText, Paragraph: TypographyParagraph } = Typography;` and `const ListItem = List.Item; const ListItemMeta = List.Item.Meta;`) or rename the JSX tags to the dotted form. `emit_theme` emits a ConfigProvider `ThemeConfig` module (default `antd-theme.ts`) — wire it with `<ConfigProvider theme={theme}>`. Tailwind utility diagnostics do not apply here.',
+  "`emit_code` emits idiomatic antd JSX with `style={{…}}`, already written against the real exports — `<Typography.Title>`, `<List.Item.Meta>` — and `packagesToImport` names the package they come from. `emit_theme` emits a ConfigProvider `ThemeConfig` module (default `antd-theme.ts`) — wire it with `<ConfigProvider theme={theme}>`. Tailwind utility diagnostics do not apply here.",
   "",
 ];