@once-ui-system/core 1.7.10 → 1.7.12

package/ai/examples/blocks/manifest.json

@@ -0,0 +1,191 @@
+{
+  "version": 1,
+  "description": "Once UI Pro block references for agent codegen — canonical composition patterns at production quality. Reference-only; not all blocks are runnable standalone.",
+  "usage": "Load the block matching your task intent. Mimic structure and prop patterns; adapt data and copy.",
+  "blocks": [
+    {
+      "id": "Header1",
+      "file": "Header1.tsx",
+      "title": "App header with MegaMenu + Kbar",
+      "tags": ["navigation", "header", "marketing"],
+      "components": ["MegaMenu", "MobileMegaMenu", "Kbar", "Logo", "UserMenu", "NavIcon", "SmartLink"],
+      "patterns": ["sticky header", "mega menu sections with featured links", "command palette ⌘K"],
+      "tasks": ["marketing-hero", "dashboard"],
+      "standalone": true
+    },
+    {
+      "id": "Header2",
+      "file": "Header2.tsx",
+      "title": "Minimal marketing header",
+      "tags": ["navigation", "header", "marketing"],
+      "components": ["Logo", "Row", "Button", "SmartLink"],
+      "tasks": ["marketing-hero"],
+      "standalone": true
+    },
+    {
+      "id": "Header3",
+      "file": "Header3.tsx",
+      "title": "Streaming/media header",
+      "tags": ["navigation", "header", "streaming"],
+      "components": ["Logo", "IconButton", "UserMenu"],
+      "tasks": ["streaming"],
+      "standalone": true
+    },
+    {
+      "id": "Header4",
+      "file": "Header4.tsx",
+      "title": "Compact docs-style header",
+      "tags": ["navigation", "header", "docs"],
+      "components": ["Logo", "UserMenu", "ToggleButton", "SmartLink"],
+      "tasks": ["settings"],
+      "standalone": true
+    },
+    {
+      "id": "Footer1",
+      "file": "Footer1.tsx",
+      "title": "Minimal footer bar",
+      "tags": ["footer"],
+      "components": ["Row", "IconButton", "Text"],
+      "standalone": true
+    },
+    {
+      "id": "Footer2",
+      "file": "Footer2.tsx",
+      "title": "Footer with CTA",
+      "tags": ["footer", "marketing"],
+      "components": ["Column", "Button", "SmartLink"],
+      "standalone": true
+    },
+    {
+      "id": "Footer3",
+      "file": "Footer3.tsx",
+      "title": "Multi-column sitemap footer",
+      "tags": ["footer", "marketing"],
+      "components": ["Grid", "SmartLink", "Tag", "Logo", "IconButton"],
+      "patterns": ["5-column nav grid with responsive collapse"],
+      "tasks": ["marketing-hero"],
+      "standalone": true
+    },
+    {
+      "id": "Footer4",
+      "file": "Footer4.tsx",
+      "title": "Premium footer with TypeFx + Particle",
+      "tags": ["footer", "marketing", "effect"],
+      "components": ["Background", "Particle", "TypeFx", "Mask", "Avatar", "Tag"],
+      "patterns": ["animated wordmark", "particle decoration", "masked gradient"],
+      "tasks": ["marketing-hero"],
+      "standalone": true
+    },
+    {
+      "id": "Waitlist1",
+      "file": "Waitlist1.tsx",
+      "title": "Waitlist / coming-soon hero",
+      "tags": ["marketing", "hero", "waitlist"],
+      "components": ["RevealFx", "CountFx", "AvatarGroup", "Input", "Badge", "Background"],
+      "patterns": ["custom cursor SVG", "subscriber count animation", "email capture with validation"],
+      "tasks": ["marketing-hero"],
+      "related": ["Background6.tsx"],
+      "standalone": true
+    },
+    {
+      "id": "Dashboard1",
+      "file": "Dashboard1.tsx",
+      "title": "Full analytics dashboard shell",
+      "tags": ["dashboard", "data"],
+      "components": ["Card", "LineChart", "Grid", "Scroller", "StatusIndicator", "Table1"],
+      "patterns": ["StatCard with sparkline chart overlay", "activity feed with Card rows", "orders table"],
+      "tasks": ["dashboard"],
+      "compose": ["Sidebar1.tsx", "Header1.tsx", "Table1.tsx"],
+      "standalone": false
+    },
+    {
+      "id": "Table1",
+      "file": "Table1.tsx",
+      "title": "Data table with search, pagination, selection",
+      "tags": ["data", "dashboard", "table"],
+      "components": ["Input", "Checkbox", "DropdownWrapper", "CountFx", "IconButton", "ToggleButton"],
+      "patterns": ["custom render columns", "selectable rows", "items per page"],
+      "tasks": ["dashboard", "chat"],
+      "standalone": true
+    },
+    {
+      "id": "Chat1",
+      "file": "Chat1.tsx",
+      "title": "Three-pane chat layout",
+      "tags": ["chat", "layout"],
+      "components": ["SplitView pattern via Row", "Sidebar4", "Feed3", "Sidebar5", "Table1"],
+      "patterns": ["channel sidebar + feed + members panel", "view switching"],
+      "tasks": ["chat"],
+      "compose": ["Feed3.tsx", "Sidebar4.tsx", "Sidebar5.tsx"],
+      "standalone": false
+    },
+    {
+      "id": "Feed3",
+      "file": "Feed3.tsx",
+      "title": "Chat message feed + composer",
+      "tags": ["chat", "social"],
+      "components": ["Avatar", "Textarea", "EmojiPickerDropdown", "Media", "OgCard", "IconButton"],
+      "patterns": ["thread messages without bubbles", "attachment grid", "reactions row", "emoji picker prefix"],
+      "tasks": ["chat"],
+      "standalone": true
+    },
+    {
+      "id": "Sidebar4",
+      "file": "Sidebar4.tsx",
+      "title": "Chat channel sidebar",
+      "tags": ["chat", "sidebar", "navigation"],
+      "components": ["Scroller", "ToggleButton", "Fade", "Media", "Avatar"],
+      "patterns": ["cover image header with Fade strip", "grouped channel list", "user status footer"],
+      "tasks": ["chat"],
+      "standalone": true
+    },
+    {
+      "id": "Sidebar5",
+      "file": "Sidebar5.tsx",
+      "title": "Chat members panel",
+      "tags": ["chat", "sidebar"],
+      "components": ["Card", "Avatar", "DropdownWrapper", "Heading"],
+      "tasks": ["chat"],
+      "standalone": true
+    },
+    {
+      "id": "Roadmap1",
+      "file": "Roadmap1.tsx",
+      "title": "Kanban-style product roadmap",
+      "tags": ["roadmap", "content", "community"],
+      "components": ["Card", "StatusIndicator", "User", "Scroller"],
+      "patterns": ["horizontal column scroll", "Card for linked tasks / Column for static", "brand dot product header"],
+      "tasks": ["roadmap"],
+      "standalone": true
+    },
+    {
+      "id": "Streaming1",
+      "file": "Streaming1.tsx",
+      "title": "Video streaming page",
+      "tags": ["streaming", "media", "marketing"],
+      "components": ["Media", "Carousel", "ProgressBar", "Fade", "Scroller"],
+      "patterns": ["floating controls portal", "episode carousel", "hero video player"],
+      "compose": ["Header3.tsx", "Footer2.tsx"],
+      "standalone": false
+    },
+    {
+      "id": "Productivity1",
+      "file": "Productivity1.tsx",
+      "title": "Issue board / kanban productivity",
+      "tags": ["productivity", "dashboard"],
+      "components": ["Card", "AvatarGroup", "IconButton", "Scroller"],
+      "patterns": ["horizontal issue columns", "Card task items with avatars"],
+      "compose": ["Sidebar2.tsx"],
+      "standalone": false
+    }
+  ],
+  "byTask": {
+    "marketing-hero": ["Waitlist1", "Header1", "Footer4", "Footer3"],
+    "dashboard": ["Dashboard1", "Table1", "Header1", "Sidebar1"],
+    "chat": ["Chat1", "Feed3", "Sidebar4", "Sidebar5", "Table1"],
+    "settings": ["Header4", "Sidebar1"],
+    "pricing": ["Header2", "Footer2"],
+    "auth": ["Header2"],
+    "roadmap": ["Roadmap1"]
+  }
+}

package/ai/examples/dashboard.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+/**
+ * Gold example: dashboard
+ * Target: KPI stat row, chart placeholders, recent activity table
+ */
+import { useEffect, useRef, useState } from "react";
+import {
+  Column,
+  CountFx,
+  Grid,
+  Heading,
+  Icon,
+  Line,
+  RevealFx,
+  Row,
+  SegmentedControl,
+  StatusIndicator,
+  Table,
+  Tag,
+  Text,
+  useInViewport,
+} from "@once-ui-system/core";
+
+const stats = [
+  { label: "Revenue", value: 128400, prefix: "$", change: "+12.4%", up: true },
+  { label: "Active users", value: 2847, change: "+8.1%", up: true },
+  { label: "Churn rate", value: 2.1, suffix: "%", change: "−0.3%", up: true },
+  { label: "Support tickets", value: 34, change: "+4", up: false },
+];
+
+const activity = {
+  headers: [
+    { content: "Event", key: "event" },
+    { content: "User", key: "user" },
+    { content: "Status", key: "status" },
+    { content: "Time", key: "time" },
+  ],
+  rows: [
+    ["Plan upgraded to Pro", "jane@acme.co", <Tag size="s" variant="success">Completed</Tag>, "2m ago"],
+    ["New signup", "alex@studio.io", <Tag size="s" variant="brand">New</Tag>, "14m ago"],
+    ["Payment failed", "ops@build.dev", <Tag size="s" variant="danger">Action</Tag>, "1h ago"],
+  ],
+};
+
+export function DashboardExample() {
+  const [range, setRange] = useState("7d");
+  const statsRef = useRef<HTMLDivElement>(null);
+  const inViewport = useInViewport(statsRef);
+  const [seen, setSeen] = useState(false);
+  useEffect(() => {
+    if (inViewport) setSeen(true);
+  }, [inViewport]);
+
+  return (
+    <Column as="main" fillWidth horizontal="center" paddingY="48" paddingX="24" gap="40">
+      <Column fillWidth 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">
+              Analytics
+            </Text>
+            <Heading as="h1" variant="display-strong-s">
+              Overview
+            </Heading>
+          </Column>
+          <SegmentedControl
+            selected={range}
+            onToggle={setRange}
+            buttons={[
+              { value: "7d", label: "7 days" },
+              { value: "30d", label: "30 days" },
+              { value: "90d", label: "90 days" },
+            ]}
+          />
+        </Row>
+
+        <Grid ref={statsRef} columns="4" gap="16" m={{ columns: 2 }} s={{ columns: 1 }}>
+          {stats.map((stat, index) => (
+            <RevealFx key={stat.label} fill trigger={seen} translateY="8" delay={index * 0.1}>
+              <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16">
+                <Row fillWidth horizontal="between" vertical="center">
+                  <Text variant="label-default-s" onBackground="neutral-weak">
+                    {stat.label}
+                  </Text>
+                  <StatusIndicator color={stat.up ? "green" : "orange"} />
+                </Row>
+                <Row vertical="end" gap="4">
+                  {stat.prefix && (
+                    <Text variant="display-strong-xs">{stat.prefix}</Text>
+                  )}
+                  <CountFx
+                    variant="display-strong-xs"
+                    value={seen ? stat.value : 0}
+                    speed={1200}
+                    separator=","
+                  />
+                  {stat.suffix && (
+                    <Text variant="display-strong-xs">{stat.suffix}</Text>
+                  )}
+                </Row>
+                <Text variant="label-default-s" onBackground={stat.up ? "success-medium" : "warning-medium"}>
+                  {stat.change}
+                </Text>
+              </Column>
+            </RevealFx>
+          ))}
+        </Grid>
+
+        <Grid columns="2" gap="24" s={{ columns: 1 }}>
+          <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16" minHeight={32}>
+            <Heading as="h2" variant="heading-strong-s">
+              Revenue trend
+            </Heading>
+            <Column flex={1} center background="neutral-alpha-weak" radius="m" padding="48">
+              <Icon name="linearGauge" size="l" onBackground="neutral-weak" />
+              <Text variant="label-default-s" onBackground="neutral-weak">
+                Chart area — use recharts or your data viz module
+              </Text>
+            </Column>
+          </Column>
+          <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16" minHeight={32}>
+            <Heading as="h2" variant="heading-strong-s">
+              Signups by channel
+            </Heading>
+            <Column flex={1} center background="neutral-alpha-weak" radius="m" padding="48">
+              <Icon name="radialGauge" size="l" onBackground="neutral-weak" />
+              <Text variant="label-default-s" onBackground="neutral-weak">
+                Chart area
+              </Text>
+            </Column>
+          </Column>
+        </Grid>
+
+        <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+          <Row fillWidth horizontal="between" vertical="center">
+            <Heading as="h2" variant="heading-strong-s">
+              Recent activity
+            </Heading>
+            <Text variant="label-default-s" onBackground="brand-medium" cursor="interactive">
+              View all
+            </Text>
+          </Row>
+          <Line />
+          <Table fillWidth data={activity} />
+        </Column>
+      </Column>
+    </Column>
+  );
+}

package/ai/examples/marketing-hero.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+/**
+ * Gold example: marketing-hero
+ * Target: once-ui.com homepage — glow + dots, display headline, feature grid, CTAs
+ */
+import {
+  Background,
+  Button,
+  Column,
+  Grid,
+  Heading,
+  Icon,
+  Line,
+  RevealFx,
+  Row,
+  Text,
+} from "@once-ui-system/core";
+
+const features = [
+  {
+    icon: "document" as const,
+    title: "Contexts",
+    description: "App-level state for themes, toasts, icons and layouts.",
+  },
+  {
+    icon: "sparkle" as const,
+    title: "Basics",
+    description: "Wrappers and utilities that make complex functionality approachable.",
+  },
+  {
+    icon: "radialGauge" as const,
+    title: "Form controls",
+    description: "Interactive elements for forms and data entry.",
+  },
+  {
+    icon: "document" as const,
+    title: "Static elements",
+    description: "Feedbacks, badges, tags, skeletons and more.",
+  },
+  {
+    icon: "linearGauge" as const,
+    title: "Data visualization",
+    description: "Responsive, interactive charts and gauges.",
+  },
+  {
+    icon: "sparkle" as const,
+    title: "Modules",
+    description: "High functionality, minimal syntax: megamenu, command palette.",
+  },
+];
+
+export function MarketingHeroExample() {
+  return (
+    <Column as="main" fillWidth horizontal="center" gap="104" paddingBottom="104">
+      {/* Full-bleed hero — ambient layer outside maxWidth */}
+      <Column fillWidth horizontal="center" paddingY="80">
+        <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: 150,
+            height: 80,
+            opacity: 60,
+          }}
+          dots={{ display: true, color: "neutral-alpha-weak", size: "2", opacity: 40 }}
+        />
+        <Column zIndex={1} horizontal="center" gap="24" maxWidth={48}>
+          <RevealFx translateY="16">
+            <Column horizontal="center" gap="16">
+              <Text variant="label-default-s" onBackground="brand-medium">
+                v1.7 — Discover what's new
+              </Text>
+              <Heading as="h1" variant="display-strong-l" align="center">
+                Write 70% less code with human-readable, machine-writable syntax
+              </Heading>
+            </Column>
+          </RevealFx>
+          <RevealFx delay={0.1} translateY="16">
+            <Text variant="body-default-l" onBackground="neutral-weak" align="center">
+              Build semantic layouts with Row, Column and Grid. Add 100+ pre-styled components.
+              Manage themes in a single file.
+            </Text>
+          </RevealFx>
+          <RevealFx delay={0.2} translateY="16">
+            <Row gap="12" s={{ direction: "column" }}>
+              <Button arrowIcon>View docs</Button>
+              <Button variant="secondary" suffixIcon="arrowUpRight">
+                Discover Pro
+              </Button>
+            </Row>
+          </RevealFx>
+        </Column>
+      </Column>
+
+      {/* Feature grid — left-aligned section header, not repeated centered blocks */}
+      <Column fillWidth horizontal="center">
+        <Column fillWidth maxWidth="l" gap="40">
+          <Column gap="12" maxWidth={32}>
+            <Text variant="label-default-s" onBackground="brand-medium">
+              Components
+            </Text>
+            <Heading as="h2" variant="display-strong-xs">
+              Copy and paste. Insert from 100+ open-source, pre-styled components.
+            </Heading>
+          </Column>
+          <Grid columns="3" gap="24" m={{ columns: 2 }} s={{ columns: 1 }}>
+            {features.map((feature) => (
+              <Column
+                key={feature.title}
+                background="surface"
+                border="neutral-alpha-weak"
+                radius="l"
+                padding="24"
+                gap="16"
+              >
+                <Row
+                  center
+                  width={10}
+                  height={10}
+                  radius="m"
+                  background="brand-alpha-weak"
+                  border="brand-alpha-medium"
+                >
+                  <Icon name={feature.icon} size="s" onBackground="brand-medium" />
+                </Row>
+                <Heading as="h3" variant="heading-strong-s">
+                  {feature.title}
+                </Heading>
+                <Text variant="body-default-s" onBackground="neutral-weak">
+                  {feature.description}
+                </Text>
+              </Column>
+            ))}
+          </Grid>
+        </Column>
+      </Column>
+
+      <Column fillWidth horizontal="center">
+        <Line width="40" />
+      </Column>
+    </Column>
+  );
+}