@autono/open-pages 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/open-pages",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Runtime and CLI for open-pages — live preview of React and HTML pages, click-to-comment inspector, and static export.",
   "type": "module",
   "exports": {

package/skills/create-page/SKILL.md

@@ -77,7 +77,7 @@ Before writing code, map every planned section to the shadcn components it shoul
 | --- | --- |
 | Landing / marketing | `navigation-menu` or plain links + `sheet` for mobile nav, `button` (CTAs), `badge` (eyebrows), `card` (features, pricing tiers), `tabs` or `switch` (billing toggle), `accordion` (FAQ), `separator` |
 | Dashboard / app UI | `sidebar` (`SidebarProvider` + `SidebarInset`), `table`, `chart`, `card` (KPIs), `tabs`, `select`, `dropdown-menu`, `badge` (status), `skeleton`, `empty` |
-| Form / signup | `form` (react-hook-form + zod) or `field`, `input`, `select`, `checkbox`, `radio-group`, `switch`, `textarea`, `button`, `alert` |
+| Form / signup | `field`, `input`, `select`, `checkbox`, `radio-group`, `switch`, `textarea`, `button`, `alert` |
 | Docs / long-form | `sidebar` or a sticky `scroll-area` TOC, `breadcrumb`, prose in a `max-w-[65ch]` column, `kbd`, `table`, `alert` (callouts) |
 | Portfolio / gallery | `carousel`, `aspect-ratio`, `card`, `dialog` (lightbox), `hover-card` |
 | Internal tool | `command` (palette), `combobox`, `resizable`, `context-menu`, `tooltip`, `sonner` (toasts), `alert-dialog` (confirm) |

package/skills/page-authoring/SKILL.md

@@ -25,10 +25,10 @@ Every workspace is a shadcn/ui project out of the box. Nothing needs installing:
 | `lib/utils.ts` | `cn()` for merging class names. Import as `@/lib/utils`. |
 | `hooks/use-mobile.ts` | `useIsMobile()` breakpoint hook. Import as `@/hooks/use-mobile`. |
 | `styles/globals.css` | Tailwind v4 entry: `@source` for `pages/ ui/ lib/ hooks/ themes/`, the `dark` variant, `:root`/`.dark` OKLCH tokens, `@theme inline`, base layer. Loaded into every page automatically. |
-| `components.json` | shadcn config (style `new-york`, base `radix`, aliases `@/ui`, `@/lib/utils`, `@/hooks`, `@/components`). Activates the `shadcn` skill and CLI lookups. |
+| `components.json` | shadcn config (style `radix-nova`, aliases `@/ui`, `@/lib/utils`, `@/hooks`, `@/components`). Activates the `shadcn` skill and CLI lookups. |
 | `themes/<id>.css` | Optional token overrides a page opts into with `meta.theme` (see Themes). |
 
-Installed deps you may import directly: `lucide-react` (icons), `radix-ui`, `class-variance-authority`, `clsx`, `tailwind-merge`, `cmdk`, `sonner`, `vaul`, `recharts`, `react-day-picker`, `date-fns`, `react-hook-form`, `zod`, `@hookform/resolvers`, `input-otp`, `embla-carousel-react`, `react-resizable-panels`, `next-themes`. Nothing else.
+Installed deps you may import directly: `lucide-react` (icons), `radix-ui`, `class-variance-authority`, `clsx`, `tailwind-merge`, `cmdk`, `sonner`, `vaul`, `recharts`, `react-day-picker`, `date-fns`, `input-otp`, `embla-carousel-react`, `react-resizable-panels`, `next-themes`. Nothing else.
 
 `npx shadcn@latest add <item>` is only for **blocks** (`dashboard-01`, `login-03`, …) or third-party registries; every core component is already under `ui/`. For lookups use `npx shadcn@latest docs <component> --json`, `view`, `search` — details in the `shadcn` skill.
 

package/skills/page-authoring/references/interactivity.md

@@ -35,32 +35,24 @@ const [billing, setBilling] = useState<'monthly' | 'yearly'>('monthly');
 
 Simple forms: `<form onSubmit>` with `@/ui/field`, `@/ui/input`, `@/ui/label`,
 `@/ui/select`, `@/ui/checkbox`, `@/ui/textarea`, `@/ui/button`. Validated
-forms: `react-hook-form` + `zod` through `@/ui/form`:
+forms: native form state (or your own) presented with `@/ui/field`:
 
 ```tsx
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
 import { Button } from '@/ui/button';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/ui/form';
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from '@/ui/field';
 import { Input } from '@/ui/input';
 
-const schema = z.object({ email: z.string().email('Enter a valid work email') });
-
-const form = useForm<z.infer<typeof schema>>({ resolver: zodResolver(schema), defaultValues: { email: '' } });
-
-<Form {...form}>
-  <form onSubmit={form.handleSubmit((values) => setSubmitted(values))} className="flex flex-col gap-4">
-    <FormField control={form.control} name="email" render={({ field }) => (
-      <FormItem>
-        <FormLabel>Work email</FormLabel>
-        <FormControl><Input type="email" autoComplete="email" {...field} /></FormControl>
-        <FormMessage />
-      </FormItem>
-    )} />
-    <Button type="submit">Join the waitlist</Button>
-  </form>
-</Form>
+<form onSubmit={handleSubmit}>
+  <FieldGroup>
+    <Field>
+      <FieldLabel htmlFor="email">Work email</FieldLabel>
+      <Input id="email" name="email" type="email" required />
+      <FieldDescription>We never share it.</FieldDescription>
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+    <Button type="submit">Create account</Button>
+  </FieldGroup>
+</form>
 ```
 
 - Every input has a label (`<Label htmlFor>` or `<FormLabel>`), a `name`, and