@adia-ai/web-components 0.0.1

package/components/image/image.yaml

@@ -0,0 +1,477 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaImage
+tag: image-ui
+component: Image
+category: display
+version: 1
+description: Lazy-loading image with skeleton fallback. Shows skeleton while loading, falls back on error.
+props:
+  alt:
+    description: Alt text for the image.
+    type: string
+    default: ""
+  aspect:
+    description: Aspect ratio preset — sets the intrinsic aspect-ratio CSS property.
+    type: string
+    default: ""
+    enum:
+      - ""
+      - 1/1
+      - 3/2
+      - 4/3
+      - 16/9
+      - 21/9
+      - 2/3
+      - 3/4
+      - 9/16
+  fallback:
+    description: Fallback image URL on error
+    type: string
+    default: ""
+  fit:
+    description: Object-fit mode
+    type: string
+    default: cover
+    enum:
+      - cover
+      - contain
+      - fill
+      - none
+  height:
+    description: CSS height
+    type: string
+    default: ""
+  lazy:
+    description: Enables native lazy loading.
+    type: boolean
+    default: false
+  radius:
+    description: Border radius token
+    type: string
+    default: ""
+    enum:
+      - sm
+      - md
+      - lg
+      - full
+  src:
+    description: Image source URL.
+    type: string
+    default: ""
+  width:
+    description: CSS width
+    type: string
+    default: ""
+events: {}
+slots:
+  img:
+    description: Stamped <img> element
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: bleed-design-settings
+    description: Design system settings page with brand header, photo upload section, bleed/margin
+      controls, and approval workflow.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "photo-sec",
+            "settings-sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "hdr-title",
+            "hdr-desc"
+          ]
+        },
+        {
+          "id": "hdr-title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Bleed Design Settings",
+          "variant": "section"
+        },
+        {
+          "id": "hdr-desc",
+          "component": "Text",
+          "slot": "description",
+          "textContent": "Configure bleed margins, upload artwork, and preview before approval.",
+          "variant": "body"
+        },
+        {
+          "id": "photo-sec",
+          "component": "Section",
+          "children": [
+            "photo-col"
+          ]
+        },
+        {
+          "id": "photo-col",
+          "component": "Column",
+          "children": [
+            "photo-label",
+            "photo-img",
+            "photo-btn"
+          ],
+          "gap": "3"
+        },
+        {
+          "id": "photo-label",
+          "component": "Text",
+          "textContent": "Artwork Upload",
+          "variant": "label"
+        },
+        {
+          "id": "photo-img",
+          "component": "Image",
+          "src": "https://picsum.photos/400/200",
+          "aspect": "2/1"
+        },
+        {
+          "id": "photo-btn",
+          "component": "Button",
+          "text": "Upload Photo",
+          "variant": "secondary"
+        },
+        {
+          "id": "settings-sec",
+          "component": "Section",
+          "children": [
+            "settings-col"
+          ]
+        },
+        {
+          "id": "settings-col",
+          "component": "Column",
+          "children": [
+            "bleed-mode",
+            "bleed-margin",
+            "bleed-unit",
+            "approved"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "bleed-mode",
+          "component": "Select",
+          "label": "Bleed Mode",
+          "name": "bleed-mode",
+          "placeholder": "Select mode..."
+        },
+        {
+          "id": "bleed-margin",
+          "component": "Input",
+          "label": "Bleed Margin",
+          "name": "bleed-margin",
+          "type": "number",
+          "placeholder": "e.g. 3"
+        },
+        {
+          "id": "bleed-unit",
+          "component": "Select",
+          "label": "Unit",
+          "name": "bleed-unit",
+          "placeholder": "mm"
+        },
+        {
+          "id": "approved",
+          "component": "CheckBox",
+          "label": "Approved for production",
+          "name": "approved"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "preview-btn",
+            "apply-btn"
+          ]
+        },
+        {
+          "id": "preview-btn",
+          "component": "Button",
+          "text": "Preview",
+          "variant": "secondary"
+        },
+        {
+          "id": "apply-btn",
+          "component": "Button",
+          "text": "Apply",
+          "variant": "primary"
+        }
+      ]
+  - name: file-upload-gallery
+    description: Image upload card with drag-and-drop zone and a 3-column preview grid of placeholder
+      image cards. Footer holds cancel and upload action buttons.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "variant": "section",
+          "textContent": "Upload Images"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "col"
+          ]
+        },
+        {
+          "id": "col",
+          "component": "Column",
+          "gap": "4",
+          "children": [
+            "uploader",
+            "preview-grid"
+          ]
+        },
+        {
+          "id": "uploader",
+          "component": "Upload",
+          "accept": "image/*",
+          "multiple": true,
+          "hint": "Drag images here or click to browse"
+        },
+        {
+          "id": "preview-grid",
+          "component": "Grid",
+          "columns": "3",
+          "gap": "3",
+          "children": [
+            "preview-1",
+            "preview-2",
+            "preview-3"
+          ]
+        },
+        {
+          "id": "preview-1",
+          "component": "Card",
+          "variant": "outlined",
+          "children": [
+            "img-1"
+          ]
+        },
+        {
+          "id": "img-1",
+          "component": "Image",
+          "src": "",
+          "alt": "Preview 1",
+          "height": "120px",
+          "fit": "cover",
+          "radius": "sm"
+        },
+        {
+          "id": "preview-2",
+          "component": "Card",
+          "variant": "outlined",
+          "children": [
+            "img-2"
+          ]
+        },
+        {
+          "id": "img-2",
+          "component": "Image",
+          "src": "",
+          "alt": "Preview 2",
+          "height": "120px",
+          "fit": "cover",
+          "radius": "sm"
+        },
+        {
+          "id": "preview-3",
+          "component": "Card",
+          "variant": "outlined",
+          "children": [
+            "img-3"
+          ]
+        },
+        {
+          "id": "img-3",
+          "component": "Image",
+          "src": "",
+          "alt": "Preview 3",
+          "height": "120px",
+          "fit": "cover",
+          "radius": "sm"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "ftr-actions"
+          ]
+        },
+        {
+          "id": "ftr-actions",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "cancel-btn",
+            "upload-btn"
+          ]
+        },
+        {
+          "id": "cancel-btn",
+          "component": "Button",
+          "text": "Cancel",
+          "variant": "ghost"
+        },
+        {
+          "id": "upload-btn",
+          "component": "Button",
+          "text": "Upload",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - image
+  - ecommerce
+  - store
+  - marketplace
+  - catalog
+  - grid
+  - upload
+  - attach
+  - dropzone
+  - photos
+  - pictures
+  - gallery
+  - portfolio
+  - lightbox
+  - media
+  - instagram
+  - assets
+synonyms:
+  assets:
+    - data
+    - table
+    - file
+    - image
+    - gallery
+  attach:
+    - file
+    - upload
+    - image
+  catalog:
+    - product
+    - card
+    - image
+    - grid
+    - inventory
+  dropzone:
+    - file
+    - upload
+    - image
+    - import
+  ecommerce:
+    - product
+    - pricing
+    - inventory
+    - card
+    - image
+    - grid
+  gallery:
+    - image
+    - gallery
+    - card
+    - grid
+  grid:
+    - table
+    - data
+    - card
+    - image
+    - feature
+    - grid
+  instagram:
+    - social
+    - post
+    - image
+    - gallery
+  lightbox:
+    - image
+    - gallery
+    - caption
+  marketplace:
+    - product
+    - pricing
+    - card
+    - image
+    - grid
+    - search
+    - filter
+  media:
+    - image
+    - video
+    - music
+    - player
+    - gallery
+    - embed
+  photos:
+    - image
+    - gallery
+    - card
+    - grid
+  pictures:
+    - image
+    - gallery
+    - card
+    - grid
+  portfolio:
+    - image
+    - gallery
+    - card
+    - grid
+    - feature
+  store:
+    - product
+    - pricing
+    - inventory
+    - card
+    - image
+  upload:
+    - file
+    - upload
+    - image
+    - import
+    - data
+related:
+  - button
+  - select
+  - input
+  - check-box
+  - upload

package/components/index.js

@@ -0,0 +1,85 @@
+/**
+ * Component barrel — imports all components and re-exports.
+ * Import this single file to register all custom elements.
+ */
+
+export { AdiaIcon } from './icon/icon.js';
+export { AdiaButton } from './button/button.js';
+export { AdiaInput } from './input/input.js';
+export { AdiaTextarea } from './textarea/textarea.js';
+export { AdiaCheck } from './check/check.js';
+export { AdiaRadio } from './radio/radio.js';
+export { AdiaSwitch } from './switch/switch.js';
+export { AdiaSlider } from './slider/slider.js';
+export { AdiaSelect } from './select/select.js';
+export { AdiaSegment } from './segment/segment.js';
+export { AdiaSegmented } from './segmented/segmented.js';
+export { AdiaRange } from './range/range.js';
+export { AdiaTree, AdiaTreeItem } from './tree/tree.js';
+export { AdiaPane } from './pane/pane.js';
+export { AdiaChatInput } from './chat/chat-input.js';
+export { AdiaChat } from './chat/chat.js';
+export { AdiaDrawer } from './drawer/drawer.js';
+export { AdiaModal } from './modal/modal.js';
+export { AdiaToast } from './toast/toast.js';
+export { AdiaTabs } from './tabs/tabs.js';
+export { AdiaTab } from './tabs/tab.js';
+export { AdiaTooltip } from './tooltip/tooltip.js';
+export { AdiaBadge } from './badge/badge.js';
+export { AdiaBreadcrumb } from './breadcrumb/breadcrumb.js';
+export { AdiaCommand } from './command/command.js';
+export { AdiaColorPicker } from './color-picker/color-picker.js';
+export { AdiaNoodles } from './noodles/noodles.js';
+export { AdiaTable } from './table/table.js';
+export { AdiaTimeline, AdiaTimelineItem } from './timeline/timeline.js';
+export { AdiaStepper, AdiaStepperItem } from './stepper/stepper.js';
+export { AdiaSwiper } from './swiper/swiper.js';
+export { AdiaUpload } from './upload/upload.js';
+export { AdiaCard } from './card/card.js';
+export { AdiaAvatar, AdiaAvatarGroup } from './avatar/avatar.js';
+export { AdiaProgress } from './progress/progress.js';
+export { AdiaSkeleton } from './skeleton/skeleton.js';
+export { AdiaAlert } from './alert/alert.js';
+export { AdiaKbd } from './kbd/kbd.js';
+export { AdiaTag } from './tag/tag.js';
+export { AdiaCol }   from './col/col.js';
+export { AdiaRow }   from './row/row.js';
+export { AdiaGrid }  from './grid/grid.js';
+export { AdiaStack } from './stack/stack.js';
+export { AdiaChart } from './chart/chart.js';
+export { AdiaPopover } from './popover/popover.js';
+export { AdiaAccordion, AdiaAccordionItem } from './accordion/accordion.js';
+export { AdiaDivider } from './divider/divider.js';
+export { AdiaPagination } from './pagination/pagination.js';
+export { AdiaCode } from './code/code.js';
+export { AdiaList, AdiaListItem } from './list/list.js';
+export { AdiaMenu, AdiaMenuItem, AdiaMenuDivider } from './menu/menu.js';
+export { AdiaToolbar, AdiaToolbarGroup } from './toolbar/toolbar.js';
+export { AdiaOtpInput } from './otp-input/otp-input.js';
+export { AdiaImage } from './image/image.js';
+export { AdiaSearch } from './search/search.js';
+export { AdiaStat } from './stat/stat.js';
+export { AdiaProgressRow } from './progress-row/progress-row.js';
+export { AdiaActionList, AdiaActionItem } from './action-list/action-list.js';
+export { AdiaEmptyState } from './empty-state/empty-state.js';
+export { AdiaCalendarPicker } from './calendar-picker/calendar-picker.js';
+export { AdiaEmbed } from './embed/embed.js';
+export { AdiaBlock } from './block/block.js';
+export { AdiaText } from './text/text.js';
+export { AdiaToggleGroup, AdiaToggleOption } from './toggle-group/toggle-group.js';
+export { AdiaRichText } from './richtext/richtext.js';
+export { AdiaStream } from './stream/stream.js';
+export { AdiaCanvas } from './canvas/canvas.js';
+export { AdiaInspector } from './inspector/inspector.js';
+export { AdiaPipelineStatus } from './pipeline-status/pipeline-status.js';
+export { AdiaRating } from './rating/rating.js';
+export { AdiaDescriptionList } from './description-list/description-list.js';
+export { AdiaHeatmap } from './heatmap/heatmap.js';
+
+// Agent-family: trailing artifacts and reasoning viewers for agent turns
+export { AdiaAgentReasoning } from './agent-reasoning/agent-reasoning.js';
+export { AdiaAgentTrace } from './agent-trace/agent-trace.js';
+export { AdiaAgentFeedbackBar } from './agent-feedback-bar/agent-feedback-bar.js';
+export { AdiaAgentSuggestions } from './agent-suggestions/agent-suggestions.js';
+export { AdiaAgentQuestions } from './agent-questions/agent-questions.js';
+export { AdiaAgentArtifact } from './agent-artifact/agent-artifact.js';