07 — Component Library (Organizations Module)

• OrgHeader
• StatusBadge
• SettingFieldGroup
• ColorPickerField
• DayChips (workingDays)
• FlagSwitchRow
• TenantRow
• SlugPreview
• OrgSettingsForm (S4 composite)
• Component × token × Flutter mapping

Module-specific widgets. All shared App* components referenced from 00-shared/03 are used as-is (AppSkeleton, AppCard, AppListTile, AppTextField, AppDropdown, AppSwitch, AppChips, AppDatePicker, AppDialog, AppBottomSheet, AppMenu, AppSnackbar, AppBanner, AppEmptyState, AppErrorState, AppOfflineBanner, AppSearchBar, AppFAB, AppAvatar, AppBadge, AppSectionHeader, AppInfoRow, AppProgress, AppTabs). Listed below are new components.

OrgHeader

• Purpose: hero header for S1/S8 (identity + status chips).
• Props: name, logoUrl?, status (OrganizationStatus — organization.schema.ts:20-25), plan, subscriptionStatus, onEdit?, onBranding?.
• Variants: compact (list rows S7), hero (detail).
• States: loading (skeleton), error (fallback initials), offline.
• Tokens: surface bg, e-1, r-lg, titleLarge name, bodySmall slug; badges primaryContainer/tertiary/error with icon+label (A §9).
• A11y: single combined Semantics for header ("{name}, status active, plan premium").
• Flutter: Row/CircleAvatar + Column + Wrap badges; heroTag for list→detail flight (M §4).

StatusBadge

• Purpose: org lifecycle chip (active/inactive/suspended/onboarding) + subscription chip.
• Props: value, type (status|subscription|plan).
• Mapping: status → icon (check_circle/pause/block/rocket_launch) + label; plan → filled/tonal badge; never color-only.
• Flutter: Badge/Chip wrapper with icon + localized label.

SettingFieldGroup

• Purpose: labelled form group container for S2/S4 with dirty + error aggregation.
• Props: title, subtitle?, dirty, errorCount, children.
• States: dirty dot (secondaryContainer), group error banner (errorContainer, A §2).
• Flutter: Semantics(header:) Column + AnimatedSwitcher for dot.

ColorPickerField

• Purpose: branding/settings color input (S3/S4) — (proposed) custom widget.
• Props: label, value (hex), presets?, onChanged, errorText.
• Behaviour: swatch grid + hex text field (sync both ways); opens system color dialog on desktop; contrast helper (WCAG ratio vs onPrimary/onSurface computed live).
• Validation: /^#?[0-9A-Fa-f]{6}$/ (proposed); error "Enter a 6-digit hex color".
• A11y: label + value semantics; swatches tooltips.
• Flutter: Wrap of InkWell swatches + TextField formatter (TextInputFormatter); showDialog color picker for web.

DayChips (workingDays)

• Purpose: multi-select Sun–Sat for attendance settings (S4).
• Props: selected (Set), onChanged, disabled.
• Validation: ≥1 day (proposed) — error under the chip row.
• A11y: chip Semantics(toggled:) + day names.
• Flutter: Wrap of FilterChip with localized weekday labels (weekday index 0=Sunday per intl).

FlagSwitchRow

• Purpose: feature-flag list row (S5) with optimistic toggle.
• Props: key, label?, description?, module?, enabled, pending, onToggle, onDelete?.
• States: idle / pending (row switch shows mini spinner, row dimmed) / error (row error tint + retry).
• Behaviour: optimistic flip → server reconcile → rollback on error with AppSnackbar retry (00-shared/06 §3.5).
• A11y: label "Enable {label}", live-region announcement of toggle result.
• Flutter: ListTile + Switch with AnimatedSwitcher spinner; Dismissible-free (menu delete only).

TenantRow

• Purpose: tenants-list row (S7).
• Props: org (name, slug, status, plan, logo, createdAt), onTap, menu items.
• States: hover tint (desktop), selected (master-detail), loading shimmer for images.
• Flutter: ListTile 72 dp + MenuAnchor; Hero avatar.

SlugPreview

• Purpose: live slug auto-derivation preview in S8 create form.
• Props: name, slugOverride?, onAccept.
• Behaviour: shows slugify result (client mirror of organizations.service.ts:161-169); "use this" button fills the slug field.
• Flutter: inline Tooltip + TextButton.

OrgSettingsForm (S4 composite)

• Purpose: the tabbed embedded-settings form with full-object save.
• Props: attendance, academic, theme (initial values), dirty tracking per tab, onSaveFull(merged).
• Rules: never saves partial; merge = spread last server state + current tab edits.
• Flutter: TabBar + TabBarView (keep-alive AutomaticKeepAliveClientMixin).

Component × token × Flutter mapping

Golden tests: every component above at 3 sizes + dark mode (00-shared/03 §G).