openuispec 0.1.18 → 0.1.20

package/examples/todo-orbit/openuispec/screens/home.yaml

@@ -0,0 +1,173 @@
+home:
+  semantic: "Main todo list with search, filters, completion toggles, and a quick-create action"
+  title: "$t:nav.tasks"
+  status: ready
+
+  data:
+    tasks:
+      source: "api.tasks.list"
+      params:
+        filter: "state.active_filter"
+        search: "state.search_query"
+    task_counts:
+      source: "api.tasks.counts"
+
+  state:
+    active_filter:
+      type: enum
+      values: [all, open, done]
+      default: all
+    search_query:
+      type: string
+      default: ""
+    selected_task_id:
+      type: string
+      default: ""
+
+  navigation:
+    contract: nav_container
+    props:
+      items:
+        - id: "tasks"
+          label: "$t:nav.tasks"
+          icon: "checkmark_list"
+          icon_active: "checkmark_list_fill"
+          destination: "screens/home"
+        - id: "analytics"
+          label: "$t:nav.analytics"
+          icon: "chart_line"
+          icon_active: "chart_line_fill"
+          destination: "screens/analytics"
+        - id: "settings"
+          label: "$t:nav.settings"
+          icon: "gear"
+          icon_active: "gear_fill"
+          destination: "screens/settings"
+      selected: "tasks"
+    adaptive:
+      compact: { variant: tab_bar }
+      regular: { variant: rail }
+      expanded: { variant: sidebar, collapsed: false }
+
+  layout:
+    adaptive:
+      compact:
+        type: scroll_vertical
+        safe_area: true
+        padding: "spacing.page_margin"
+      expanded:
+        type: split_view
+        primary_width: 0.42
+        primary:
+          sections: [hero, search, filters, task_list]
+        secondary:
+          sections: ["screens/task_detail"]
+          params:
+            task_id: "state.selected_task_id"
+    sections:
+      - id: hero
+        layout: { type: stack, spacing: "spacing.sm" }
+        children:
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:home.title"
+              subtitle: "$t:home.summary"
+              t_params:
+                total: "task_counts.all"
+                open: "task_counts.open"
+            tokens_override:
+              title_style: "typography.heading_lg"
+              subtitle_style: "typography.body_sm"
+
+      - id: search
+        margin_top: "spacing.md"
+        contract: input_field
+        input_type: text
+        props:
+          label: "$t:home.search_label"
+          placeholder: "$t:home.search_placeholder"
+          value: "state.search_query"
+          icon: { ref: "search", position: leading }
+          clearable: true
+
+      - id: filters
+        margin_top: "spacing.md"
+        contract: collection
+        variant: chips
+        props:
+          data:
+            - { id: "all", label: "$t:home.filter.all", count: "task_counts.all" }
+            - { id: "open", label: "$t:home.filter.open", count: "task_counts.open" }
+            - { id: "done", label: "$t:home.filter.done", count: "task_counts.done" }
+          item_contract: action_trigger
+          item_variant: ghost
+          item_props_map:
+            label: "{item.label} ({item.count})"
+          selectable: true
+          selection_mode: single
+          selected: "state.active_filter"
+        action:
+          type: set_state
+          target: "state.active_filter"
+          value: "item.id"
+
+      - id: task_list
+        margin_top: "spacing.lg"
+        contract: collection
+        variant: list
+        props:
+          data: "tasks"
+          item_contract: data_display
+          item_variant: compact
+          item_props_map:
+            title: "item.title"
+            subtitle: "{item.due_date | format:date_relative}"
+            leading:
+              contract: input_field
+              input_type: checkbox
+              props:
+                value: "item.status == done"
+                label: "$t:home.mark_complete"
+                t_params:
+                  title: "item.title"
+              action:
+                type: api_call
+                endpoint: "api.tasks.toggleStatus"
+                params: { id: "item.id" }
+                optimistic:
+                  target: "item.status"
+                  value: "{item.status == done ? open : done}"
+                  revert_on_error: true
+            trailing:
+              contract: data_display
+              variant: inline
+              props:
+                badge:
+                  dot: true
+                  severity: "{item.priority | map:priority_to_severity}"
+          pull_to_refresh: true
+          empty_state:
+            icon: "checkmark_circle_fill"
+            title: "$t:home.empty_title"
+            body: "$t:home.empty_body"
+        action:
+          type: sequence
+          actions:
+            - { type: set_state, target: "state.selected_task_id", value: "item.id" }
+            - { type: navigate, destination: "screens/task_detail", params: { task_id: "item.id" } }
+
+      - id: fab
+        position: "floating-bottom-trailing"
+        contract: action_trigger
+        variant: primary
+        size: lg
+        props:
+          label: "$t:home.new_task"
+          icon: "plus"
+        tokens_override:
+          shadow: "elevation.lg"
+        action:
+          type: navigate
+          destination: "flows/create_task"
+          presentation: "sheet"

package/examples/todo-orbit/openuispec/screens/settings.yaml

@@ -0,0 +1,149 @@
+settings:
+  semantic: "Preferences screen for application language and theme"
+  title: "$t:nav.settings"
+  status: ready
+
+  data:
+    preferences:
+      source: "api.preferences.get"
+
+  state:
+    is_saving:
+      type: bool
+      default: false
+
+  navigation:
+    contract: nav_container
+    props:
+      items:
+        - id: "tasks"
+          label: "$t:nav.tasks"
+          icon: "checkmark_list"
+          icon_active: "checkmark_list_fill"
+          destination: "screens/home"
+        - id: "analytics"
+          label: "$t:nav.analytics"
+          icon: "chart_line"
+          icon_active: "chart_line_fill"
+          destination: "screens/analytics"
+        - id: "settings"
+          label: "$t:nav.settings"
+          icon: "gear"
+          icon_active: "gear_fill"
+          destination: "screens/settings"
+      selected: "settings"
+    adaptive:
+      compact: { variant: tab_bar }
+      regular: { variant: rail }
+      expanded: { variant: sidebar, collapsed: false }
+
+  layout:
+    type: scroll_vertical
+    safe_area: true
+    padding: "spacing.page_margin"
+    sections:
+      - id: header
+        layout: { type: stack, spacing: "spacing.sm" }
+        children:
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:settings.title"
+              subtitle: "$t:settings.subtitle"
+            tokens_override:
+              title_style: "typography.heading_lg"
+              subtitle_style: "typography.body_sm"
+
+      - id: form
+        form_id: "settings_form"
+        margin_top: "spacing.lg"
+        layout: { type: stack, spacing: "spacing.md" }
+        children:
+          - contract: input_field
+            input_type: select
+            props:
+              label: "$t:settings.language"
+              icon: { ref: "globe", position: leading }
+              options:
+                - { value: "en", label: "$t:settings.language_en" }
+                - { value: "ru", label: "$t:settings.language_ru" }
+            data_binding: "form.locale"
+
+          - contract: input_field
+            input_type: select
+            props:
+              label: "$t:settings.theme"
+              options:
+                - { value: "light", label: "$t:settings.theme_light" }
+                - { value: "dark", label: "$t:settings.theme_dark" }
+            data_binding: "form.theme"
+
+          - contract: input_field
+            input_type: toggle
+            props:
+              label: "$t:settings.reminders"
+              helper_text: "$t:settings.reminders_helper"
+              value: "preferences.reminders_enabled"
+            data_binding: "form.reminders_enabled"
+
+          - contract: input_field
+            input_type: toggle
+            props:
+              label: "$t:settings.daily_summary"
+              helper_text: "$t:settings.daily_summary_helper"
+              value: "preferences.daily_summary_enabled"
+            data_binding: "form.daily_summary_enabled"
+
+          - contract: action_trigger
+            variant: primary
+            full_width: true
+            props:
+              label: "$t:settings.save"
+              loading_label: "$t:settings.saving"
+            state_binding:
+              loading: "state.is_saving"
+            action:
+              type: submit_form
+              form_id: "settings_form"
+
+      - id: automation
+        margin_top: "spacing.xl"
+        layout: { type: stack, spacing: "spacing.sm" }
+        children:
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:settings.automation_title"
+              subtitle: "$t:settings.automation_subtitle"
+            tokens_override:
+              title_style: "typography.heading_sm"
+              subtitle_style: "typography.body_sm"
+
+          - contract: action_trigger
+            variant: primary
+            full_width: true
+            props:
+              label: "$t:settings.automation_create_rule"
+              icon: "calendar"
+            action:
+              type: navigate
+              destination: "flows/create_recurring_rule"
+
+    on_submit:
+      type: sequence
+      actions:
+        - { type: set_state, target: "state.is_saving", value: true }
+        - type: api_call
+          endpoint: "api.preferences.update"
+          body: "form"
+          on_success:
+            type: sequence
+            actions:
+              - { type: set_state, target: "state.is_saving", value: false }
+              - { type: feedback, variant: toast, message: "$t:settings.saved", severity: success, duration: 2500 }
+              - { type: refresh, target: "screens/settings.preferences" }
+          on_error:
+            type: sequence
+            actions:
+              - { type: set_state, target: "state.is_saving", value: false }
+              - { type: feedback, variant: banner, title: "$t:settings.error_title", message: "{error.message}", severity: error }

package/examples/todo-orbit/openuispec/screens/task_detail.yaml

@@ -0,0 +1,223 @@
+task_detail:
+  semantic: "Displays full task information with edit, status, and destructive actions"
+  status: ready
+
+  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:
+      - id: header
+        padding: "spacing.page_margin"
+        layout: { type: stack, spacing: "spacing.md" }
+        children:
+          - contract: data_display
+            variant: hero
+            props:
+              title: "{task.title}"
+              subtitle: "{task.due_date | default:$t:task_detail.no_due_date}"
+              badge:
+                text: "{task.status | format:status_label}"
+                severity: "{task.status | map:task_status_severity}"
+              metadata:
+                priority: "{task.priority | format:priority_label}"
+
+          - 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}"
+              - contract: data_display
+                variant: stat
+                props:
+                  title: "$t:task_detail.priority"
+                  body: "{task.priority | format:priority_label}"
+              - contract: data_display
+                variant: stat
+                props:
+                  title: "$t:task_detail.created"
+                  body: "{task.created_at | format:date}"
+              - contract: data_display
+                variant: stat
+                props:
+                  title: "$t:task_detail.updated"
+                  body: "{task.updated_at | format:date}"
+
+      - id: notes
+        padding_h: "spacing.page_margin"
+        margin_top: "spacing.md"
+        condition: "task.notes != null"
+        layout: { type: stack, spacing: "spacing.xs" }
+        adaptive:
+          expanded:
+            max_width: 720
+        children:
+          - contract: data_display
+            variant: inline
+            props:
+              title: "$t:task_detail.notes"
+            tokens_override:
+              title_style: "typography.heading_sm"
+          - contract: data_display
+            variant: inline
+            props:
+              title: "{task.notes}"
+            tokens_override:
+              title_style: "typography.body"
+
+      - id: details
+        padding_h: "spacing.page_margin"
+        margin_top: "spacing.lg"
+        layout: { type: stack, spacing: "spacing.none" }
+        adaptive:
+          expanded:
+            max_width: 720
+        children:
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.due_date"
+              trailing: "{task.due_date | default:$t:task_detail.no_due_date}"
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.created"
+              trailing: "{task.created_at | format:date}"
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.updated"
+              trailing: "{task.updated_at | format:date}"
+
+      - 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"
+            action:
+              type: navigate
+              destination: "flows/edit_task"
+              params: { task_id: "task.id" }
+              presentation: "sheet"
+
+          - contract: action_trigger
+            variant: ghost
+            props:
+              label: "$t:task_detail.toggle_status"
+              icon: "checkmark"
+            action:
+              type: api_call
+              endpoint: "api.tasks.toggleStatus"
+              params: { id: "task.id" }
+              optimistic:
+                target: "task.status"
+                value: "{task.status == done ? open : done}"
+                revert_on_error: true
+              on_success:
+                type: feedback
+                variant: toast
+                message: "$t:task_detail.updated_feedback"
+                severity: success
+                duration: 2500
+              on_error:
+                type: feedback
+                variant: toast
+                message: "$t:task_detail.update_error"
+                severity: error
+
+          - contract: action_trigger
+            variant: ghost
+            props:
+              label: "$t:task_detail.more_info"
+            action:
+              type: present
+              surface: "task_meta"
+
+          - contract: action_trigger
+            variant: destructive
+            props:
+              label: "$t:task_detail.delete"
+              icon: "trash"
+            action:
+              type: confirm
+              confirmation:
+                contract: feedback
+                variant: dialog
+                props:
+                  title: "$t:task_detail.delete_title"
+                  message: "$t:task_detail.delete_message"
+                  severity: error
+                  actions:
+                    - label: "$t:common.cancel"
+                      variant: secondary
+                      action: { type: dismiss }
+                    - label: "$t:common.delete"
+                      variant: destructive
+                      action:
+                        type: sequence
+                        actions:
+                          - type: api_call
+                            endpoint: "api.tasks.delete"
+                            params: { id: "task.id" }
+                          - { type: feedback, variant: toast, message: "$t:task_detail.deleted_feedback", severity: success, duration: 2500 }
+                          - { type: navigate, destination: "screens/home" }
+
+  surfaces:
+    task_meta:
+      contract: surface
+      variant: sheet
+      props:
+        title: "$t:task_detail.more_info"
+        size: md
+        content:
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.status"
+              trailing: "{task.status | format:status_label}"
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.priority"
+              trailing: "{task.priority | format:priority_label}"
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.created"
+              trailing: "{task.created_at | format:date}"
+          - contract: data_display
+            variant: compact
+            props:
+              title: "$t:task_detail.updated"
+              trailing: "{task.updated_at | format:date}"

package/examples/todo-orbit/openuispec/tokens/color.yaml

@@ -0,0 +1,93 @@
+color:
+  brand:
+    primary:
+      semantic: "Primary accent for create actions, selected states, and focused UI"
+      reference: "#0F766E"
+      range:
+        hue: [172, 182]
+        saturation: [65, 82]
+        lightness: [30, 42]
+      on_color:
+        reference: "#FFFFFF"
+        contrast_min: 4.5
+    secondary:
+      semantic: "Warm accent for highlights and due-date emphasis"
+      reference: "#F59E0B"
+      range:
+        hue: [34, 42]
+        saturation: [85, 96]
+        lightness: [46, 58]
+      on_color:
+        reference: "#111827"
+        contrast_min: 4.5
+
+  surface:
+    primary:
+      semantic: "Main app background"
+      reference: "#FCFCF9"
+    secondary:
+      semantic: "Cards, grouped controls, and search surfaces"
+      reference: "#F3F4EE"
+    tertiary:
+      semantic: "Canvas tint behind elevated content"
+      reference: "#E7EBE4"
+
+  text:
+    primary:
+      semantic: "Primary text and screen titles"
+      reference: "#172026"
+      contrast_min: 7.0
+    secondary:
+      semantic: "Supportive metadata and helper copy"
+      reference: "#52606D"
+      contrast_min: 4.5
+    tertiary:
+      semantic: "Hints, placeholders, and quiet metadata"
+      reference: "#7B8794"
+      contrast_min: 3.0
+    disabled:
+      semantic: "Disabled text and inactive controls"
+      reference: "#B0B8C1"
+
+  semantic:
+    success:
+      semantic: "Completed tasks and successful actions"
+      reference: "#15803D"
+      range: { hue: [126, 136], saturation: [62, 78], lightness: [28, 40] }
+      on_color: { reference: "#FFFFFF", contrast_min: 4.5 }
+    warning:
+      semantic: "High-priority tasks and caution states"
+      reference: "#D97706"
+      range: { hue: [30, 38], saturation: [86, 96], lightness: [42, 54] }
+      on_color: { reference: "#FFFFFF", contrast_min: 4.5 }
+    danger:
+      semantic: "Destructive actions and irreversible warnings"
+      reference: "#DC2626"
+      range: { hue: [0, 8], saturation: [72, 88], lightness: [46, 56] }
+      on_color: { reference: "#FFFFFF", contrast_min: 4.5 }
+    info:
+      semantic: "Active task states and informational badges"
+      reference: "#2563EB"
+      range: { hue: [214, 224], saturation: [74, 90], lightness: [48, 58] }
+      on_color: { reference: "#FFFFFF", contrast_min: 4.5 }
+
+  border:
+    default:
+      semantic: "Default separators and field borders"
+      reference: "#CBD2D9"
+      opacity: 0.28
+    emphasis:
+      semantic: "Focused and selected outlines"
+      reference: "#0F766E"
+      opacity: 0.4
+
+  priority:
+    low:
+      semantic: "Low-priority task marker"
+      reference: "#94A3B8"
+    medium:
+      semantic: "Medium-priority task marker"
+      reference: "#2563EB"
+    high:
+      semantic: "High-priority task marker"
+      reference: "#D97706"

package/examples/todo-orbit/openuispec/tokens/elevation.yaml

@@ -0,0 +1,25 @@
+elevation:
+  none:
+    semantic: "Flat surfaces with no elevation"
+    value: "none"
+
+  sm:
+    semantic: "Subtle lift for fields and pressed states"
+    platform:
+      ios: { shadow: { color: "black", opacity: 0.05, radius: 4, y: 1 } }
+      android: { elevation: 1 }
+      web: { box_shadow: "0 1px 3px rgba(0,0,0,0.05)" }
+
+  md:
+    semantic: "Cards and popovers"
+    platform:
+      ios: { shadow: { color: "black", opacity: 0.08, radius: 10, y: 3 } }
+      android: { elevation: 3 }
+      web: { box_shadow: "0 6px 18px rgba(23,32,38,0.08)" }
+
+  lg:
+    semantic: "Floating action buttons and modal surfaces"
+    platform:
+      ios: { shadow: { color: "black", opacity: 0.12, radius: 18, y: 6 } }
+      android: { elevation: 6 }
+      web: { box_shadow: "0 12px 28px rgba(23,32,38,0.14)" }