openuispec 0.2.13 → 0.2.15

package/examples/social-app/openuispec/mock/chat_detail.yaml

@@ -0,0 +1,25 @@
+# Mock data for the chat_detail screen
+data:
+  conversation:
+    id: "c1"
+    participant: { id: "u2", display_name: "Sara Kim", avatar_url: null }
+
+  messages:
+    - id: "m1"
+      sender: { display_name: "Sara Kim" }
+      body: "Hey! Are you coming to the meetup tomorrow?"
+      created_at: "2026-03-18T10:30:00Z"
+      is_mine: false
+    - id: "m2"
+      sender: { display_name: "Jamie Taylor" }
+      body: "Yes, definitely! What time does it start?"
+      created_at: "2026-03-18T10:35:00Z"
+      is_mine: true
+    - id: "m3"
+      sender: { display_name: "Sara Kim" }
+      body: "6 PM at the usual place. See you there!"
+      created_at: "2026-03-18T10:45:00Z"
+      is_mine: false
+
+params:
+  conversation_id: "c1"

package/examples/social-app/openuispec/mock/discover.yaml

@@ -0,0 +1,17 @@
+# Mock data for the discover screen
+data:
+  creators:
+    - { id: "u5", display_name: "Alex Rivera", handle: "alexr", bio: "Tech writer & developer", followers_count: 12400, avatar_url: null }
+    - { id: "u6", display_name: "Jordan Lee", handle: "jordanlee", bio: "Photographer & traveler", followers_count: 8900, avatar_url: null }
+    - { id: "u7", display_name: "Priya Patel", handle: "priyap", bio: "Food blogger & chef", followers_count: 23100, avatar_url: null }
+
+  trends:
+    - { id: "tr1", label: "#TechTuesday", post_count: 1240 }
+    - { id: "tr2", label: "#MorningRoutine", post_count: 890 }
+    - { id: "tr3", label: "#BookClub", post_count: 567 }
+    - { id: "tr4", label: "#FitnessGoals", post_count: 2100 }
+
+  tags:
+    - { id: "tg1", name: "Technology", post_count: 45200 }
+    - { id: "tg2", name: "Photography", post_count: 32100 }
+    - { id: "tg3", name: "Food", post_count: 28900 }

package/examples/social-app/openuispec/mock/edit_profile.yaml

@@ -0,0 +1,9 @@
+# Mock data for the edit_profile screen
+data:
+  profile:
+    id: "u1"
+    display_name: "Jamie Taylor"
+    handle: "jamiet"
+    bio: "Designer & developer. Building things that matter."
+    website: "https://jamietaylor.dev"
+    avatar_url: null

package/examples/social-app/openuispec/mock/home_feed.yaml

@@ -0,0 +1,32 @@
+# Mock data for the home_feed screen
+data:
+  stories:
+    - { id: "s1", author: { display_name: "Sara" }, preview_url: null, has_new: true }
+    - { id: "s2", author: { display_name: "Mike" }, preview_url: null, has_new: true }
+    - { id: "s3", author: { display_name: "Lena" }, preview_url: null, has_new: false }
+
+  feed:
+    - id: "p1"
+      author: { id: "u2", display_name: "Sara Kim", handle: "sarakim", avatar_url: null }
+      body: "Just shipped a new feature! The team worked incredibly hard on this one. So proud of everyone involved."
+      media_url: null
+      like_count: 42
+      comment_count: 7
+      is_liked: false
+      published_at: "2026-03-18T10:30:00Z"
+    - id: "p2"
+      author: { id: "u3", display_name: "Mike Chen", handle: "mikechen", avatar_url: null }
+      body: "Beautiful morning for a run. Hit a new personal best today!"
+      media_url: null
+      like_count: 128
+      comment_count: 23
+      is_liked: true
+      published_at: "2026-03-18T08:15:00Z"
+    - id: "p3"
+      author: { id: "u4", display_name: "Lena Park", handle: "lenapark", avatar_url: null }
+      body: "Reading recommendations for the weekend? I just finished 'Project Hail Mary' and need something new."
+      media_url: null
+      like_count: 15
+      comment_count: 31
+      is_liked: false
+      published_at: "2026-03-17T22:00:00Z"

package/examples/social-app/openuispec/mock/messages_inbox.yaml

@@ -0,0 +1,15 @@
+# Mock data for the messages_inbox screen
+data:
+  conversations:
+    - id: "c1"
+      participant: { id: "u2", display_name: "Sara Kim", avatar_url: null }
+      last_message: { body: "See you tomorrow at the meetup!", created_at: "2026-03-18T10:45:00Z" }
+      unread_count: 2
+    - id: "c2"
+      participant: { id: "u3", display_name: "Mike Chen", avatar_url: null }
+      last_message: { body: "Thanks for sharing that article", created_at: "2026-03-17T20:30:00Z" }
+      unread_count: 0
+    - id: "c3"
+      participant: { id: "u5", display_name: "Alex Rivera", avatar_url: null }
+      last_message: { body: "Let me check and get back to you", created_at: "2026-03-16T15:00:00Z" }
+      unread_count: 0

package/examples/social-app/openuispec/mock/notifications.yaml

@@ -0,0 +1,30 @@
+# Mock data for the notifications screen
+data:
+  notifications:
+    - id: "n1"
+      type: like
+      actor: { id: "u2", display_name: "Sara Kim", avatar_url: null }
+      message: "liked your post"
+      post: { id: "p10", title: "My weekend project" }
+      created_at: "2026-03-18T11:00:00Z"
+      is_read: false
+    - id: "n2"
+      type: comment
+      actor: { id: "u3", display_name: "Mike Chen", avatar_url: null }
+      message: "commented: This looks amazing!"
+      post: { id: "p10", title: "My weekend project" }
+      created_at: "2026-03-18T09:30:00Z"
+      is_read: false
+    - id: "n3"
+      type: follow
+      actor: { id: "u5", display_name: "Alex Rivera", avatar_url: null }
+      message: "started following you"
+      created_at: "2026-03-17T18:00:00Z"
+      is_read: true
+    - id: "n4"
+      type: mention
+      actor: { id: "u4", display_name: "Lena Park", avatar_url: null }
+      message: "mentioned you in a post"
+      post: { id: "p8", title: "Team outing photos" }
+      created_at: "2026-03-17T14:00:00Z"
+      is_read: true

package/examples/social-app/openuispec/mock/post_detail.yaml

@@ -0,0 +1,26 @@
+# Mock data for the post_detail screen
+data:
+  post:
+    id: "p1"
+    author: { id: "u2", display_name: "Sara Kim", handle: "sarakim", avatar_url: null }
+    body: "Just shipped a new feature! The team worked incredibly hard on this one. So proud of everyone involved."
+    media_url: null
+    like_count: 42
+    comment_count: 7
+    is_liked: false
+    published_at: "2026-03-18T10:30:00Z"
+
+  comments:
+    - id: "cm1"
+      author: { id: "u3", display_name: "Mike Chen", handle: "mikechen", avatar_url: null }
+      body: "Congrats! What was the hardest part?"
+      created_at: "2026-03-18T11:00:00Z"
+      like_count: 5
+    - id: "cm2"
+      author: { id: "u4", display_name: "Lena Park", handle: "lenapark", avatar_url: null }
+      body: "Amazing work, well deserved!"
+      created_at: "2026-03-18T11:30:00Z"
+      like_count: 3
+
+params:
+  post_id: "p1"

package/examples/social-app/openuispec/mock/profile_self.yaml

@@ -0,0 +1,28 @@
+# Mock data for the profile_self screen
+data:
+  profile:
+    id: "u1"
+    display_name: "Jamie Taylor"
+    handle: "jamiet"
+    bio: "Designer & developer. Building things that matter."
+    website: "https://jamietaylor.dev"
+    avatar_url: null
+    followers_count: 1240
+    following_count: 380
+    posts_count: 86
+
+  posts:
+    - id: "p10"
+      author: { display_name: "Jamie Taylor" }
+      body: "My weekend project — a mini weather station with Raspberry Pi"
+      media_url: null
+      like_count: 28
+      comment_count: 12
+      published_at: "2026-03-17T16:00:00Z"
+    - id: "p11"
+      author: { display_name: "Jamie Taylor" }
+      body: "New blog post about design tokens and how they simplify theming across platforms"
+      media_url: null
+      like_count: 64
+      comment_count: 8
+      published_at: "2026-03-15T09:00:00Z"

package/examples/social-app/openuispec/mock/profile_user.yaml

@@ -0,0 +1,32 @@
+# Mock data for the profile_user screen
+data:
+  profile:
+    id: "u2"
+    display_name: "Sara Kim"
+    handle: "sarakim"
+    bio: "Product engineer at Acme. Coffee enthusiast."
+    website: "https://sarakim.io"
+    avatar_url: null
+    followers_count: 3200
+    following_count: 560
+    posts_count: 142
+    is_following: true
+
+  posts:
+    - id: "p1"
+      author: { id: "u2", display_name: "Sara Kim", handle: "sarakim" }
+      body: "Just shipped a new feature! The team worked incredibly hard on this one."
+      media_url: null
+      like_count: 42
+      comment_count: 7
+      published_at: "2026-03-18T10:30:00Z"
+    - id: "p12"
+      author: { id: "u2", display_name: "Sara Kim", handle: "sarakim" }
+      body: "Coffee shop recommendations in SF anyone?"
+      media_url: null
+      like_count: 19
+      comment_count: 15
+      published_at: "2026-03-16T14:00:00Z"
+
+params:
+  user_id: "u2"

package/examples/social-app/openuispec/mock/search_results.yaml

@@ -0,0 +1,17 @@
+# Mock data for the search_results screen
+data:
+  results:
+    - id: "p20"
+      title: "Mike Chen"
+      subtitle: "@mikechen"
+      body: "Best running apps for 2026 — a comprehensive review"
+      avatar_url: null
+    - id: "u8"
+      title: "Taylor Swift"
+      subtitle: "@taylorswift"
+      body: "Singer-songwriter"
+      avatar_url: null
+
+params:
+  query: "running"
+  tab: "posts"

package/examples/social-app/openuispec/mock/settings.yaml

@@ -0,0 +1,7 @@
+# Mock data for the settings screen
+data:
+  preferences:
+    theme: "system"
+    notifications_enabled: true
+    language: "en"
+    private_account: false

package/examples/social-app/openuispec/openuispec.yaml

@@ -1,5 +1,5 @@
-# social-app — OpenUISpec v0.1
-spec_version: "0.1"
+# social-app — OpenUISpec v0.2
+spec_version: "0.2"
 
 project:
   name: "social-app"
@@ -8,6 +8,7 @@ project:
 includes:
   tokens: "./tokens/"
   contracts: "./contracts/"
+  components: "./components/"
   screens: "./screens/"
   flows: "./flows/"
   platform: "./platform/"

package/examples/taskflow/README.md

@@ -1,6 +1,6 @@
 # TaskFlow — OpenUISpec Example Application
 
-A complete task management app defined entirely in OpenUISpec v0.1, demonstrating how a single source of truth generates native iOS, Android, and Web applications.
+A complete task management app defined entirely in OpenUISpec v0.2, demonstrating how a single source of truth generates native iOS, Android, and Web applications.
 
 ## What this demonstrates
 
@@ -68,6 +68,8 @@ taskflow/
 │   ├── layout.yaml              # Size classes, primitives, reflow rules
 │   └── themes.yaml              # Light, dark, warm variants
 ├── contracts/                   # 7 contract family stubs (see spec Section 4)
+├── components/
+│   └── media_player.yaml        # Media player component with slots and states
 ├── screens/
 │   ├── home.yaml                # Task list with search, filters, FAB, adaptive nav
 │   ├── task_detail.yaml         # Full task view with actions + assignee sheet
@@ -100,4 +102,4 @@ The AI should produce:
 
 ---
 
-*TaskFlow is a reference implementation of OpenUISpec v0.1, not a production application.*
+*TaskFlow is a reference implementation of OpenUISpec v0.2, not a production application.*

package/examples/taskflow/openuispec/README.md

@@ -12,6 +12,7 @@ This directory contains the **OpenUISpec** semantic UI specification for **TaskF
 | `screens/` | Screen definitions — one YAML file per screen |
 | `flows/` | Navigation flows — multi-step user journeys |
 | `contracts/` | Component contracts — standard extensions and custom (`x_` prefixed) |
+| `components/` | Reusable compositions — contract slot compositions with states and variants |
 | `platform/` | Platform overrides — per-target (iOS, Android, Web) behaviors |
 | `locales/` | Localization — i18n strings (JSON, ICU MessageFormat) |
 
@@ -28,7 +29,7 @@ Do NOT guess the file format — skipping this step will produce invalid YAML th
 
 **Reference files inside the package (read in this order):**
 1. `README.md` — schema tables, file format reference, root wrapper keys
-2. `spec/openuispec-v0.1.md` — full specification (contracts, layout, expressions, etc.)
+2. `spec/openuispec-v0.2.md` — full specification (contracts, layout, expressions, etc.)
 3. `examples/taskflow/openuispec/` — complete working example with all file types
 4. `schema/` — JSON Schemas for validation
 

package/examples/taskflow/openuispec/components/media_player.yaml

@@ -0,0 +1,92 @@
+# ============================================================
+# Component: media_player
+# ============================================================
+# Reusable media playback component composed from base contracts.
+# Demonstrates the component spec type with slots, states,
+# variants, and layout.
+# ============================================================
+
+media_player:
+  semantic: "Plays audio and video media with transport controls"
+
+  props:
+    source: { type: string, required: true }
+    media_type: { type: enum, values: [audio, video], required: true }
+    title: { type: string }
+
+  slots:
+    play_button:
+      contract: action_trigger
+      variant: icon
+      props: { label: "$t:media_player.play", icon: play }
+      hideable: true
+    scrubber:
+      contract: input_field
+      input_type: slider
+      props: { label: "$t:media_player.progress" }
+      hideable: true
+    time_label:
+      contract: data_display
+      variant: caption
+      hideable: true
+    volume_control:
+      contract: input_field
+      input_type: slider
+      hideable: true
+
+  layout:
+    type: stack
+    spacing: "spacing.sm"
+    sections:
+      - slot: play_button
+      - slot: scrubber
+      - layout:
+          type: row
+          sections:
+            - slot: time_label
+            - slot: volume_control
+
+  states:
+    idle: { semantic: "No media loaded" }
+    loading:
+      semantic: "Buffering"
+      hide_slots: [scrubber, volume_control]
+    playing:
+      semantic: "Actively playing"
+      slot_overrides:
+        play_button: { props: { icon: pause } }
+    paused:
+      semantic: "Paused at position"
+      slot_overrides:
+        play_button: { props: { icon: play } }
+
+  variants:
+    mini:
+      semantic: "Compact player for persistent bottom bar"
+      hide_slots: [volume_control]
+      layout:
+        type: row
+        sections:
+          - slot: play_button
+          - slot: scrubber
+          - slot: time_label
+    fullscreen:
+      semantic: "Full-screen immersive player"
+      tokens: { background: "#000000" }
+
+  tokens:
+    background: "color.surface.secondary"
+    radius: "spacing.md"
+    padding: "spacing.md"
+
+  a11y:
+    role: "group"
+    label: "props.title"
+
+  platform_mapping:
+    ios: { component: "VideoPlayer", framework: "AVKit" }
+    android: { component: "PlayerView", library: "androidx.media3" }
+    web: { element: "div", role: "region" }
+
+  generation:
+    must_handle: ["All slots must render with correct contract types"]

package/examples/taskflow/openuispec/contracts/README.md

@@ -1,11 +1,11 @@
 # TaskFlow — Contract Files
 
 These files define the 7 standard OpenUISpec contract families used by TaskFlow.
-They are extracted from the OpenUISpec v0.1 specification (Section 4) for use as
+They are extracted from the OpenUISpec v0.2 specification (Section 4) for use as
 standalone, machine-readable contract definitions.
 
 For the full specification of each contract including generation hints and test cases,
-see `spec/openuispec-v0.1.md` Section 4.
+see `spec/openuispec-v0.2.md` Section 4.
 
 | File | Contract | Section |
 |------|----------|---------|

package/examples/taskflow/openuispec/locales/en.json

@@ -127,6 +127,7 @@
   "status.in_progress": "In progress",
   "status.done": "Done",
 
+  "media_player.progress": "Playback progress",
   "media_player.loading": "Loading media…",
   "media_player.play": "Play",
   "media_player.pause": "Pause",

package/examples/taskflow/openuispec/mock/home.yaml

@@ -0,0 +1,64 @@
+# Mock data for the home screen
+data:
+  user:
+    id: "u1"
+    name: "Alex Chen"
+    first_name: "Alex"
+    email: "alex@example.com"
+
+  tasks:
+    - id: "task-1"
+      title: "Review Q4 roadmap"
+      status: in_progress
+      priority: high
+      due_date: "2026-03-20"
+      project: { id: "p1", name: "Platform" }
+      tags: ["planning", "q4"]
+      created_at: "2026-03-10"
+
+    - id: "task-2"
+      title: "Fix login bug on mobile"
+      status: todo
+      priority: urgent
+      due_date: "2026-03-19"
+      project: { id: "p2", name: "Mobile App" }
+      tags: ["bug"]
+      created_at: "2026-03-15"
+
+    - id: "task-3"
+      title: "Write API documentation"
+      status: todo
+      priority: medium
+      due_date: "2026-03-22"
+      project: { id: "p1", name: "Platform" }
+      tags: ["docs"]
+      created_at: "2026-03-12"
+
+    - id: "task-4"
+      title: "Design onboarding flow"
+      status: done
+      priority: high
+      due_date: "2026-03-18"
+      project: { id: "p3", name: "Design System" }
+      tags: ["design", "ux"]
+      created_at: "2026-03-08"
+
+    - id: "task-5"
+      title: "Update dependencies"
+      status: todo
+      priority: low
+      due_date: "2026-03-25"
+      project: { id: "p1", name: "Platform" }
+      tags: ["maintenance"]
+      created_at: "2026-03-16"
+
+  task_counts:
+    all: 24
+    today: 3
+    upcoming: 12
+    done: 9
+
+  projects:
+    - { id: "p1", name: "Platform", color: "#5B4FE8", icon: "server", task_count: 12 }
+    - { id: "p2", name: "Mobile App", color: "#E8634F", icon: "phone", task_count: 8 }
+    - { id: "p3", name: "Design System", color: "#2D9D5E", icon: "palette", task_count: 4 }

package/examples/taskflow/openuispec/mock/profile_edit.yaml

@@ -0,0 +1,6 @@
+# Mock data for the profile_edit screen
+data:
+  user:
+    name: "Jane Doe"
+    email: "jane@example.com"
+    avatar: null

package/examples/taskflow/openuispec/mock/project_detail.yaml

@@ -0,0 +1,33 @@
+# Mock data for the project_detail screen
+data:
+  project:
+    id: "proj-1"
+    name: "Website Redesign"
+    icon: "folder"
+    color: "#4A90D9"
+    task_count: 5
+
+  tasks:
+    - id: "t1"
+      title: "Design homepage layout"
+      due_date: "2026-03-25T00:00:00Z"
+      priority: high
+    - id: "t2"
+      title: "Set up CI pipeline"
+      due_date: "2026-04-01T00:00:00Z"
+      priority: medium
+    - id: "t3"
+      title: "Implement auth flow"
+      due_date: "2026-03-28T00:00:00Z"
+      priority: high
+    - id: "t4"
+      title: "Write API documentation"
+      due_date: "2026-04-05T00:00:00Z"
+      priority: low
+    - id: "t5"
+      title: "Performance audit"
+      due_date: "2026-04-10T00:00:00Z"
+      priority: medium
+
+params:
+  project_id: "proj-1"

package/examples/taskflow/openuispec/mock/settings.yaml

@@ -0,0 +1,13 @@
+# Mock data for the settings screen
+data:
+  user:
+    id: "u1"
+    name: "Alex Chen"
+    email: "alex@example.com"
+    avatar: null
+
+  preferences:
+    theme: "system"
+    default_priority: "medium"
+    notifications_enabled: true
+    reminders_enabled: false

package/examples/taskflow/openuispec/mock/task_detail.yaml

@@ -0,0 +1,18 @@
+# Mock data for the task_detail screen
+data:
+  task:
+    id: "task-1"
+    title: "Review Q4 roadmap"
+    description: "Go through the Q4 roadmap document and identify any gaps in the timeline. Focus on the platform team deliverables and cross-team dependencies."
+    status: in_progress
+    priority: high
+    due_date: "2026-03-20"
+    project_id: "p1"
+    project: { id: "p1", name: "Platform" }
+    assignee: { id: "u1", name: "Alex Chen", email: "alex@example.com" }
+    tags: ["planning", "q4"]
+    created_at: "2026-03-10"
+    updated_at: "2026-03-17"
+
+params:
+  task_id: "task-1"

package/examples/taskflow/openuispec/openuispec.yaml

@@ -1,12 +1,12 @@
 # ============================================================
-# TaskFlow — OpenUISpec v0.1 Example Application
+# TaskFlow — OpenUISpec v0.2 Example Application
 # ============================================================
 # A task management app demonstrating all 7 contract families,
 # theming, navigation flows, adaptive layout, and the formal
 # action system and data binding model.
 # ============================================================
 
-spec_version: "0.1"
+spec_version: "0.2"
 
 project:
   name: "TaskFlow"
@@ -16,13 +16,12 @@ project:
 includes:
   tokens: "./tokens/"
   contracts: "./contracts/"
+  components: "./components/"
   screens: "./screens/"
   flows: "./flows/"
   platform: "./platform/"
   locales: "./locales/"
 
-custom_contracts:
-  - "./contracts/x_media_player.yaml"
 
 i18n:
   default_locale: "en"

package/examples/taskflow/openuispec/platform/ios.yaml

@@ -17,10 +17,6 @@ ios:
     collection:
       list: { uses_system_list_style: ".insetGrouped" }
 
-    x_media_player:
-      inline:
-        uses_native_player: true
-        pip_enabled: true
 
   behaviors:
     haptics: true

package/examples/taskflow/openuispec/screens/task_detail.yaml

@@ -105,19 +105,16 @@ task_detail:
         padding_h: "spacing.page_margin"
         margin_top: "spacing.md"
         children:
-          - contract: x_media_player
-            variant: inline
+          - component: media_player
             props:
               source: "{task.attachment.url}"
               media_type: "{task.attachment.media_type}"
               title: "{task.attachment.filename}"
-              poster: "{task.attachment.thumbnail}"
-              show_controls: true
-            tokens_override:
-              radius: "spacing.md"
+            slots:
+              volume_control: { hidden: true }
             adaptive:
-              compact: { variant: inline }
-              expanded: { variant: inline, max_width: 640 }
+              compact: {}
+              expanded: { max_width: 640 }
 
       # ---------- Details section ----------
       - id: details

package/examples/taskflow/openuispec/tokens/icons.yaml

@@ -45,6 +45,22 @@ icons:
           android: "undo"
           web: "undo-2"
 
+    media:
+      play:
+        semantic: "Play media"
+        variants: ["fill"]
+        platform:
+          ios: "play"
+          android: "play_arrow"
+          web: "play"
+      pause:
+        semantic: "Pause media"
+        variants: ["fill"]
+        platform:
+          ios: "pause"
+          android: "pause"
+          web: "pause"
+
     actions:
       plus:
         semantic: "Create new item"