DesignComponent `design.component@1`

Generated at 2026-11-13 06:25:48 UTC from openvibe-contracts v0.419.0 and openvibe-sdk v0.161.0.

Version: 1.0.0
Owner: design
Visibility: public
Status: active
Compatibility: backward
Schema: https://openvibe.network/contracts/design/component.v1.json

design.component@1: a platform-neutral OpenVibe interface definition served by openvibe.design/api/v1/components.

Fields

Field	Type	Required	Constraints
`schema`	const	yes	`= "design.component@1"`
`name`	string	yes	`pattern ^[a-z][a-z0-9-]{0,63}$`
`title`	string	yes	`minLength 1` `maxLength 120`
`summary`	string	yes	`minLength 1` `maxLength 500`
`anatomy`	array of object	yes	`minItems 1` `maxItems 32` `items: no other fields`
`anatomy[].part`	string	yes	`minLength 1` `maxLength 80`
`anatomy[].role`	string	yes	`minLength 1` `maxLength 300`
`props`	object	yes
`states`	array of string	yes	`minItems 1` `maxItems 30` `unique items` `items: minLength 1` `items: maxLength 80`
`tokens`	array of string	yes	`minItems 1` `maxItems 50` `unique items` `items: minLength 1` `items: maxLength 100`
`behaviors`	object	yes	`no other fields`
`behaviors.keyboardAware`	boolean	yes
`behaviors.outsideTapCloses`	boolean	yes
`behaviors.scrollLock`	boolean	yes
`behaviors.reducedMotion`	string	yes	`minLength 1` `maxLength 300`
`accessibility`	object	yes	`no other fields`
`accessibility.name`	string	yes	`minLength 1` `maxLength 300`
`accessibility.target`	string	yes	`minLength 1` `maxLength 300`
`accessibility.focus`	string	yes	`minLength 1` `maxLength 300`
`platforms`	object	yes	`no other fields`
`platforms.web`	object	yes	`no other fields`
`platforms.web.module`	string	yes	`minLength 1`
`platforms.web.markup`	string	yes	`minLength 1`
`platforms.web.demo`	string	yes	`pattern ^/components/[a-z0-9-]+$`
`platforms.android`	object	yes	`no other fields`
`platforms.android.toolkit`	const	yes	`= "Jetpack Compose"`
`platforms.android.material3`	string	yes	`minLength 1`
`platforms.android.specification`	string	yes	`minLength 1`
`platforms.ios`	object	yes	`no other fields`
`platforms.ios.toolkit`	const	yes	`= "SwiftUI"`
`platforms.ios.specification`	string	yes	`minLength 1`
`examples`	array of object	yes	`minItems 1` `maxItems 20` `items: no other fields`
`examples[].title`	string	yes	`minLength 1`
`examples[].props`	object	yes

Examples

From the contract's own test fixtures: valid ones validate, rejected ones must fail.

Valid: sheet

{
  "schema": "design.component@1",
  "name": "sheet",
  "title": "Sheet",
  "summary": "A modal task surface: one heading, one close action and scrollable content.",
  "anatomy": [
    {
      "part": "handle",
      "role": "touch affordance"
    },
    {
      "part": "header",
      "role": "title and close"
    },
    {
      "part": "body",
      "role": "task controls"
    }
  ],
  "props": {
    "title": "string",
    "open": "boolean",
    "body": "content"
  },
  "states": [
    "closed",
    "opening",
    "open",
    "closing"
  ],
  "tokens": [
    "color.bg.card",
    "color.line.strong",
    "radius.lg"
  ],
  "behaviors": {
    "keyboardAware": true,
    "outsideTapCloses": true,
    "scrollLock": true,
    "reducedMotion": "Remove movement; keep the state change."
  },
  "accessibility": {
    "name": "Sheet",
    "target": "At least 44 × 44 dp or pt for every touch action",
    "focus": "Trap focus while open; Escape closes and returns focus"
  },
  "platforms": {
    "web": {
      "module": "openvibe-shared/kit",
      "markup": "kit.sheet({ id, title, body })",
      "demo": "/components/sheet"
    },
    "android": {
      "toolkit": "Jetpack Compose",
      "material3": "SurfaceContainerHigh",
      "specification": "Use ModalBottomSheet with a heading, close control and sheet state."
    },
    "ios": {
      "toolkit": "SwiftUI",
      "specification": "Use .sheet with a NavigationStack and a toolbar close button."
    }
  },
  "examples": [
    {
      "title": "Default",
      "props": {
        "title": "Add a site"
      }
    }
  ]
}

Rejected: no-android

{
  "schema": "design.component@1",
  "name": "sheet",
  "title": "Sheet",
  "summary": "A modal task surface: one heading, one close action and scrollable content.",
  "anatomy": [
    {
      "part": "handle",
      "role": "touch affordance"
    },
    {
      "part": "header",
      "role": "title and close"
    },
    {
      "part": "body",
      "role": "task controls"
    }
  ],
  "props": {
    "title": "string",
    "open": "boolean",
    "body": "content"
  },
  "states": [
    "closed",
    "opening",
    "open",
    "closing"
  ],
  "tokens": [
    "color.bg.card",
    "color.line.strong",
    "radius.lg"
  ],
  "behaviors": {
    "keyboardAware": true,
    "outsideTapCloses": true,
    "scrollLock": true,
    "reducedMotion": "Remove movement; keep the state change."
  },
  "accessibility": {
    "name": "Sheet",
    "target": "At least 44 × 44 dp or pt for every touch action",
    "focus": "Trap focus while open; Escape closes and returns focus"
  },
  "platforms": {
    "web": {
      "module": "openvibe-shared/kit",
      "markup": "kit.sheet({ id, title, body })",
      "demo": "/components/sheet"
    },
    "ios": {
      "toolkit": "SwiftUI",
      "specification": "Use .sheet with a NavigationStack and a toolbar close button."
    }
  },
  "examples": [
    {
      "title": "Default",
      "props": {
        "title": "Add a site"
      }
    }
  ]
}

Rejected: no-ios

{
  "schema": "design.component@1",
  "name": "sheet",
  "title": "Sheet",
  "summary": "A modal task surface: one heading, one close action and scrollable content.",
  "anatomy": [
    {
      "part": "handle",
      "role": "touch affordance"
    },
    {
      "part": "header",
      "role": "title and close"
    },
    {
      "part": "body",
      "role": "task controls"
    }
  ],
  "props": {
    "title": "string",
    "open": "boolean",
    "body": "content"
  },
  "states": [
    "closed",
    "opening",
    "open",
    "closing"
  ],
  "tokens": [
    "color.bg.card",
    "color.line.strong",
    "radius.lg"
  ],
  "behaviors": {
    "keyboardAware": true,
    "outsideTapCloses": true,
    "scrollLock": true,
    "reducedMotion": "Remove movement; keep the state change."
  },
  "accessibility": {
    "name": "Sheet",
    "target": "At least 44 × 44 dp or pt for every touch action",
    "focus": "Trap focus while open; Escape closes and returns focus"
  },
  "platforms": {
    "web": {
      "module": "openvibe-shared/kit",
      "markup": "kit.sheet({ id, title, body })",
      "demo": "/components/sheet"
    },
    "android": {
      "toolkit": "Jetpack Compose",
      "material3": "SurfaceContainerHigh",
      "specification": "Use ModalBottomSheet with a heading, close control and sheet state."
    }
  },
  "examples": [
    {
      "title": "Default",
      "props": {
        "title": "Add a site"
      }
    }
  ]
}

Validate

const contracts = require('openvibe-contracts');
contracts.validate('design.component@1', value);   // { valid, errors: [{ path, message }] }

DesignComponent design.component@1

Fields

Examples

Validate

DesignComponent `design.component@1`