@iloveagents/foundry-web-primitives 0.1.0

package/AGENTS.md

@@ -0,0 +1,45 @@
+Stateless UI primitives for the LastSpace agent UI. Published as `@iloveagents/foundry-web-primitives`.
+
+# Architecture
+
+```
+src/
+  index.ts        ← barrel export (all public API)
+  utils.ts        ← cn() — clsx + tailwind-merge
+  button.tsx      ← Button + buttonVariants
+  checkbox.tsx    ← Checkbox (Radix UI)
+  field.tsx       ← Field, FieldSet (form-row composition)
+  input.tsx       ← Input + inputClassName
+  textarea.tsx    ← Textarea + textareaClassName
+```
+
+# Import boundary
+
+- MUST NOT import from `@lastspace/*` (zero workspace dependencies — pure leaf package). **Enforced** by the `OPEN_CORE_GRAPH` rule in `packages/web-ui/src/__tests__/open-core-guards.test.ts`.
+- MUST NOT use `@/` path aliases (relative imports only). Convention; not currently guarded for this package — guard coverage tracked under #92's follow-ups.
+- MUST NOT import from any `apps/`, `features/`, or `pages/`. Convention; same status as above.
+
+# What goes here
+
+Stateless, generic UI building blocks. Specifically:
+
+- shadcn-style primitives wrapping Radix UI roots
+- Layout/composition helpers (`Field` rows for forms)
+- Pure styling utilities (`cn`, variant helpers)
+
+# What does NOT go here
+
+- Any component that touches a Zustand store, agent runtime, or theme runtime
+- Any component that renders into a portal AND needs theming (Dialog, Popover, DropdownMenu — those stay in `@iloveagents/foundry-web-ui` until the theme-runtime coupling is refactored)
+- Any component with backend / API knowledge
+
+# Theming
+
+Components use Tailwind utility classes referencing CSS variables (shadcn convention):
+- `bg-background`, `text-foreground`, `border-border`, `bg-primary`, `text-primary-foreground`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `text-accent-foreground`, `border-input`, `ring-ring`, `bg-destructive`, `text-destructive-foreground`, `bg-secondary`, `text-secondary-foreground`
+
+Consumers must define these tokens in their app's CSS (see `apps/web/src/index.css` for the canonical definitions).
+
+# Bundle-size budget
+
+`@iloveagents/foundry-web-primitives` ≤30 KB gz — **target, not yet enforced**. The `size-limit` infrastructure scaffolds in a follow-up PR on #92. Until then, manually check the build output. Adding heavier components (Dialog, Popover, table primitives) is fine if they stay zero-coupled, but watch the budget.

package/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 iLoveAgents, a brand of Leitwolf GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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 THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@iloveagents/foundry-web-primitives",
+  "version": "0.1.0",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "lucide-react": ">=0.400.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-slot": "^1.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "jsdom": "^28.1.0",
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.4"
+  },
+  "scripts": {
+    "test:unit": "vitest run --passWithNoTests"
+  }
+}

package/src/button.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils.ts";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "./utils.ts";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer size-4 shrink-0 rounded border border-border bg-background shadow-sm outline-none transition",
+      "focus-visible:ring-2 focus-visible:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+      <Check className="size-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/field.tsx

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { cn } from "./utils.ts";
+
+export function Field({
+  label,
+  hint,
+  error,
+  htmlFor,
+  action,
+  className,
+  children,
+}: {
+  label?: ReactNode;
+  hint?: ReactNode;
+  error?: ReactNode;
+  htmlFor?: string;
+  action?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <label className={cn("block space-y-1.5", className)} htmlFor={htmlFor}>
+      {label || action ? (
+        <span className="flex items-center justify-between gap-3">
+          {label ? (
+            <span className="text-xs font-medium text-muted-foreground">{label}</span>
+          ) : (
+            <span />
+          )}
+          {action}
+        </span>
+      ) : null}
+      {children}
+      {hint ? <span className="block text-xs text-muted-foreground">{hint}</span> : null}
+      {error ? <span className="block text-xs text-destructive">{error}</span> : null}
+    </label>
+  );
+}
+
+export function FieldSet({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"div">) {
+  return <div className={cn("grid gap-4", className)} {...props} />;
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { cn } from "./utils.ts";
+export { Button, buttonVariants } from "./button.tsx";
+export type { ButtonProps } from "./button.tsx";
+export { Checkbox } from "./checkbox.tsx";
+export { Input, inputClassName } from "./input.tsx";
+export { Textarea, textareaClassName } from "./textarea.tsx";
+export { Field, FieldSet } from "./field.tsx";

package/src/input.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { cn } from "./utils.ts";
+
+const inputClassName =
+  "flex h-10 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type = "text", ...props }, ref) => {
+    return <input ref={ref} type={type} className={cn(inputClassName, className)} {...props} />;
+  },
+);
+Input.displayName = "Input";
+
+export { Input, inputClassName };

package/src/textarea.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { cn } from "./utils.ts";
+
+const textareaClassName =
+  "flex min-h-24 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return <textarea ref={ref} className={cn(textareaClassName, className)} {...props} />;
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea, textareaClassName };

package/src/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}