collaboration — wyrd.component.comment

Comment

Presentational comment leaf with host-owned author, timestamp, body, decision marker, and edit/delete events.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/comment.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Comment  tag: wyrd-comment  package: wyrd.component.comment  title: Comment  summary: Presentational comment leaf with host-owned author, timestamp, body, decision marker, and edit/delete events.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: collaboration  composition: leaf  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: comment-id      type:        kind: string      required: true      serializable: true      summary: Opaque host-supplied comment identifier.    - name: author-id      type:        kind: string      required: true      serializable: true      summary: Opaque host-supplied author identifier with no authentication semantics.    - name: author-name      type:        kind: string      required: true      serializable: true      summary: Host-supplied display name for the author.    - name: timestamp      type:        kind: string      required: true      serializable: true      summary: Host-supplied ISO timestamp or already-portable timestamp string.    - name: timestamp-label      type:        kind: string      required: false      serializable: true      summary: Optional host-formatted timestamp display string.    - name: body-format      type:        kind: enum        values:          - plain-text      required: false      default: plain-text      serializable: true      summary: Body format discriminator; v1 renders plain text only.    - name: body      type:        kind: string      required: true      serializable: true      summary: Plain text comment body.    - name: decision      type:        kind: enum        values:          - none          - approve          - request-changes          - comment          - suggestion      required: false      default: none      serializable: true      summary: Optional review disposition marker.    - name: edited      type:        kind: boolean      required: false      default: false      serializable: true      summary: Host-supplied edited marker.    - name: can-edit      type:        kind: boolean      required: false      default: false      serializable: true      summary: Shows an edit affordance when true.    - name: can-delete      type:        kind: boolean      required: false      default: false      serializable: true      summary: Shows a delete affordance when true.  slots: []  events:    - name: edit      payload:        comment-id:          kind: string      bubbles: true      composed: true      cancelable: true      summary: Emitted when the user activates the edit affordance.    - name: delete      payload:        comment-id:          kind: string      bubbles: true      composed: true      cancelable: true      summary: Emitted when the user activates the delete affordance.  states:    - name: default      source: platform      summary: Comment is visible.    - name: actionable      source: property      summary: Edit or delete affordances are visible.  parts:    - name: root      summary: Comment article.    - name: header      summary: Author, timestamp, edited marker, and decision metadata.    - name: author      summary: Author display name.    - name: timestamp      summary: Timestamp display.    - name: decision      summary: Optional decision badge.    - name: body      summary: Plain text comment body.    - name: actions      summary: Edit/delete action container.    - name: edit      summary: Edit button.    - name: delete      summary: Delete button.  tokens:    background: color.surface    foreground: color.on-surface    muted: color.on-surface-variant    border-color: color.outline    action-background: color.surface-container    decision-background: color.secondary    decision-foreground: color.on-secondary    radius: rounded.md    padding-x: spacing.md    padding-y: spacing.sm    gap: spacing.xsmessages:  - key: comment.edit    description: Accessible label for the comment edit affordance.  - key: comment.delete    description: Accessible label for the comment delete affordance.  - key: comment.edited    description: Marker text shown when a comment has been edited.  - key: comment.decision.approve    description: Label for an approving decision marker.  - key: comment.decision.request-changes    description: Label for a request-changes decision marker.  - key: comment.decision.comment    description: Label for a neutral comment decision marker.  - key: comment.decision.suggestion    description: Label for a suggestion decision marker.obligations:  accessibility:    role: article    name: Author name and timestamp identify the comment; the body provides comment content.    keyboard:      - Tab moves to edit/delete affordances when present.      - Enter or Space activates focused edit/delete affordances.    semantics:      - The comment root exposes article semantics.      - Timestamp renders with a dateTime value when the host supplies an ISO timestamp.      - Edit/delete affordances are buttons named by component-owned localized messages.      - Decision and edited markers render as text so assistive technology receives the same information as sighted users.  behavior:    model: stateless    interactions:      - Comment renders only host-supplied author, timestamp, body, edited marker, and decision marker.      - Activating edit emits edit with comment-id.      - Activating delete emits delete with comment-id.    hostEffects:      - Dispatch edit event.      - Dispatch delete event.      - Hosts own editing, deletion, persistence, identity, and permissions.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - comment-id      - author-id      - author-name      - timestamp      - timestamp-label      - body-format      - body      - decision      - edited      - can-edit      - can-delete    serializableSlots: []    eventBindings:      - edit      - delete    notes: Comment serializes host-owned comment data and edit/delete bindings. Hosts own permission decisions and persistence.examples:  - name: default    state: default    properties:      comment-id: comment-1      author-id: author-casey      author-name: Casey      timestamp: "2026-07-04T16:00:00.000Z"      timestamp-label: Today at 4:00 PM      body: Primary action is in the right place.      decision: none    slots: {}  - name: decision    state: default    properties:      comment-id: comment-2      author-id: author-rin      author-name: Rin      timestamp: "2026-07-04T16:15:00.000Z"      body: Delay copy should identify the affected service window.      decision: request-changes      edited: true    slots: {}  - name: actionable    state: actionable    properties:      comment-id: comment-3      author-id: author-mara      author-name: Mara      timestamp: "2026-07-04T16:20:00.000Z"      body: Locked coordinator field matches this scenario.      can-edit: true      can-delete: true    slots: {}overrides:  react:    properties:      comment-id: commentId      author-id: authorId      author-name: authorName      timestamp-label: timestampLabel      body-format: bodyFormat      can-edit: canEdit      can-delete: canDelete  flutter:    properties:      comment-id: commentId      author-id: authorId      author-name: authorName      timestamp-label: timestampLabel      body-format: bodyFormat      can-edit: canEdit      can-delete: canDelete

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

default state: default

Usage

import { WyrdComment } from "@wyrd-company/react";

<WyrdComment commentId="comment-1" authorId="author-casey" authorName="Casey" timestamp="2026-07-04T16:00:00.000Z" timestampLabel="Today at 4:00 PM" body="Primary action is in the right place." decision="none" />

// events: onEdit, onDelete

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdComment(
  commentId: 'comment-1',
  authorId: 'author-casey',
  authorName: 'Casey',
  timestamp: '2026-07-04T16:00:00.000Z',
  timestampLabel: 'Today at 4:00 PM',
  body: 'Primary action is in the right place.',
  decision: 'none',
)

// events: onEdit, onDelete

decision state: default

Usage

import { WyrdComment } from "@wyrd-company/react";

<WyrdComment commentId="comment-2" authorId="author-rin" authorName="Rin" timestamp="2026-07-04T16:15:00.000Z" body="Delay copy should identify the affected service window." decision="request-changes" edited />

// events: onEdit, onDelete

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdComment(
  commentId: 'comment-2',
  authorId: 'author-rin',
  authorName: 'Rin',
  timestamp: '2026-07-04T16:15:00.000Z',
  body: 'Delay copy should identify the affected service window.',
  decision: 'request-changes',
  edited: true,
)

// events: onEdit, onDelete

actionable state: actionable

Usage

import { WyrdComment } from "@wyrd-company/react";

<WyrdComment commentId="comment-3" authorId="author-mara" authorName="Mara" timestamp="2026-07-04T16:20:00.000Z" body="Locked coordinator field matches this scenario." canEdit canDelete />

// events: onEdit, onDelete

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdComment(
  commentId: 'comment-3',
  authorId: 'author-mara',
  authorName: 'Mara',
  timestamp: '2026-07-04T16:20:00.000Z',
  body: 'Locked coordinator field matches this scenario.',
  canEdit: true,
  canDelete: true,
)

// events: onEdit, onDelete

Properties

Name	Type	Default	Summary
`comment-id`	`string`	`undefined`	Opaque host-supplied comment identifier.
`author-id`	`string`	`undefined`	Opaque host-supplied author identifier with no authentication semantics.
`author-name`	`string`	`undefined`	Host-supplied display name for the author.
`timestamp`	`string`	`undefined`	Host-supplied ISO timestamp or already-portable timestamp string.
`timestamp-label`	`string`	`undefined`	Optional host-formatted timestamp display string.
`body-format`	`plain-text`	`plain-text`	Body format discriminator; v1 renders plain text only.
`body`	`string`	`undefined`	Plain text comment body.
`decision`	`none \| approve \| request-changes \| comment \| suggestion`	`none`	Optional review disposition marker.
`edited`	`boolean`	`false`	Host-supplied edited marker.
`can-edit`	`boolean`	`false`	Shows an edit affordance when true.
`can-delete`	`boolean`	`false`	Shows a delete affordance when true.

Slots & events

Event	Payload	Summary
`edit`	`comment-id`	Emitted when the user activates the edit affordance.
`delete`	`comment-id`	Emitted when the user activates the delete affordance.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`background`	`color.surface`
`foreground`	`color.on-surface`
`muted`	`color.on-surface-variant`
`border-color`	`color.outline`
`action-background`	`color.surface-container`
`decision-background`	`color.secondary`
`decision-foreground`	`color.on-secondary`
`radius`	`rounded.md`
`padding-x`	`spacing.md`
`padding-y`	`spacing.sm`
`gap`	`spacing.xs`

States

State	Source	Summary
`default`	platform	Comment is visible.
`actionable`	property	Edit or delete affordances are visible.

SDUI

Status: serializable. Comment serializes host-owned comment data and edit/delete bindings. Hosts own permission decisions and persistence.

Serializable	Members
Properties	`comment-id, author-id, author-name, timestamp, timestamp-label, body-format, body, decision, edited, can-edit, can-delete`
Slots	`—`
Events	`edit, delete`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Properties

Slots & events

Tokens

States

Accessibility

SDUI