openuispec 0.1.0

package/examples/taskflow/screens/projects.yaml

@@ -0,0 +1,142 @@
+# ============================================================
+# TaskFlow — Projects Screen
+# ============================================================
+# Exercises: collection (grid), data_display (card),
+#            action_trigger, surface (modal for new project),
+#            adaptive layout (grid columns)
+# ============================================================
+
+projects:
+  semantic: "Lists all projects as a grid of cards"
+
+  data:
+    projects:
+      source: "api.projects.list"
+
+  layout:
+    type: scroll_vertical
+    safe_area: true
+    padding: "spacing.page_margin"
+
+    sections:
+      - id: header
+        layout: { type: row, justify: "space-between", align: "center" }
+        children:
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:projects.title"
+            tokens_override:
+              title_style: "typography.heading_lg"
+          - contract: action_trigger
+            variant: tertiary
+            size: sm
+            props:
+              label: "$t:projects.new_project"
+              icon: "plus_circle"
+            action:
+              type: present
+              surface: "new_project_dialog"
+
+      - id: project_grid
+        margin_top: "spacing.md"
+        contract: collection
+        variant: grid
+        props:
+          data: "projects"
+          item_contract: data_display
+          item_variant: card
+          item_props_map:
+            title: "item.name"
+            subtitle: "$t:projects.task_count"
+            t_params:
+              count: "item.task_count"
+            leading:
+              icon: "item.icon"
+              color: "item.color"
+              size: 24
+              background: "item.color (10% opacity)"
+              radius: "spacing.sm"
+              padding: "spacing.sm"
+          interactive: true
+
+          empty_state:
+            icon: "folder_fill"
+            title: "$t:projects.empty_title"
+            body: "$t:projects.empty_body"
+
+        adaptive:
+          compact: { columns: 1 }
+          regular: { columns: 2 }
+          expanded: { columns: 3 }
+
+        action:
+          type: navigate
+          destination: "screens/project_detail"
+          params: { project_id: "item.id" }
+
+  surfaces:
+    new_project_dialog:
+      contract: surface
+      variant: modal
+      props:
+        title: "$t:projects.dialog_title"
+        size: sm
+        content:
+          - layout: { type: stack, spacing: "spacing.md" }
+            children:
+              - contract: input_field
+                input_type: text
+                props:
+                  label: "$t:projects.field_name"
+                  placeholder: "$t:projects.field_name_placeholder"
+                  required: true
+                data_binding: "form.name"
+
+              - contract: input_field
+                input_type: select
+                props:
+                  label: "$t:projects.field_color"
+                  options:
+                    - { value: "#5B4FE8", label: "Indigo" }
+                    - { value: "#E8634F", label: "Coral" }
+                    - { value: "#2D9D5E", label: "Green" }
+                    - { value: "#D4920E", label: "Amber" }
+                    - { value: "#3B82D4", label: "Blue" }
+                    - { value: "#9B59B6", label: "Purple" }
+                data_binding: "form.color"
+
+              - contract: input_field
+                input_type: select
+                props:
+                  label: "$t:projects.field_icon"
+                  options:
+                    - { value: "folder", label: "Folder" }
+                    - { value: "briefcase", label: "Briefcase" }
+                    - { value: "rocket", label: "Rocket" }
+                    - { value: "star", label: "Star" }
+                    - { value: "heart", label: "Heart" }
+                    - { value: "lightbulb", label: "Lightbulb" }
+                data_binding: "form.icon"
+
+              - layout: { type: row, spacing: "spacing.sm", justify: "end" }
+                children:
+                  - contract: action_trigger
+                    variant: secondary
+                    size: sm
+                    props: { label: "$t:common.cancel" }
+                    action: { type: dismiss }
+                  - contract: action_trigger
+                    variant: primary
+                    size: sm
+                    props: { label: "$t:common.create" }
+                    action:
+                      type: api_call
+                      endpoint: "api.projects.create"
+                      body: "form"
+                      on_success:
+                        type: sequence
+                        actions:
+                          - { type: dismiss }
+                          - { type: feedback, variant: toast, message: "$t:projects.created", severity: success }
+                          - { type: refresh, target: "screens/projects.projects" }

package/examples/taskflow/screens/settings.yaml

@@ -0,0 +1,178 @@
+# ============================================================
+# TaskFlow — Settings Screen
+# ============================================================
+# Exercises: collection (list with sections), data_display,
+#            input_field (toggle, select), feedback (dialog),
+#            action_trigger (destructive)
+# ============================================================
+
+settings:
+  semantic: "App preferences, account, and data management"
+
+  data:
+    user: { source: "api.auth.currentUser" }
+    preferences: { source: "api.preferences.get" }
+
+  layout:
+    type: scroll_vertical
+    safe_area: true
+
+    sections:
+      # ---------- Profile card ----------
+      - id: profile
+        padding: "spacing.page_margin"
+        contract: data_display
+        variant: card
+        interactive: true
+        props:
+          title: "{user.name}"
+          subtitle: "{user.email}"
+          leading:
+            media: "user.avatar"
+            fallback: { initials: "user.name", background: "color.brand.primary" }
+            size: 48
+            radius: 24
+          trailing: { icon: "chevron_right", color: "color.text.tertiary" }
+        action:
+          type: navigate
+          destination: "screens/profile_edit"
+
+      # ---------- Preferences section ----------
+      - id: preferences_section
+        margin_top: "spacing.lg"
+        padding_h: "spacing.page_margin"
+        layout: { type: stack, spacing: "spacing.none" }
+        children:
+          - contract: data_display
+            variant: inline
+            props: { title: "$t:settings.preferences" }
+            tokens_override:
+              title_style: "typography.overline"
+              title_color: "color.text.tertiary"
+              margin_bottom: "spacing.sm"
+
+          # Theme picker
+          - contract: input_field
+            input_type: select
+            props:
+              label: "$t:settings.theme"
+              options:
+                - { value: "system", label: "$t:settings.theme_system" }
+                - { value: "light", label: "$t:settings.theme_light" }
+                - { value: "dark", label: "$t:settings.theme_dark" }
+                - { value: "warm", label: "$t:settings.theme_warm" }
+              value: "preferences.theme"
+            data_binding: "preferences.theme"
+            action:
+              type: api_call
+              endpoint: "api.preferences.update"
+              params: { key: "theme", value: "preferences.theme" }
+
+          # Default priority
+          - contract: input_field
+            input_type: select
+            props:
+              label: "$t:settings.default_priority"
+              options:
+                - { value: "low", label: "$t:priority.low" }
+                - { value: "medium", label: "$t:priority.medium" }
+                - { value: "high", label: "$t:priority.high" }
+              value: "preferences.default_priority"
+            data_binding: "preferences.default_priority"
+
+          # Notifications toggle
+          - contract: input_field
+            input_type: toggle
+            props:
+              label: "$t:settings.notifications"
+              value: "preferences.notifications_enabled"
+            data_binding: "preferences.notifications_enabled"
+
+          # Due date reminders toggle
+          - contract: input_field
+            input_type: toggle
+            props:
+              label: "$t:settings.reminders"
+              value: "preferences.reminders_enabled"
+              helper_text: "$t:settings.reminders_helper"
+            data_binding: "preferences.reminders_enabled"
+
+      # ---------- Data section ----------
+      - id: data_section
+        margin_top: "spacing.xl"
+        padding_h: "spacing.page_margin"
+        layout: { type: stack, spacing: "spacing.none" }
+        children:
+          - contract: data_display
+            variant: inline
+            props: { title: "$t:settings.data" }
+            tokens_override:
+              title_style: "typography.overline"
+              title_color: "color.text.tertiary"
+              margin_bottom: "spacing.sm"
+
+          # Export data
+          - contract: data_display
+            variant: compact
+            interactive: true
+            props:
+              title: "$t:settings.export"
+              leading: { icon: "square_arrow_up", color: "color.text.secondary", size: 18 }
+              trailing: { icon: "chevron_right", color: "color.text.tertiary" }
+            action:
+              type: api_call
+              endpoint: "api.data.export"
+              on_success:
+                feedback: { variant: toast, message: "$t:settings.export_success", severity: success }
+
+          # Delete account
+          - contract: action_trigger
+            variant: ghost
+            full_width: true
+            props:
+              label: "$t:settings.delete_account"
+              icon: "trash"
+            tokens_override:
+              text: "color.semantic.danger"
+            action:
+              type: confirm
+              confirmation:
+                contract: feedback
+                variant: dialog
+                props:
+                  title: "$t:settings.delete_title"
+                  message: "$t:settings.delete_message"
+                  severity: error
+                  actions:
+                    - label: "$t:common.cancel"
+                      variant: secondary
+                      action: { type: dismiss }
+                    - label: "$t:settings.delete_confirm"
+                      variant: destructive
+                      action:
+                        type: api_call
+                        endpoint: "api.auth.deleteAccount"
+                        on_success:
+                          type: navigate
+                          destination: "$root"
+
+      # ---------- App info ----------
+      - id: app_info
+        margin_top: "spacing.xl"
+        padding: "spacing.page_margin"
+        layout: { type: stack, spacing: "spacing.xs", align: "center" }
+        children:
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:settings.app_version"
+            tokens_override:
+              title_style: "typography.caption"
+              title_color: "color.text.tertiary"
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:settings.app_credit"
+            tokens_override:
+              title_style: "typography.caption"
+              title_color: "color.text.tertiary"

package/examples/taskflow/screens/task_detail.yaml

@@ -0,0 +1,317 @@
+# ============================================================
+# TaskFlow — Task Detail Screen
+# ============================================================
+# Exercises: data_display (hero, stat, compact), action_trigger,
+#            feedback (dialog), surface (sheet), input_field,
+#            adaptive layout (stat reflow, action arrangement)
+# ============================================================
+
+task_detail:
+  semantic: "Displays full task information with edit and delete actions"
+
+  params:
+    task_id: { type: string, required: true }
+
+  data:
+    task:
+      source: "api.tasks.getById"
+      params: { id: "params.task_id" }
+
+  layout:
+    type: scroll_vertical
+    safe_area: true
+
+    sections:
+      # ---------- Status + Priority header ----------
+      - id: header
+        padding: "spacing.page_margin"
+        layout: { type: stack, spacing: "spacing.md" }
+        children:
+          - contract: data_display
+            variant: hero
+            props:
+              title: "{task.title}"
+              badge:
+                text: "{task.status | format:status_label}"
+                severity: "{task.status | map:status_severity}"
+              metadata:
+                priority: "{task.priority | format:priority_label}"
+
+          # Stat cards — adaptive: grid on compact, row on regular+
+          - id: stat_group
+            layout:
+              adaptive:
+                compact:
+                  type: grid
+                  columns: 2
+                  gap: "spacing.sm"
+                regular:
+                  type: row
+                  spacing: "spacing.sm"
+            children:
+              - contract: data_display
+                variant: stat
+                props:
+                  title: "$t:task_detail.status"
+                  body: "{task.status | format:status_label}"
+                  leading:
+                    icon: "circle_fill"
+                    color: "color.status.{task.status}"
+                    size: 10
+
+              - contract: data_display
+                variant: stat
+                props:
+                  title: "$t:task_detail.priority"
+                  body: "{task.priority | format:priority_label}"
+                  leading:
+                    icon: "flag_fill"
+                    color: "color.priority.{task.priority}"
+                    size: 14
+
+              - contract: data_display
+                variant: stat
+                props:
+                  title: "$t:task_detail.due"
+                  body: "{task.due_date | format:date_relative}"
+
+      # ---------- Description ----------
+      - id: description
+        padding_h: "spacing.page_margin"
+        margin_top: "spacing.md"
+        condition: "task.description != null"
+        layout: { type: stack, spacing: "spacing.xs" }
+        adaptive:
+          expanded:
+            max_width: 640
+        children:
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:task_detail.description"
+            tokens_override:
+              title_style: "typography.overline"
+              title_color: "color.text.tertiary"
+          - contract: data_display
+            variant: inline
+            props:
+              title: "{task.description}"
+            tokens_override:
+              title_style: "typography.body"
+
+      # ---------- Media attachment ----------
+      - id: media_attachment
+        condition: "task.attachment.media_type != null"
+        padding_h: "spacing.page_margin"
+        margin_top: "spacing.md"
+        children:
+          - contract: x_media_player
+            variant: inline
+            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"
+            adaptive:
+              compact: { variant: inline }
+              expanded: { variant: inline, max_width: 640 }
+
+      # ---------- Details section ----------
+      - id: details
+        padding_h: "spacing.page_margin"
+        margin_top: "spacing.lg"
+        layout: { type: stack, spacing: "spacing.none" }
+        adaptive:
+          expanded:
+            max_width: 640
+        children:
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:task_detail.details"
+            tokens_override:
+              title_style: "typography.overline"
+              title_color: "color.text.tertiary"
+
+          # Project row
+          - contract: data_display
+            variant: compact
+            interactive: true
+            props:
+              title: "$t:task_detail.project"
+              trailing: "{task.project.name}"
+              leading: { icon: "folder", color: "color.text.secondary", size: 18 }
+            action:
+              type: navigate
+              destination: "screens/project_detail"
+              params: { project_id: "task.project_id" }
+
+          # Assignee row
+          - contract: data_display
+            variant: compact
+            interactive: true
+            props:
+              title: "$t:task_detail.assignee"
+              trailing: "{task.assignee.name | default:$t:task_detail.unassigned}"
+              leading: { icon: "person", color: "color.text.secondary", size: 18 }
+            action:
+              type: present
+              surface: "assignee_picker"
+
+          # Tags row
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.tags"
+              trailing:
+                contract: collection
+                variant: chips
+                props:
+                  data: "task.tags"
+                  item_contract: data_display
+                  item_variant: inline
+                  item_props_map:
+                    title: "item"
+              leading: { icon: "tag", color: "color.text.secondary", size: 18 }
+
+          # Created row
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.created"
+              trailing: "{task.created_at | format:date}"
+              leading: { icon: "clock", color: "color.text.secondary", size: 18 }
+
+      # ---------- Actions ----------
+      - id: actions
+        padding: "spacing.page_margin"
+        margin_top: "spacing.xl"
+        layout:
+          adaptive:
+            compact:
+              type: stack
+              spacing: "spacing.sm"
+            regular:
+              type: row
+              spacing: "spacing.sm"
+              wrap: true
+        children:
+          - contract: action_trigger
+            variant: primary
+            props:
+              label: "$t:task_detail.edit"
+              icon: "pencil"
+            adaptive:
+              compact: { full_width: true }
+              regular: { full_width: false }
+            action:
+              type: navigate
+              destination: "flows/edit_task"
+              params: { task_id: "task.id" }
+              presentation: "sheet"
+
+          - contract: action_trigger
+            variant: secondary
+            props:
+              label: "$t:task_detail.toggle_status"
+              t_params:
+                is_done: "task.status == done"
+              icon: "{task.status == done ? 'arrow_uturn_left' : 'checkmark'}"
+            adaptive:
+              compact: { full_width: true }
+              regular: { full_width: false }
+            action:
+              type: api_call
+              endpoint: "api.tasks.toggleStatus"
+              params: { id: "task.id" }
+              optimistic:
+                target: "task.status"
+                value: "{task.status == done ? 'todo' : 'done'}"
+                revert_on_error: true
+              on_success:
+                type: feedback
+                variant: toast
+                message: "$t:task_detail.task_updated"
+                severity: success
+                duration: 3000
+              on_error:
+                type: feedback
+                variant: toast
+                message: "$t:task_detail.update_error"
+                severity: error
+
+          - contract: action_trigger
+            variant: destructive
+            props:
+              label: "$t:task_detail.delete"
+              icon: "trash"
+            adaptive:
+              compact: { full_width: true }
+              regular: { full_width: false }
+            action:
+              type: confirm
+              confirmation:
+                contract: feedback
+                variant: dialog
+                props:
+                  title: "$t:task_detail.delete_title"
+                  message: "$t:task_detail.delete_message"
+                  t_params:
+                    title: "task.title"
+                  actions:
+                    - label: "$t:common.cancel"
+                      variant: secondary
+                      action: { type: dismiss }
+                    - label: "$t:common.delete"
+                      variant: destructive
+                      action:
+                        type: api_call
+                        endpoint: "api.tasks.delete"
+                        params: { id: "task.id" }
+                        on_success:
+                          type: sequence
+                          actions:
+                            - type: navigate
+                              destination: "$back"
+                            - type: feedback
+                              variant: toast
+                              message: "$t:task_detail.task_deleted"
+                              severity: neutral
+
+  # ---------- Surfaces ----------
+  surfaces:
+    assignee_picker:
+      contract: surface
+      props:
+        title: "$t:task_detail.assign_to"
+        content:
+          - contract: input_field
+            input_type: text
+            props:
+              label: "$t:task_detail.search_people"
+              placeholder: "$t:task_detail.search_people_placeholder"
+              icon: { ref: "search", position: leading }
+          - contract: collection
+            variant: list
+            props:
+              data: "api.users.list"
+              item_contract: data_display
+              item_variant: compact
+              item_props_map:
+                title: "item.name"
+                subtitle: "item.email"
+                leading:
+                  media: "item.avatar"
+                  fallback: { initials: "item.name", background: "color.brand.primary" }
+              interactive: true
+            action:
+              type: api_call
+              endpoint: "api.tasks.assignTo"
+              params: { task_id: "task.id", user_id: "item.id" }
+              on_success: { type: dismiss }
+      adaptive:
+        compact: { variant: sheet, detents: [medium] }
+        expanded: { variant: panel, width: 360 }