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

package/AGENTS.md

@@ -47,7 +47,7 @@ If you cannot read `node_modules`, use the docs host (may not match your install
 
 - Use `Column` / `Row`, not `Flex` unless direction changes at breakpoints
 - Use `fill`, not `fillWidth fillHeight`; use `center`, not `horizontal="center" vertical="center"`
-- Static panels: `Column background="surface" border="neutral-alpha-weak" radius="l" padding="24"`
+- Static panels: `Column background="surface" border radius="l" padding="24"`
 - `Card` is interactive only (`href` or `onClick`)
 
 Full rules: `@once-ui-system/core/ai/rules.compact.md`

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2026 Dopler
+
+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/ai/catalog.json

@@ -1,6 +1,6 @@
 {
- "version": "2.0.0-alpha.0",
- "generated": "2026-09-16",
+ "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/eval-tasks.md

@@ -25,7 +25,8 @@ is found in the wild.
 Mechanical (count occurrences):
 
 - [ ] Compiles / no invented props or components
-- [ ] Redundant-default props (`position="relative"`, `variant="primary"` on Button, ...) — target: 0
+- [ ] Redundant-default props (`position="relative"`, `variant="primary"` on Button, `fillWidth` beside `maxWidth`, `minWidth={0}` beside `fillWidth`, `border="neutral-alpha-weak"` for the default border, ...) — target: 0
+- [ ] `zIndex` outside an isolated stacking group (nothing absolute/fixed/sticky nearby) — target: 0
 - [ ] Shorthand violations (`fillWidth fillHeight` instead of `fill`, `horizontal+vertical center` instead of `center`, `Flex direction=` instead of `Row`/`Column`) — target: 0
 - [ ] `style={{}}` uses where a token prop exists — target: 0
 - [ ] Raw HTML elements where a component exists (`img`, `a`, `button`) — target: 0

package/ai/examples/auth.tsx

@@ -22,11 +22,10 @@ export function AuthExample() {
   return (
     <Column as="main" fillWidth center padding="24" minHeight="100vh">
       <Grid
-        fillWidth
         maxWidth="l"
         columns="2"
         radius="xl"
-        border="neutral-alpha-weak"
+        border
         overflow="hidden"
         background="surface"
         s={{ columns: 1 }}

package/ai/examples/blocks/Dashboard1.tsx

@@ -37,7 +37,7 @@ const StatCard: React.FC<StatCardProps> = ({ title, value, change, positive = tr
   }, [positive]);
 
   return (
-    <Card minWidth={12} href={href} paddingX="20" paddingTop="20" paddingBottom="80" radius="l" fillWidth direction="column" border="neutral-alpha-weak" background="transparent">
+    <Card minWidth={12} href={href} paddingX="20" paddingTop="20" paddingBottom="80" radius="l" fillWidth direction="column" border background="transparent">
       <LineChart
         pointerEvents="none"
         position="absolute"
@@ -82,7 +82,7 @@ interface ActivityItemProps {
 }
 
 const ActivityItem: React.FC<ActivityItemProps> = ({ avatar, action, time, href, icon }) => (
-  <Row fillWidth borderBottom="neutral-alpha-weak">
+  <Row fillWidth borderBottom>
     <Card direction="column" fitHeight href={href} background="transparent" border="transparent" fillWidth>
       <Row fillWidth horizontal="between" paddingX="24" height="64" vertical="center">
         <Column fillWidth gap="8">
@@ -110,7 +110,7 @@ interface StatusItemProps {
 }
 
 const StatusItem: React.FC<StatusItemProps> = ({ name, status, icon, href = "#" }) => (
-  <Row fillWidth borderBottom="neutral-alpha-weak">
+  <Row fillWidth borderBottom>
     <Card direction="column" background="transparent" href={href} border="transparent" fillWidth>
       <Row fillWidth horizontal="between" height="64" vertical="center" paddingX="24">
         <Row vertical="center" gap="12">
@@ -240,7 +240,7 @@ export const Dashboard1: React.FC = () => {
 
                 <LineChart
                   minHeight={20}
-                  border="neutral-alpha-weak"
+                  border
                   axis="x"
                   grid="y"
                   title="Revenue growth"
@@ -277,7 +277,7 @@ export const Dashboard1: React.FC = () => {
                 />
 
                 <Grid columns="2" m={{columns: 1}} gap="m" fillWidth>
-                  <Column fillWidth border="neutral-alpha-weak" radius="l" overflow="hidden" height={20}>
+                  <Column fillWidth border radius="l" overflow="hidden" height={20}>
                     <Row vertical="center" horizontal="between" fillWidth paddingLeft="24" paddingRight="12" paddingY="12" gap="m" wrap>
                       <Heading wrap="nowrap" variant="heading-strong-s">
                         Project status
@@ -295,7 +295,7 @@ export const Dashboard1: React.FC = () => {
                       </Row>
                     </Row>
                     
-                    <Column fillWidth border="neutral-alpha-weak" topRadius="l" overflowY="auto">
+                    <Column fillWidth border topRadius="l" overflowY="auto">
                       {[
                         { name: "Mobile App Development", status: "At Risk", icon: "code" as IconName },
                         { name: "Marketing Campaign", status: "On Track", icon: "sparkle" as IconName },
@@ -314,7 +314,7 @@ export const Dashboard1: React.FC = () => {
                     </Column>
                   </Column>
 
-                  <Column border="neutral-alpha-weak" radius="l" fillWidth overflow="hidden" height={20}>
+                  <Column border radius="l" fillWidth overflow="hidden" height={20}>
                     <Row fillWidth vertical="center" horizontal="between" paddingLeft="24" paddingRight="12" paddingY="12" gap="16" wrap>
                       <Heading wrap="nowrap" variant="heading-strong-s">
                         Recent activity
@@ -323,7 +323,7 @@ export const Dashboard1: React.FC = () => {
                         View all
                       </Button>
                     </Row>
-                    <Column fillWidth border="neutral-alpha-weak" topRadius="l" overflowY="auto">
+                    <Column fillWidth border topRadius="l" overflowY="auto">
                       {[
                         {
                           avatar: "/images/creators/lorant.jpg",

package/ai/examples/blocks/Feed3.tsx

@@ -34,7 +34,7 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
 
   return (
     <Column fill {...flex}>
-      <Row fillWidth paddingX="24" paddingY="8" background="surface" borderBottom="neutral-alpha-weak" vertical="center" gap="12">
+      <Row fillWidth paddingX="24" paddingY="8" background="surface" borderBottom vertical="center" gap="12">
         <Text variant="label-default-s">👋 | intro</Text>
         <Row minWidth="4" minHeight="4" background="neutral-strong" radius="full"/>
         <Text variant="body-default-xs" onBackground="neutral-weak">Let us know a bit about you!</Text>
@@ -65,7 +65,7 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
                               key={aIdx}
                               maxWidth={20}
                               src={att.media}
-                              border="neutral-alpha-weak"
+                              border
                               radius="l"
                               sizes="320px"
                             />
@@ -75,9 +75,9 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
                     ) : (
                       messages.attachments[0]?.media && (
                         messages.attachments[0].media.includes("youtube.com") || messages.attachments[0].media.includes("youtu.be") ? (
-                          <Media maxWidth={32} border="neutral-alpha-weak" aspectRatio="16/9" marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
+                          <Media maxWidth={32} border aspectRatio="16/9" marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
                         ) : (messages.attachments[0].media.match(/\.(png|jpg|jpeg|gif|webp)$/i)) ? (
-                          <Media maxWidth={32} border="neutral-alpha-weak" marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
+                          <Media maxWidth={32} border marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
                         ) : (
                           <Row maxWidth={24} marginTop="16">
                             <OgCard url={messages.attachments[0].media} description={false} />

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/Header2.tsx

@@ -29,7 +29,7 @@ export const Header2: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
       />
       <Row
         as="header"
-        border="neutral-alpha-weak"
+        border
         maxWidth="m"
         paddingX="m"
         radius="l"

package/ai/examples/blocks/Header4.tsx

@@ -39,8 +39,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
             <Row
               data-scaling="90"
               position="absolute"
-              vertical="center"
-              horizontal="center"
+              center
               textVariant="body-default-xs"
               solid="brand-strong"
               onSolid="brand-strong"

package/ai/examples/blocks/Productivity1.tsx

@@ -237,7 +237,7 @@ export const Productivity1 = () => {
             <Column
               key={index}
               minWidth={20}
-              border="neutral-alpha-weak"
+              border
               fillWidth
               paddingX="4"
               radius="m-4"

package/ai/examples/blocks/Roadmap1.tsx

@@ -79,7 +79,7 @@ export function Roadmap1() {
           
           <Row gap="4" fillWidth overflowX="auto" paddingBottom="16">
             {product.columns.map((column, columnIndex) => (
-              <Column key={columnIndex} padding="4" gap="4" radius="s-4" border="neutral-alpha-weak" background="overlay" fillWidth minWidth={20}>
+              <Column key={columnIndex} padding="4" gap="4" radius="s-4" border background="overlay" fillWidth minWidth={20}>
                 <Row fillWidth vertical="center" gap="8" paddingY="8" paddingX="16">
                   <Text variant="label-default-m">
                     {column.title}
@@ -99,7 +99,7 @@ export function Roadmap1() {
                     return typedTask.href ? (
                       <Card
                         onBackground="neutral-strong"
-                        border="neutral-alpha-weak"
+                        border
                         fillWidth
                         radius="s"
                         key={taskIndex} 
@@ -111,7 +111,7 @@ export function Roadmap1() {
                     ) : (
                       <Column
                         onBackground="neutral-strong"
-                        border="neutral-alpha-weak"
+                        border
                         fillWidth
                         radius="s"
                         key={taskIndex}

package/ai/examples/blocks/Sidebar1.tsx

@@ -16,7 +16,7 @@ export const Sidebar1: React.FC<React.ComponentProps<typeof Column>> = ({ ...fle
     fillHeight
     maxWidth={18}
     background="surface"
-    borderRight="neutral-alpha-weak"
+    borderRight
     padding="8"
     gap="4"
     {...flex}

package/ai/examples/blocks/Sidebar2.tsx

@@ -4,7 +4,7 @@ import { Column, Text, ToggleButton } from "@once-ui-system/core";
 
 /** Productivity sidebar — minimal stub for Productivity1 reference */
 export const Sidebar2: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }) => (
-  <Column fillHeight maxWidth={18} background="surface" borderRight="neutral-alpha-weak" padding="8" gap="4" {...flex}>
+  <Column fillHeight maxWidth={18} background="surface" borderRight padding="8" gap="4" {...flex}>
     <Text variant="label-default-s" onBackground="neutral-weak" padding="12">
       Workspace
     </Text>

package/ai/examples/blocks/Table1.tsx

@@ -94,7 +94,7 @@ export const Table1: React.FC<Table1Props> = ({
   };
 
   return (
-    <Column fillWidth radius="l" border="neutral-alpha-weak" {...flex}>
+    <Column fillWidth radius="l" border {...flex}>
       <Row fillWidth horizontal="between" paddingY="12" paddingRight="12" paddingLeft="24" gap="16" vertical="center" s={{direction: "column",}}>
         <Row fillWidth gap="12" vertical="center" horizontal="between">
           {selectable && someCurrentSelected ? (
@@ -124,8 +124,8 @@ export const Table1: React.FC<Table1Props> = ({
         )}
       </Row>
       <Column fillWidth overflowX="auto">
-        <Column fillWidth radius="l" border="neutral-alpha-weak" overflow="hidden">
-          <Row fillWidth gap="16" paddingX="24" paddingY="12" borderBottom="neutral-alpha-weak">
+        <Column fillWidth radius="l" border overflow="hidden">
+          <Row fillWidth gap="16" paddingX="24" paddingY="12" borderBottom>
             {selectable && (
               <Row textVariant="label-default-s" vertical="center" gap="16">
                 <Checkbox

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/examples/dashboard.tsx

@@ -55,7 +55,7 @@ export function DashboardExample() {
 
   return (
     <Column as="main" fillWidth horizontal="center" paddingY="48" paddingX="24" gap="40">
-      <Column fillWidth maxWidth="l" gap="40">
+      <Column maxWidth="l" gap="40">
         <Row fillWidth horizontal="between" vertical="end" gap="24" s={{ direction: "column", horizontal: "start" }}>
           <Column gap="8">
             <Text variant="label-default-s" onBackground="brand-medium">
@@ -79,7 +79,7 @@ export function DashboardExample() {
         <Grid ref={statsRef} columns="4" gap="16" m={{ columns: 2 }} s={{ columns: 1 }}>
           {stats.map((stat, index) => (
             <RevealFx key={stat.label} fill revealed={seen} translateY="8" delay={index * 100}>
-              <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16">
+              <Column background="surface" border radius="l" padding="24" gap="16">
                 <Row fillWidth horizontal="between" vertical="center">
                   <Text variant="label-default-s" onBackground="neutral-weak">
                     {stat.label}
@@ -109,7 +109,7 @@ export function DashboardExample() {
         </Grid>
 
         <Grid columns="2" gap="24" s={{ columns: 1 }}>
-          <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16" minHeight={32}>
+          <Column background="surface" border radius="l" padding="24" gap="16" minHeight={32}>
             <Heading as="h2" variant="heading-strong-s">
               Revenue trend
             </Heading>
@@ -120,7 +120,7 @@ export function DashboardExample() {
               </Text>
             </Column>
           </Column>
-          <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16" minHeight={32}>
+          <Column background="surface" border radius="l" padding="24" gap="16" minHeight={32}>
             <Heading as="h2" variant="heading-strong-s">
               Signups by channel
             </Heading>
@@ -133,7 +133,7 @@ export function DashboardExample() {
           </Column>
         </Grid>
 
-        <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+        <Column background="surface" border radius="l" padding="24" gap="24">
           <Row fillWidth horizontal="between" vertical="center">
             <Heading as="h2" variant="heading-strong-s">
               Recent activity

package/ai/examples/marketing-hero.tsx

@@ -103,7 +103,7 @@ export function MarketingHeroExample() {
 
       {/* Feature grid — left-aligned section header, not repeated centered blocks */}
       <Column fillWidth horizontal="center">
-        <Column fillWidth maxWidth="l" gap="40">
+        <Column maxWidth="l" gap="40">
           <Column gap="12" maxWidth={32}>
             <Text variant="label-default-s" onBackground="brand-medium">
               Components
@@ -117,7 +117,7 @@ export function MarketingHeroExample() {
               <Column
                 key={feature.title}
                 background="surface"
-                border="neutral-alpha-weak"
+                border
                 radius="l"
                 padding="24"
                 gap="16"

package/ai/examples/pricing.tsx

@@ -95,7 +95,7 @@ export function PricingExample() {
       </Column>
 
       <Column fillWidth horizontal="center">
-        <Column fillWidth maxWidth="l" gap="40">
+        <Column maxWidth="l" gap="40">
           <Row fillWidth horizontal="between" vertical="end" gap="24" s={{ direction: "column", horizontal: "start" }}>
             <Heading as="h2" variant="display-strong-xs">
               Three plans, one decision
@@ -181,7 +181,7 @@ export function PricingExample() {
       </Column>
 
       <Column fillWidth horizontal="center" background="neutral-alpha-weak" paddingY="80" paddingX="24">
-        <Column fillWidth maxWidth="l" gap="40">
+        <Column maxWidth="l" gap="40">
           <Heading as="h2" variant="display-strong-xs">
             Every feature, side by side
           </Heading>
@@ -203,7 +203,7 @@ export function PricingExample() {
       </Column>
 
       <Column fillWidth horizontal="center">
-        <Column fillWidth maxWidth="l" radius="xl" border="neutral-alpha-weak" overflow="hidden" padding="64" center>
+        <Column maxWidth="l" radius="xl" border overflow="hidden" padding="64" center>
           <BlobFx position="absolute" top="0" left="0" fill opacity={60} seed={2} />
           <Column zIndex={1} center gap="24" maxWidth={40}>
             <Heading as="h2" variant="display-strong-s" align="center">

package/ai/examples/settings.tsx

@@ -29,7 +29,7 @@ const sections = [
 export function SettingsExample() {
   return (
     <Column as="main" fillWidth horizontal="center" paddingY="48" paddingX="24">
-      <Column fillWidth maxWidth="l" gap="40">
+      <Column maxWidth="l" gap="40">
         <Column gap="12">
           <Text variant="label-default-s" onBackground="brand-medium">
             Settings
@@ -46,7 +46,7 @@ export function SettingsExample() {
               gap="4"
               padding="16"
               background="surface"
-              border="neutral-alpha-weak"
+              border
               radius="l"
               s={{ hide: true }}
             >
@@ -66,7 +66,7 @@ export function SettingsExample() {
           }
           rightPanel={
             <Column flex={1} gap="24">
-            <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+            <Column background="surface" border radius="l" padding="24" gap="24">
               <Heading as="h2" variant="heading-strong-m">
                 Profile
               </Heading>
@@ -97,7 +97,7 @@ export function SettingsExample() {
               </Row>
             </Column>
 
-            <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+            <Column background="surface" border radius="l" padding="24" gap="24">
               <Heading as="h2" variant="heading-strong-m">
                 Notifications
               </Heading>

package/ai/gotchas.json

@@ -20,7 +20,7 @@
     ]
   },
   "Card.interactive": {
-    "rule": "Card is for interactive surfaces only (href or onClick). Static panels use Column + background=\"surface\" border=\"neutral-alpha-weak\" radius=\"l\".",
+    "rule": "Card is for interactive surfaces only (href or onClick). Static panels use Column + background=\"surface\" border radius=\"l\".",
     "components": [
       "Card"
     ]
@@ -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": [
@@ -101,13 +108,30 @@
     ]
   },
   "layout.defaults": {
-    "rule": "Never write props equal to defaults: position=\"relative\", direction on Row/Column, variant=\"primary\" on Button.",
+    "rule": "Never write props equal to defaults or implied by another prop on the element: position=\"relative\", direction on Row/Column, variant=\"primary\" on Button, fillWidth beside maxWidth (maxWidth already fills the width), minWidth={0} beside fillWidth (fillWidth already sets min-width: 0).",
     "components": [
       "Row",
       "Column",
+      "Grid",
       "Button"
     ]
   },
+  "border.default": {
+    "rule": "Bare border (and borderTop, borderBottom, borderX, …) draws the default border. Do not write border=\"neutral-alpha-weak\" to get it; name a colour only to deviate, e.g. border=\"brand-alpha-medium\".",
+    "components": [
+      "Row",
+      "Column",
+      "Card"
+    ]
+  },
+  "zIndex.scope": {
+    "rule": "zIndex is for an isolated stacking group: an absolute decorative layer and its content sibling (zIndex={1}), or a sticky header over its pane. Never on a lone element, never a page-wide ladder of 3 / 5 / 9 — restructure the tree instead.",
+    "components": [
+      "Row",
+      "Column",
+      "Background"
+    ]
+  },
   "section.gaps": {
     "rule": "Gap between page sections: 80–160 (typical 104). Inside sections: 24–40.",
     "components": [

package/ai/manifest.json

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