@once-ui-system/core 1.7.11 → 1.7.13

package/ai/examples/pricing.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+/**
+ * Gold example: pricing
+ * Target: three tiers, highlighted middle, comparison table, split FAQ, ambient CTA
+ */
+import { useEffect, useRef, useState } from "react";
+import {
+  AccordionGroup,
+  Background,
+  BlobFx,
+  Button,
+  Column,
+  CountFx,
+  Grid,
+  Heading,
+  Icon,
+  MatrixFx,
+  RevealFx,
+  Row,
+  SegmentedControl,
+  Table,
+  Tag,
+  Text,
+  useInViewport,
+} from "@once-ui-system/core";
+
+type Billing = "monthly" | "yearly";
+
+const tiers = [
+  {
+    name: "Starter",
+    description: "For solo builders shipping their first product.",
+    price: { monthly: 19, yearly: 15 },
+    features: ["3 projects", "5 team members", "Core analytics"],
+    cta: "Start with Starter",
+  },
+  {
+    name: "Pro",
+    description: "For growing teams that need speed and depth.",
+    price: { monthly: 49, yearly: 39 },
+    features: ["Unlimited projects", "25 team members", "API access", "Priority support"],
+    cta: "Start free trial",
+    highlighted: true,
+  },
+  {
+    name: "Enterprise",
+    description: "For organizations with security and scale requirements.",
+    features: ["Unlimited everything", "SSO / SAML", "Dedicated success manager"],
+    cta: "Talk to sales",
+  },
+];
+
+export function PricingExample() {
+  const [billing, setBilling] = useState<Billing>("monthly");
+  const tiersRef = useRef<HTMLDivElement>(null);
+  const tiersInViewport = useInViewport(tiersRef);
+  const [tiersSeen, setTiersSeen] = useState(false);
+  useEffect(() => {
+    if (tiersInViewport) setTiersSeen(true);
+  }, [tiersInViewport]);
+
+  return (
+    <Column as="main" fillWidth horizontal="center" gap="104" paddingBottom="104">
+      <Column fillWidth center overflow="hidden" paddingY="80">
+        <MatrixFx
+          position="absolute"
+          top="0"
+          left="0"
+          fill
+          flicker
+          size={1.5}
+          spacing={8}
+          colors={["brand-solid-strong"]}
+          bulge={{ type: "wave", duration: 3, intensity: 20, repeat: true }}
+        />
+        <Background
+          position="absolute"
+          top="0"
+          left="0"
+          fill
+          pointerEvents="none"
+          gradient={{ display: true, colorStart: "page-background", x: 0, y: 50, width: 150, height: 300 }}
+        />
+        <Column zIndex={1} center gap="24" padding="48" maxWidth={48}>
+          <Text variant="label-default-s" onBackground="brand-medium">
+            Pricing
+          </Text>
+          <Heading as="h1" variant="display-strong-xl" align="center">
+            Pay for momentum, not seats
+          </Heading>
+          <Text variant="body-default-l" onBackground="neutral-weak" align="center">
+            Start free, scale when you're ready.
+          </Text>
+        </Column>
+      </Column>
+
+      <Column fillWidth horizontal="center">
+        <Column fillWidth 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
+            </Heading>
+            <SegmentedControl
+              selected={billing}
+              onToggle={(value) => setBilling(value as Billing)}
+              buttons={[
+                { value: "monthly", label: "Monthly" },
+                { value: "yearly", label: "Yearly −20%" },
+              ]}
+            />
+          </Row>
+
+          <Grid ref={tiersRef} columns="3" gap="24" s={{ columns: 1 }}>
+            {tiers.map((tier, index) => (
+              <RevealFx key={tier.name} fill trigger={tiersSeen} translateY="8" delay={index * 0.1}>
+                <Column
+                  fill
+                  background="surface"
+                  border={tier.highlighted ? "brand-alpha-medium" : "neutral-alpha-weak"}
+                  radius="l"
+                  padding="32"
+                  overflow="hidden"
+                >
+                  {tier.highlighted && (
+                    <Background
+                      position="absolute"
+                      top="0"
+                      left="0"
+                      fill
+                      pointerEvents="none"
+                      gradient={{
+                        display: true,
+                        colorStart: "brand-alpha-medium",
+                        colorEnd: "static-transparent",
+                        x: 50,
+                        y: 0,
+                        width: 200,
+                        height: 60,
+                        opacity: 50,
+                      }}
+                    />
+                  )}
+                  <Column zIndex={1} fill gap="24">
+                    <Row fillWidth horizontal="between" vertical="center">
+                      <Heading as="h3" variant="heading-strong-m">
+                        {tier.name}
+                      </Heading>
+                      {tier.highlighted && <Tag variant="brand" size="s" label="Most popular" />}
+                    </Row>
+                    <Text variant="body-default-s" onBackground="neutral-weak">
+                      {tier.description}
+                    </Text>
+                    {tier.price ? (
+                      <Row vertical="end" gap="2">
+                        <Text variant="display-strong-s">$</Text>
+                        <CountFx variant="display-strong-s" value={tier.price[billing]} effect="wheel" speed={400} />
+                        <Text variant="label-default-s" onBackground="neutral-weak" paddingBottom="4" paddingLeft="4">
+                          / mo
+                        </Text>
+                      </Row>
+                    ) : (
+                      <Text variant="display-strong-s">Custom</Text>
+                    )}
+                    <Column flex={1} gap="12">
+                      {tier.features.map((feature) => (
+                        <Row key={feature} gap="12" vertical="center">
+                          <Icon name="checkbox" size="xs" onBackground="brand-medium" />
+                          <Text variant="body-default-s">{feature}</Text>
+                        </Row>
+                      ))}
+                    </Column>
+                    <Button fillWidth variant={tier.highlighted ? "primary" : "secondary"} arrowIcon={tier.highlighted}>
+                      {tier.cta}
+                    </Button>
+                  </Column>
+                </Column>
+              </RevealFx>
+            ))}
+          </Grid>
+        </Column>
+      </Column>
+
+      <Column fillWidth horizontal="center" background="neutral-alpha-weak" paddingY="80" paddingX="24">
+        <Column fillWidth maxWidth="l" gap="40">
+          <Heading as="h2" variant="display-strong-xs">
+            Every feature, side by side
+          </Heading>
+          <Table
+            fillWidth
+            data={{
+              headers: [
+                { content: "Feature", key: "feature" },
+                { content: "Starter", key: "starter" },
+                { content: "Pro", key: "pro" },
+              ],
+              rows: [
+                ["Projects", "3", "Unlimited"],
+                ["API access", "—", "✓"],
+              ],
+            }}
+          />
+        </Column>
+      </Column>
+
+      <Column fillWidth horizontal="center">
+        <Column fillWidth maxWidth="l" radius="xl" border="neutral-alpha-weak" 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">
+              Ship your next launch on Pro
+            </Heading>
+            <Button arrowIcon>Start free trial</Button>
+          </Column>
+        </Column>
+      </Column>
+    </Column>
+  );
+}

package/ai/examples/settings.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+/**
+ * Gold example: settings
+ * Target: split layout with sidebar nav, profile form sections, danger zone
+ */
+import {
+  Avatar,
+  Button,
+  Checkbox,
+  Column,
+  Heading,
+  Input,
+  Line,
+  Row,
+  Select,
+  SplitView,
+  Switch,
+  Text,
+} from "@once-ui-system/core";
+
+const sections = [
+  { id: "profile", label: "Profile" },
+  { id: "account", label: "Account" },
+  { id: "notifications", label: "Notifications" },
+  { id: "billing", label: "Billing" },
+];
+
+export function SettingsExample() {
+  return (
+    <Column as="main" fillWidth horizontal="center" paddingY="48" paddingX="24">
+      <Column fillWidth maxWidth="l" gap="40">
+        <Column gap="12">
+          <Text variant="label-default-s" onBackground="brand-medium">
+            Settings
+          </Text>
+          <Heading as="h1" variant="display-strong-s">
+            Manage your workspace
+          </Heading>
+        </Column>
+
+        <SplitView fillWidth minHeight={48}>
+          <Column
+            width={20}
+            gap="4"
+            padding="16"
+            background="surface"
+            border="neutral-alpha-weak"
+            radius="l"
+            s={{ hide: true }}
+          >
+            {sections.map((section, index) => (
+              <Row
+                key={section.id}
+                padding="12"
+                radius="m"
+                background={index === 0 ? "neutral-alpha-weak" : undefined}
+                textVariant="label-default-s"
+                cursor="interactive"
+              >
+                {section.label}
+              </Row>
+            ))}
+          </Column>
+
+          <Column flex={1} gap="24">
+            <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+              <Heading as="h2" variant="heading-strong-m">
+                Profile
+              </Heading>
+              <Row gap="16" vertical="center">
+                <Avatar size="l" value="LO" />
+                <Column gap="8">
+                  <Button size="s" variant="secondary">
+                    Upload photo
+                  </Button>
+                  <Text variant="label-default-s" onBackground="neutral-weak">
+                    JPG or PNG, max 2 MB
+                  </Text>
+                </Column>
+              </Row>
+              <Input id="name" label="Display name" placeholder="Lorant One" />
+              <Input id="email" label="Email" placeholder="you@company.com" />
+              <Select
+                id="timezone"
+                label="Timezone"
+                options={[
+                  { value: "utc", label: "UTC" },
+                  { value: "est", label: "Eastern Time" },
+                ]}
+              />
+              <Row gap="12">
+                <Button>Save changes</Button>
+                <Button variant="secondary">Cancel</Button>
+              </Row>
+            </Column>
+
+            <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+              <Heading as="h2" variant="heading-strong-m">
+                Notifications
+              </Heading>
+              <Row fillWidth horizontal="between" vertical="center">
+                <Column gap="4">
+                  <Text variant="body-default-s">Product updates</Text>
+                  <Text variant="label-default-s" onBackground="neutral-weak">
+                    Release notes and changelog
+                  </Text>
+                </Column>
+                <Switch checked />
+              </Row>
+              <Line />
+              <Row fillWidth horizontal="between" vertical="center">
+                <Column gap="4">
+                  <Text variant="body-default-s">Marketing emails</Text>
+                  <Text variant="label-default-s" onBackground="neutral-weak">
+                    Tips, templates, and community highlights
+                  </Text>
+                </Column>
+                <Switch />
+              </Row>
+              <Checkbox label="Weekly digest" isChecked />
+            </Column>
+
+            <Column background="surface" border="danger-alpha-medium" radius="l" padding="24" gap="16">
+              <Heading as="h2" variant="heading-strong-m" onBackground="danger-medium">
+                Danger zone
+              </Heading>
+              <Text variant="body-default-s" onBackground="neutral-weak">
+                Permanently delete your workspace and all associated data.
+              </Text>
+              <Button variant="danger" size="s">
+                Delete workspace
+              </Button>
+            </Column>
+          </Column>
+        </SplitView>
+      </Column>
+    </Column>
+  );
+}

package/ai/gotchas.json

@@ -0,0 +1,85 @@
+{
+  "Background.gradient.width": {
+    "rule": "Quarter-percent units: 400 = 100% of container. Soft glows use width 100–200, not 500.",
+    "components": ["Background"]
+  },
+  "Background.gradient.x": {
+    "rule": "x/y are percent positions of the container (50/50 = center).",
+    "components": ["Background"]
+  },
+  "Background.absolute": {
+    "rule": "Every absolute decorative layer needs top=\"0\" left=\"0\" or it offsets by parent padding.",
+    "components": ["Background", "MatrixFx", "BlobFx"]
+  },
+  "Card.interactive": {
+    "rule": "Card is for interactive surfaces only (href or onClick). Static panels use Column + background=\"surface\" border=\"neutral-alpha-weak\" radius=\"l\".",
+    "components": ["Card"]
+  },
+  "Fade.edge": {
+    "rule": "Fade is an edge overlay strip on scroll containers, not a content wrapper.",
+    "components": ["Fade"]
+  },
+  "RevealFx.delay": {
+    "rule": "delay is in seconds — stagger with delay={index * 0.1}, never index * 80.",
+    "components": ["RevealFx"]
+  },
+  "RevealFx.translateY": {
+    "rule": "translateY as a number is in rem. Use translateY={1} or token \"16\" (1rem); 16 means 16rem.",
+    "components": ["RevealFx"]
+  },
+  "LogoCloud.columns": {
+    "rule": "LogoCloud extends Grid — always set columns and responsive overrides or logos stack in one column.",
+    "components": ["LogoCloud"]
+  },
+  "StatusIndicator.color": {
+    "rule": "StatusIndicator uses color=\"green\" | \"red\" | \"orange\" | \"gray\" etc. — not variant or semantic scheme names.",
+    "components": ["StatusIndicator"]
+  },
+    "rule": "Icon names must come from IconName in spec.json — never invent names like more, bell, arrowRight.",
+    "components": ["Icon", "Button", "IconButton"]
+  },
+  "Badge.duplicate": {
+    "rule": "Do not pass the same text as both title prop and children — it renders twice.",
+    "components": ["Badge"]
+  },
+  "Tag.duplicate": {
+    "rule": "Do not pass the same text as both label prop and children — it renders twice.",
+    "components": ["Tag"]
+  },
+  "color.tokens": {
+    "rule": "Colors are semantic tokens ({scheme}-{weight}), never hex/rgb. background also accepts surface | overlay | page | transparent.",
+    "components": ["Column", "Row", "Text", "Button"]
+  },
+  "color.background-weak": {
+    "rule": "*-background-weak is nearly the page color — invisible as accent. Use alpha tokens (brand-alpha-medium) for glows.",
+    "components": ["Background"]
+  },
+  "layout.shorthands": {
+    "rule": "Use fill not fillWidth fillHeight; center not horizontal=\"center\" vertical=\"center\"; Row/Column not Flex direction=.",
+    "components": ["Row", "Column", "Flex", "Grid"]
+  },
+  "layout.defaults": {
+    "rule": "Never write props equal to defaults: position=\"relative\", direction on Row/Column, variant=\"primary\" on Button.",
+    "components": ["Row", "Column", "Button"]
+  },
+  "section.gaps": {
+    "rule": "Gap between page sections: 80–160 (typical 104). Inside sections: 24–40.",
+    "components": ["Column"]
+  },
+  "heading.scale": {
+    "rule": "Hero = display-strong-l/xl; section titles = display-strong-xs/s — never heading-* for section titles.",
+    "components": ["Heading"]
+  },
+  "animation.budget": {
+    "rule": "Entry animation budget: hero + at most 1–2 key moments. Animate coherent blocks all-or-none within a sibling set.",
+    "components": ["RevealFx", "CountFx"]
+  },
+  "CountFx.trigger": {
+    "rule": "CountFx has no trigger prop — drive value from useInViewport latch instead.",
+    "components": ["CountFx"]
+  },
+  "overflow.hero": {
+    "rule": "overflow=\"hidden\" on full-bleed sections clips glows into hard bands — only use when parent has radius.",
+    "components": ["Column", "Background"]
+  }
+}

package/ai/manifest.json

@@ -0,0 +1,21 @@
+{
+ "version": "1.7.13",
+ "generated": "2026-07-24",
+ "files": {
+  "spec": "spec.json",
+  "catalog": "catalog.json",
+  "rules": "rules.compact.md",
+  "rulesFull": "rules.md",
+  "recipes": "recipes.md",
+  "gotchas": "gotchas.json",
+  "tasks": "tasks/index.json",
+  "examples": "examples/",
+  "blocks": "examples/blocks/manifest.json",
+  "components": "components/"
+ },
+ "bootstrap": [
+  "rules.compact.md",
+  "catalog.json"
+ ],
+ "resolve": "tasks/index.json"
+}

package/ai/rules.compact.md

@@ -0,0 +1,73 @@
+# Once UI — compact codegen rules
+
+Load with task bundle from `@once-ui-system/core/ai/tasks/{intent}.json`. For production-quality composition, read matching Pro blocks from `examples/blocks/manifest.json`. Fetch component slices on demand.
+
+## Layout
+
+| Write | Never write |
+|-------|-------------|
+| `<Column gap="16">` | `<Flex direction="column">` |
+| `<Row gap="16">` | `<Flex direction="row">` |
+| `fill` | `fillWidth fillHeight` |
+| `fit` | `fitWidth fitHeight` |
+| `center` | `horizontal="center" vertical="center"` |
+
+- `Flex` only when direction changes at breakpoints: `<Row s={{ direction: "column" }}>`
+- Page skeleton: `Column as="main" fillWidth horizontal="center"` → content `Column maxWidth="l"` → sections
+- Section gaps: `"104"` between sections, `"24"`–`"40"` inside. Never `"48"` between major sections.
+- Responsive: breakpoint props `xl l m s xs` — never media queries for layout
+
+## Surfaces
+
+Static panel recipe (pricing tiers, stats, settings sections):
+
+```tsx
+<Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16">
+```
+
+- `Card` = interactive only (`href` or `onClick`). Static panels = Column + surface recipe.
+- Colors: `{scheme}-{weight}` or `{scheme}-alpha-{weight}`. Never hex/rgb.
+- `background` also: `surface | overlay | page | transparent`
+
+## Typography
+
+- Hero: `display-strong-l` or `display-strong-xl`
+- Section titles: `display-strong-xs` or `display-strong-s` — not `heading-*`
+- Eyebrow: `<Text variant="label-default-s" onBackground="brand-medium">`
+- Text on layout: `textVariant` + `onBackground` on Row/Column instead of nesting Text
+
+## Decoration
+
+Absolute layers always: `position="absolute" top="0" left="0" fill pointerEvents="none"`, content `zIndex={1}`.
+
+- Gradient `width`: quarter-percent (400 = 100%). Glows: 100–200.
+- Glow colors: `brand-alpha-medium`, not `brand-background-weak`
+- Ambient layers on full-bleed section wrapper, outside `maxWidth` column
+- Budget: one ambient layer per section; motion in hero + one CTA max
+
+## Motion
+
+- `RevealFx delay` in **seconds**: `delay={index * 0.1}`
+- `RevealFx translateY`: number = rem; prefer `"8"`–`"16"` tokens
+- Viewport-trigger with `useInViewport` + latch; `CountFx` driven by `value`, no trigger prop
+- Animate all siblings in a set or none — never one lone animated card
+
+## Components
+
+| Need | Use |
+|------|-----|
+| Image | `Media` |
+| Link | `SmartLink` / `Button href` |
+| Status dot | `StatusIndicator` |
+| Loading | `Spinner` / `Skeleton` |
+| Scroll fade | `Fade` as edge strip, not wrapper |
+| Icons | `IconName` from spec only |
+| Logos grid | `LogoCloud` with `columns` set |
+
+## Defaults — omit these
+
+`position="relative"`, `direction` on Row/Column, `variant="primary"` on Button, `size="m"` when default.
+
+## Before building
+
+If design intent unclear, ask: content style, layout width, color approach, decoration level, imagery. Default: restrained, centered `maxWidth="m"`, single brand accent, one subtle gradient, no placeholder images.