@once-ui-system/core 2.0.0-alpha.1 → 2.0.0-alpha.2

package/ai/catalog.json

@@ -1,6 +1,6 @@
 {
- "version": "2.0.0-alpha.1",
- "generated": "2026-09-17",
+ "version": "2.0.0-alpha.2",
+ "generated": "2026-09-23",
  "components": {
   "Accordion": {
    "group": "components",
@@ -430,6 +430,13 @@
     "components"
    ]
   },
+  "Form": {
+   "group": "components",
+   "purpose": "Form component",
+   "tags": [
+    "components"
+   ]
+  },
   "GlitchFx": {
    "group": "components",
    "extends": [
@@ -683,12 +690,12 @@
     "components"
    ]
   },
-  "Particle": {
+  "ParticleFx": {
    "group": "components",
    "extends": [
     "Flex"
    ],
-   "purpose": "Particle component",
+   "purpose": "ParticleFx component",
    "tags": [
     "components"
    ]

package/ai/components/Effect.json

@@ -20,7 +20,7 @@
   "blob": "Omit<React.ComponentProps<typeof BlobFx>, \"children\">",
   "matrix": "Omit<React.ComponentProps<typeof MatrixFx>, \"children\">",
   "weather": "Omit<React.ComponentProps<typeof WeatherFx>, \"children\">",
-  "particle": "Omit<React.ComponentProps<typeof Particle>, \"children\">",
+  "particle": "Omit<React.ComponentProps<typeof ParticleFx>, \"children\">",
   "celebration": "Omit<React.ComponentProps<typeof CelebrationFx>, \"children\">",
   "children": "React.ReactNode"
  },

package/ai/components/Feedback.json

@@ -15,6 +15,7 @@
  "props": {
   "variant": "\"info\" | \"danger\" | \"warning\" | \"success\" = info",
   "showIcon": "boolean = true",
+  "icon": "IconName",
   "title": "string",
   "description": "string",
   "showCloseButton": "boolean = false",

package/ai/components/Form.json

@@ -0,0 +1,15 @@
+{
+ "name": "Form",
+ "group": "components",
+ "props": {
+  "density": "\"stacked\" | \"tight\" | \"spacious\" = tight",
+  "columns": "FormColumns",
+  "size": "TShirtSizes",
+  "as": "\"div\" | \"form\" = div",
+  "onSubmit": "React.FormEventHandler<HTMLFormElement>",
+  "className": "string",
+  "style": "React.CSSProperties",
+  "children": "React.ReactNode"
+ },
+ "mixinsRef": []
+}

package/ai/components/Input.json

@@ -5,7 +5,7 @@
   "id": "!string",
   "label": "string",
   "placeholder": "string",
-  "size": "TShirtSizes = m",
+  "size": "TShirtSizes",
   "error": "boolean = false",
   "errorMessage": "ReactNode",
   "description": "ReactNode",
@@ -19,7 +19,8 @@
   "characterCount": "boolean",
   "cursor": "undefined | \"interactive\"",
   "validate": "(value: ReactNode) => ReactNode | null",
-  "loading": "boolean = false"
+  "loading": "boolean = false",
+  "span": "number"
  },
  "mixinsRef": []
 }

package/ai/components/{Particle.json → ParticleFx.json}

@@ -1,5 +1,5 @@
 {
- "name": "Particle",
+ "name": "ParticleFx",
  "group": "components",
  "extends": [
   "Flex"

package/ai/components/ScrollContainer.json

@@ -15,7 +15,15 @@
  ],
  "props": {
   "items": "!React.ReactNode[]",
-  "controlPlacement": "\"top-start\" | \"top-center\" | \"top-end\" | \"top-between\" | \"bottom-start\" | \"bottom-center\" | \"bottom-end\" | \"bottom-between\" = top-start"
+  "controlPlacement": "ScrollContainerControlPlacement = top-start",
+  "infinite": "boolean = false",
+  "markers": "boolean | \"top\" | \"bottom\" = false",
+  "draggable": "boolean = true",
+  "step": "number = 1",
+  "clip": "boolean = false",
+  "proximity": "boolean | number = false",
+  "active": "number",
+  "onActiveChange": "(index: number) => void"
  },
  "mixinsRef": [
   "CommonProps",

package/ai/components/Textarea.json

@@ -6,7 +6,7 @@
   "label": "string",
   "placeholder": "string",
   "lines": "number | \"auto\" = auto",
-  "size": "TShirtSizes = m",
+  "size": "TShirtSizes",
   "error": "boolean = false",
   "errorMessage": "ReactNode",
   "description": "ReactNode",
@@ -19,7 +19,8 @@
   "characterCount": "boolean",
   "resize": "\"horizontal\" | \"vertical\" | \"both\" | \"none\" = vertical",
   "validate": "(value: ReactNode) => ReactNode | null",
-  "disabled": "boolean = false"
+  "disabled": "boolean = false",
+  "span": "number"
  },
  "mixinsRef": []
 }

package/ai/components/ThemeSwitcher.json

@@ -14,7 +14,8 @@
   "StyleProps"
  ],
  "props": {
-  "collapsed": "boolean"
+  "collapsed": "boolean",
+  "direction": "\"row\" | \"column\" = row"
  },
  "mixinsRef": [
   "CommonProps",

package/ai/examples/blocks/Footer4.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Background, Button, Column, IconButton, Logo, Mask, Particle, Row, SmartLink, Tag, Text, TypeFx } from "@once-ui-system/core";
+import { Avatar, Background, Button, Column, IconButton, Logo, Mask, ParticleFx, Row, SmartLink, Tag, Text, TypeFx } from "@once-ui-system/core";
 import type { IconName } from "@once-ui-system/core";
 
 const social: { icon: IconName; label: string; href: string }[] = [
@@ -147,7 +147,7 @@ export const Footer4 = (flex: React.ComponentProps<typeof Column>) => {
                 y={50}
                 radius={25}
                 >
-                <Particle style={{transform: "scale(1.1)"}} opacity={70} position="absolute" top="0" left="0" fill interactive speed={1.5} density={100} size="2" intensity={20} mode="attract"/>
+                <ParticleFx style={{transform: "scale(1.1)"}} opacity={70} position="absolute" top="0" left="0" fill interactive speed={1.5} density={100} size="2" intensity={20} mode="attract"/>
               </Mask>
             </Row>
             <Column horizontal="center" gap="20">

package/ai/examples/blocks/manifest.json

@@ -69,9 +69,9 @@
     {
       "id": "Footer4",
       "file": "Footer4.tsx",
-      "title": "Premium footer with TypeFx + Particle",
+      "title": "Premium footer with TypeFx + ParticleFx",
       "tags": ["footer", "marketing", "effect"],
-      "components": ["Background", "Particle", "TypeFx", "Mask", "Avatar", "Tag"],
+      "components": ["Background", "ParticleFx", "TypeFx", "Mask", "Avatar", "Tag"],
       "patterns": ["animated wordmark", "particle decoration", "masked gradient"],
       "tasks": ["marketing-hero"],
       "standalone": true

package/ai/gotchas.json

@@ -76,6 +76,13 @@
       "Tag"
     ]
   },
+  "Timeline.notScrubber": {
+    "rule": "Timeline lays a sequence of steps down the page. For a video or audio editor's timeline — a playhead over stacked tracks of movable, trimmable blocks — use Scrubber. Do not build one out of Flex and absolute positioning.",
+    "components": [
+      "Timeline",
+      "Scrubber"
+    ]
+  },
   "color.tokens": {
     "rule": "Colors are semantic tokens ({scheme}-{weight}), never hex/rgb. background also accepts surface | overlay | page | transparent.",
     "components": [

package/ai/manifest.json

@@ -1,6 +1,6 @@
 {
- "version": "2.0.0-alpha.1",
- "generated": "2026-09-17",
+ "version": "2.0.0-alpha.2",
+ "generated": "2026-09-23",
  "files": {
   "spec": "spec.json",
   "catalog": "catalog.json",

package/ai/rules.md

@@ -117,7 +117,7 @@ If you can't ask (or the user says "you decide"), default to: restrained, center
 
 13. Use the distinctive features when the design calls for them — they exist and are cheap:
     - `Dialog` supports `stack` (stacked dialogs) and `base` props
-    - Effects: `RevealFx`, `LetterFx`, `TypeFx`, `CountFx`, `GlitchFx`, `HoloFx`, `TiltFx`, `FlipFx`, `MatrixFx`, `BlobFx`, `Particle`, `ShineFx`, `CelebrationFx`
+    - Effects: `RevealFx`, `LetterFx`, `TypeFx`, `CountFx`, `GlitchFx`, `HoloFx`, `TiltFx`, `FlipFx`, `MatrixFx`, `BlobFx`, `ParticleFx`, `ShineFx`, `CelebrationFx`
     - `CursorCard`, `HoverCard`, `ContextMenu`, `EmojiPicker`, `CompareImage`, `OgCard`, `Timeline`, `MasonryGrid`, `InfiniteScroll`, `SegmentedControl`, `Kbar` (command palette)
     - Forms: `Input`, `PasswordInput`, `OTPInput`, `NumberInput`, `TagInput`, `Select`, `DatePicker`, `DateRangePicker`, `ColorInput`, `Slider`, `Switch`, `Checkbox`, `Chip`
 

package/ai/spec.json

@@ -1,7 +1,7 @@
 {
  "name": "@once-ui-system/core",
- "version": "2.0.0-alpha.1",
- "generated": "2026-09-17",
+ "version": "2.0.0-alpha.2",
+ "generated": "2026-09-23",
  "format": "props are 'type', 'type = default', or '!type' (required). Components with 'mixins' also accept all props of those mixins. 'extends' means all props of that component are accepted. In 'types', an array lists a union's allowed values, an object gives a shape's fields in the same notation as props, and a string is the type as written — usually pointing at a component whose props are already listed.",
  "tokens": {
   "StaticSpacingToken": "\"0\" | \"1\" | \"2\" | \"4\" | \"8\" | \"12\" | \"16\" | \"20\" | \"24\" | \"32\" | \"40\" | \"48\" | \"56\" | \"64\" | \"72\" | \"80\" | \"104\" | \"128\" | \"160\"",
@@ -1180,6 +1180,7 @@
    "props": {
     "variant": "\"info\" | \"danger\" | \"warning\" | \"success\" = info",
     "showIcon": "boolean = true",
+    "icon": "IconName",
     "title": "string",
     "description": "string",
     "showCloseButton": "boolean = false",
@@ -1233,6 +1234,19 @@
     "style": "React.CSSProperties"
    }
   },
+  "Form": {
+   "group": "components",
+   "props": {
+    "density": "\"stacked\" | \"tight\" | \"spacious\" = tight",
+    "columns": "FormColumns",
+    "size": "TShirtSizes",
+    "as": "\"div\" | \"form\" = div",
+    "onSubmit": "React.FormEventHandler<HTMLFormElement>",
+    "className": "string",
+    "style": "React.CSSProperties",
+    "children": "React.ReactNode"
+   }
+  },
   "GlitchFx": {
    "group": "components",
    "extends": [
@@ -1436,7 +1450,7 @@
     "id": "!string",
     "label": "string",
     "placeholder": "string",
-    "size": "TShirtSizes = m",
+    "size": "TShirtSizes",
     "error": "boolean = false",
     "errorMessage": "ReactNode",
     "description": "ReactNode",
@@ -1450,7 +1464,8 @@
     "characterCount": "boolean",
     "cursor": "undefined | \"interactive\"",
     "validate": "(value: ReactNode) => ReactNode | null",
-    "loading": "boolean = false"
+    "loading": "boolean = false",
+    "span": "number"
    }
   },
   "InteractiveDetails": {
@@ -1782,7 +1797,7 @@
     "autoFocus": "boolean = false"
    }
   },
-  "Particle": {
+  "ParticleFx": {
    "group": "components",
    "extends": [
     "Flex"
@@ -1960,7 +1975,15 @@
    ],
    "props": {
     "items": "!React.ReactNode[]",
-    "controlPlacement": "\"top-start\" | \"top-center\" | \"top-end\" | \"top-between\" | \"bottom-start\" | \"bottom-center\" | \"bottom-end\" | \"bottom-between\" = top-start"
+    "controlPlacement": "ScrollContainerControlPlacement = top-start",
+    "infinite": "boolean = false",
+    "markers": "boolean | \"top\" | \"bottom\" = false",
+    "draggable": "boolean = true",
+    "step": "number = 1",
+    "clip": "boolean = false",
+    "proximity": "boolean | number = false",
+    "active": "number",
+    "onActiveChange": "(index: number) => void"
    }
   },
   "ScrollToTop": {
@@ -2295,7 +2318,7 @@
     "label": "string",
     "placeholder": "string",
     "lines": "number | \"auto\" = auto",
-    "size": "TShirtSizes = m",
+    "size": "TShirtSizes",
     "error": "boolean = false",
     "errorMessage": "ReactNode",
     "description": "ReactNode",
@@ -2308,7 +2331,8 @@
     "characterCount": "boolean",
     "resize": "\"horizontal\" | \"vertical\" | \"both\" | \"none\" = vertical",
     "validate": "(value: ReactNode) => ReactNode | null",
-    "disabled": "boolean = false"
+    "disabled": "boolean = false",
+    "span": "number"
    }
   },
   "TiltFx": {
@@ -2445,7 +2469,8 @@
     "StyleProps"
    ],
    "props": {
-    "collapsed": "boolean"
+    "collapsed": "boolean",
+    "direction": "\"row\" | \"column\" = row"
    }
   },
   "User": {
@@ -2521,7 +2546,7 @@
     "blob": "Omit<React.ComponentProps<typeof BlobFx>, \"children\">",
     "matrix": "Omit<React.ComponentProps<typeof MatrixFx>, \"children\">",
     "weather": "Omit<React.ComponentProps<typeof WeatherFx>, \"children\">",
-    "particle": "Omit<React.ComponentProps<typeof Particle>, \"children\">",
+    "particle": "Omit<React.ComponentProps<typeof ParticleFx>, \"children\">",
     "celebration": "Omit<React.ComponentProps<typeof CelebrationFx>, \"children\">",
     "children": "React.ReactNode"
    }

package/dist/ai/catalog.json

@@ -1,6 +1,6 @@
 {
- "version": "2.0.0-alpha.1",
- "generated": "2026-09-17",
+ "version": "2.0.0-alpha.2",
+ "generated": "2026-09-23",
  "components": {
   "Accordion": {
    "group": "components",
@@ -430,6 +430,13 @@
     "components"
    ]
   },
+  "Form": {
+   "group": "components",
+   "purpose": "Form component",
+   "tags": [
+    "components"
+   ]
+  },
   "GlitchFx": {
    "group": "components",
    "extends": [
@@ -683,12 +690,12 @@
     "components"
    ]
   },
-  "Particle": {
+  "ParticleFx": {
    "group": "components",
    "extends": [
     "Flex"
    ],
-   "purpose": "Particle component",
+   "purpose": "ParticleFx component",
    "tags": [
     "components"
    ]

package/dist/ai/components/Effect.json

@@ -20,7 +20,7 @@
   "blob": "Omit<React.ComponentProps<typeof BlobFx>, \"children\">",
   "matrix": "Omit<React.ComponentProps<typeof MatrixFx>, \"children\">",
   "weather": "Omit<React.ComponentProps<typeof WeatherFx>, \"children\">",
-  "particle": "Omit<React.ComponentProps<typeof Particle>, \"children\">",
+  "particle": "Omit<React.ComponentProps<typeof ParticleFx>, \"children\">",
   "celebration": "Omit<React.ComponentProps<typeof CelebrationFx>, \"children\">",
   "children": "React.ReactNode"
  },

package/dist/ai/components/Feedback.json

@@ -15,6 +15,7 @@
  "props": {
   "variant": "\"info\" | \"danger\" | \"warning\" | \"success\" = info",
   "showIcon": "boolean = true",
+  "icon": "IconName",
   "title": "string",
   "description": "string",
   "showCloseButton": "boolean = false",

package/dist/ai/components/Form.json

@@ -0,0 +1,15 @@
+{
+ "name": "Form",
+ "group": "components",
+ "props": {
+  "density": "\"stacked\" | \"tight\" | \"spacious\" = tight",
+  "columns": "FormColumns",
+  "size": "TShirtSizes",
+  "as": "\"div\" | \"form\" = div",
+  "onSubmit": "React.FormEventHandler<HTMLFormElement>",
+  "className": "string",
+  "style": "React.CSSProperties",
+  "children": "React.ReactNode"
+ },
+ "mixinsRef": []
+}

package/dist/ai/components/Input.json

@@ -5,7 +5,7 @@
   "id": "!string",
   "label": "string",
   "placeholder": "string",
-  "size": "TShirtSizes = m",
+  "size": "TShirtSizes",
   "error": "boolean = false",
   "errorMessage": "ReactNode",
   "description": "ReactNode",
@@ -19,7 +19,8 @@
   "characterCount": "boolean",
   "cursor": "undefined | \"interactive\"",
   "validate": "(value: ReactNode) => ReactNode | null",
-  "loading": "boolean = false"
+  "loading": "boolean = false",
+  "span": "number"
  },
  "mixinsRef": []
 }

package/dist/ai/components/{Particle.json → ParticleFx.json}

@@ -1,5 +1,5 @@
 {
- "name": "Particle",
+ "name": "ParticleFx",
  "group": "components",
  "extends": [
   "Flex"

package/dist/ai/components/ScrollContainer.json

@@ -15,7 +15,15 @@
  ],
  "props": {
   "items": "!React.ReactNode[]",
-  "controlPlacement": "\"top-start\" | \"top-center\" | \"top-end\" | \"top-between\" | \"bottom-start\" | \"bottom-center\" | \"bottom-end\" | \"bottom-between\" = top-start"
+  "controlPlacement": "ScrollContainerControlPlacement = top-start",
+  "infinite": "boolean = false",
+  "markers": "boolean | \"top\" | \"bottom\" = false",
+  "draggable": "boolean = true",
+  "step": "number = 1",
+  "clip": "boolean = false",
+  "proximity": "boolean | number = false",
+  "active": "number",
+  "onActiveChange": "(index: number) => void"
  },
  "mixinsRef": [
   "CommonProps",

package/dist/ai/components/Textarea.json

@@ -6,7 +6,7 @@
   "label": "string",
   "placeholder": "string",
   "lines": "number | \"auto\" = auto",
-  "size": "TShirtSizes = m",
+  "size": "TShirtSizes",
   "error": "boolean = false",
   "errorMessage": "ReactNode",
   "description": "ReactNode",
@@ -19,7 +19,8 @@
   "characterCount": "boolean",
   "resize": "\"horizontal\" | \"vertical\" | \"both\" | \"none\" = vertical",
   "validate": "(value: ReactNode) => ReactNode | null",
-  "disabled": "boolean = false"
+  "disabled": "boolean = false",
+  "span": "number"
  },
  "mixinsRef": []
 }

package/dist/ai/components/ThemeSwitcher.json

@@ -14,7 +14,8 @@
   "StyleProps"
  ],
  "props": {
-  "collapsed": "boolean"
+  "collapsed": "boolean",
+  "direction": "\"row\" | \"column\" = row"
  },
  "mixinsRef": [
   "CommonProps",

package/dist/ai/examples/blocks/manifest.json

@@ -69,9 +69,9 @@
     {
       "id": "Footer4",
       "file": "Footer4.tsx",
-      "title": "Premium footer with TypeFx + Particle",
+      "title": "Premium footer with TypeFx + ParticleFx",
       "tags": ["footer", "marketing", "effect"],
-      "components": ["Background", "Particle", "TypeFx", "Mask", "Avatar", "Tag"],
+      "components": ["Background", "ParticleFx", "TypeFx", "Mask", "Avatar", "Tag"],
       "patterns": ["animated wordmark", "particle decoration", "masked gradient"],
       "tasks": ["marketing-hero"],
       "standalone": true

package/dist/ai/gotchas.json

@@ -76,6 +76,13 @@
       "Tag"
     ]
   },
+  "Timeline.notScrubber": {
+    "rule": "Timeline lays a sequence of steps down the page. For a video or audio editor's timeline — a playhead over stacked tracks of movable, trimmable blocks — use Scrubber. Do not build one out of Flex and absolute positioning.",
+    "components": [
+      "Timeline",
+      "Scrubber"
+    ]
+  },
   "color.tokens": {
     "rule": "Colors are semantic tokens ({scheme}-{weight}), never hex/rgb. background also accepts surface | overlay | page | transparent.",
     "components": [

package/dist/ai/manifest.json

@@ -1,6 +1,6 @@
 {
- "version": "2.0.0-alpha.1",
- "generated": "2026-09-17",
+ "version": "2.0.0-alpha.2",
+ "generated": "2026-09-23",
  "files": {
   "spec": "spec.json",
   "catalog": "catalog.json",

package/dist/ai/rules.md

@@ -117,7 +117,7 @@ If you can't ask (or the user says "you decide"), default to: restrained, center
 
 13. Use the distinctive features when the design calls for them — they exist and are cheap:
     - `Dialog` supports `stack` (stacked dialogs) and `base` props
-    - Effects: `RevealFx`, `LetterFx`, `TypeFx`, `CountFx`, `GlitchFx`, `HoloFx`, `TiltFx`, `FlipFx`, `MatrixFx`, `BlobFx`, `Particle`, `ShineFx`, `CelebrationFx`
+    - Effects: `RevealFx`, `LetterFx`, `TypeFx`, `CountFx`, `GlitchFx`, `HoloFx`, `TiltFx`, `FlipFx`, `MatrixFx`, `BlobFx`, `ParticleFx`, `ShineFx`, `CelebrationFx`
     - `CursorCard`, `HoverCard`, `ContextMenu`, `EmojiPicker`, `CompareImage`, `OgCard`, `Timeline`, `MasonryGrid`, `InfiniteScroll`, `SegmentedControl`, `Kbar` (command palette)
     - Forms: `Input`, `PasswordInput`, `OTPInput`, `NumberInput`, `TagInput`, `Select`, `DatePicker`, `DateRangePicker`, `ColorInput`, `Slider`, `Switch`, `Checkbox`, `Chip`