Skip to route content
Hara
Implemented

Rendered catalogue · 38 public exports

These are the components.

Every specimen below imports the public Astro export it names. The canvases show real props, slots, states, and compound boundaries; the inventory and contracts continue below.

exported component owned state composition boundary

Support layer

Identity and atmosphere

Identity, theme, surface, motif, and procedural visual primitives rendered together.
ThemeToggleHaraMarkHaraIconHaraGlyphMotifBackdropSurfaceFleetFieldShaderField
Hara visual languageIdentity, atmosphere, and material fields
FleetField · rendered architectural surface
ShaderField · WebGL with fallback

Document layer

Shell and navigation

The complete document shell with global, contextual, local, and page-level navigation.
ShellHeaderContextNavSidebarPageHeader
Hara Components
v2 · stable

Document shell

A navigable Hara surface

Global identity, section context, local navigation, and page intent remain separate and composable.

Inspect controls
comfortable densityresponsive sidebarsemantic landmarks
01Navigation owns location.

Header, context, and sidebar each answer a different wayfinding question.

02PageHeader owns intent.

The content area starts with purpose, actions, and compact metadata.

Tool layer

Controls and command surfaces

Buttons, toggles, fields, tabs, rails, groups, toolbars, and status boundaries with real states.
ToolbarToolGroupToolButtonToolToggleToolSelectToolNumberFieldTabStripIconRailStatusBar
READY · 9 control exports rendered
wasm32 · 250 ms

Workbench layer

Docked and floating workbench

The bounded workbench geometry with panels, inspector disclosure, overlays, and palettes.
WorkbenchShellDockPanelPanelHeaderInspectorSectionFloatingPaletteViewportOverlay
LIVE VIEWPORTevaluation / lattice1200 × 680 · 100%
0240
Frame 124
No selection errors

Environment layer

Environment primitives and composition

Section navigation, resources, frontmatter, capabilities, and the compound environment workbench.
SectionNavigatorEnvironmentSectionFrontmatterGridResourceListCapabilityPaneEnvironmentWorkbench
namespace
hara.demo.runtime resolved
target
wasm32 browser session
revision
af6273c clean
capabilities
4 all granted
  • archive read-only snapshot disabled locked
Environment

Primitive capabilities

2 groups
(defn ready? [session]
  (= :ready (:status session)))

(work/submit {:op :evaluate
              :target :wasm})
READY · hbc-wasm
4 capabilities

Runtime layer

Runtime state and application shells

Lifecycle lamps, requested connections, compact control, and full runtime application chrome.
StatusLampRuntimeSwitchConnectionRowCompactRuntimeShellRuntimeAppShell
Off Connecting Connected Warning Error
Requested
Runtime control

Hara Wasm

READY
playground/main isolated session

Connections

CONNECTED Filesystem Workspace mounted CONNECTED
CONNECTING Debugger Awaiting attachment CONNECTING
DISABLED Network Capability unavailable DISABLED

Status

Evaluator ready 12 ms Filesystem attached 3 mounts
Hara Chrome

Session inspector

Ready
ACTIVE SESSIONmain / wasm32session-01J9…F6A

Tree, fiber, bytecode, native, and Wasm consume the same runtime value boundary.

08:41:12filesystem attached08:41:13evaluation complete
2 connections · 0 errors
hbc-wasm

Merged foundation layer

Iconography and delivery primitives

Original interface/product symbols and the artifact frame/provenance boundary rendered from their public Astro implementations.
HaraIconHaraGlyphDeliveryFrameArtifactProvenance

Public symbol primitives

Interface command and product identity remain separate.

Partial
World

Articles, feeds, clippings and contributor identity.

world.hara-lang.org

Artifact projection

The frame carries format; provenance carries source truth.

Static delivery frame
Rendered public component union

Iconography and delivery primitives are inspectable beside the earlier document, workbench, runtime and compatibility-symbol exports.

Semantic layer

Symbols and iconography

A public semantic identifier, currentColor geometry, optical sizing, text support, and accessible decorative or informative SVG output.
Symbol
Runaction-run Readystate-ready Unavailablestate-unavailable Filesystemcapability-filesystem Playgroundproduct-playground Exact revisionevidence-revision
Ready Exact evidence remains textrevision: ce4139f1e7a7b0fd

Shared library · Components

Reusable components and their ownership boundaries.

For each component, this catalogue records its semantic role, export path, owned states, accessibility contract, responsive behaviour, and the point where application-specific composition begins.

Browse all exports Review foundations Inspect tool workbenches
40public Astro exports
33v2 and v2-tool exports
26tool/environment/runtime exports
7identity and support exports
HARA / FLEET FIELD 07 VECTOR 241.6 DECK FRAME / A SIGNAL LOCK SYSTEM ONLINE
Shared contract
Shellnavigation
Contentdata + prose
Toolsworkbench

01 · Public inventory

Exports and semantics stay in sync.

The visible ledger is backed by a dedicated inventory module and tested directly against package exports. A component is not considered public merely because a class happens to exist in a reference.

Identity and support7

Theme, identity, icon, motif, backdrop, and generic surface helpers used around the v2 layers.

ThemeToggle

support

Direct light/dark theme control.

./astro/ThemeToggle.astro
States
light · dark
Density
contextual
Responsive
Scales within the consuming composition.
Accessibility
Button label announces the destination theme and remains readable on mobile.

HaraMark

support

Protected block-H identity mark with one signal square.

./astro/HaraMark.astro
States
default
Density
24px minimum · route · hero
Responsive
Scales within the consuming composition.
Accessibility
Decorative by default; the containing link supplies the accessible name.

HaraIcon

support

Semantic icon wrapper for the shared Hara icon inventory.

./astro/HaraIcon.astro
States
decorative · labelled · current colour
Density
16px · 20px · 24px · 32px
Responsive
Scales within the consuming composition.
Accessibility
Decorative icons are hidden; informative icons require an accessible name or adjacent text.

HaraGlyph

support

Compact named glyph rendered from shared Hara vector geometry.

./astro/HaraGlyph.astro
States
decorative · labelled · current colour
Density
16px · 20px · 24px · 32px
Responsive
Scales within the consuming composition.
Accessibility
The glyph supplements a visible label unless the host supplies an accessible name.

Motif

support

Edge, Aperture, or Rack technical atmosphere.

./astro/Motif.astro
States
edge · aperture · rack · light · dark
Density
contextual
Responsive
Scales within the consuming composition.
Accessibility
Atmosphere is never required to understand content.

Backdrop

support

Full-region material background treatment.

./astro/Backdrop.astro
States
default
Density
contextual
Responsive
Scales within the consuming composition.
Accessibility
Decorative use must be hidden; functional use requires a label.

Surface

support

Generic v1-compatible material surface helper.

./astro/Surface.astro
States
default
Density
contextual
Responsive
Scales within the consuming composition.
Accessibility
Decorative use must be hidden; functional use requires a label.
Shell and navigation7

The document application frame and its global, contextual, rail, page-heading, and illustration regions.

Shell

shared

Composes header, context navigation, sidebar, main content, and optional inspector.

./astro/v2/Shell.astro
States
default · with context · with inspector · compact
Density
comfortable · compact shell
Responsive
Inspector drops first, then sidebar; main source order remains intact.
Accessibility
Preserves semantic landmarks and source order.

Header

shared

Application header with identity, primary navigation, and action slots.

./astro/v2/Header.astro
States
anonymous · signed in · current route
Density
comfortable · compact shell
Responsive
Yields with the document shell collapse order.
Accessibility
Uses the banner landmark and labelled primary navigation.

ContextNav

shared

Application-local route or task navigation below the global header.

./astro/v2/ContextNav.astro
States
default · current page · overflow
Density
comfortable · compact shell
Responsive
Becomes a horizontally reachable scroll row rather than hiding destinations.
Accessibility
Preserves semantic landmarks and source order.

Sidebar

shared

Section navigation and supporting facts for reading or registry surfaces.

./astro/v2/Sidebar.astro
States
default · current item · collapsed
Density
comfortable · compact shell
Responsive
Removed after the inspector; equivalent navigation remains reachable.
Accessibility
Preserves semantic landmarks and source order.

PageHeader

shared

Large page title, description, actions, metadata, and optional illustration.

./astro/v2/PageHeader.astro
States
text only · illustrated · with actions · with metadata
Density
comfortable · compact shell
Responsive
Yields with the document shell collapse order.
Accessibility
Preserves semantic landmarks and source order.

FleetField

shared

Original Hara technical illustration for dedicated art fields.

./astro/v2/FleetField.astro
States
light · dark · static
Density
section · hero
Responsive
Yields with the document shell collapse order.
Accessibility
Requires a concise SVG title when informative; motion is never required.

ShaderField

shared

Progressively enhances static imagery with real WebGL material fields.

./astro/v2/ShaderField.astro
States
loading · ready · fallback · light · dark · reduced motion
Density
section · hero · gallery
Responsive
Caps device pixel ratio, resizes with its container, and pauses while off screen.
Accessibility
Canvas requires a concise label; matched static SVG fallback preserves the complete composition.
Tool controls9

Dense but calm controls for editor transport, mode, numeric, selection, tab, rail, and status surfaces.

Toolbar

tool

Groups related commands along one horizontal or vertical edge.

./astro/v2/tool/Toolbar.astro
States
regular · dense · horizontal · vertical · sticky
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

ToolGroup

tool

Separates command families inside a toolbar.

./astro/v2/tool/ToolGroup.astro
States
default · selected · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

ToolButton

tool

Immediate command or transport action.

./astro/v2/tool/ToolButton.astro
States
default · hover · active · icon only · disabled · loading
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

ToolToggle

tool

Persistent binary mode or visibility state.

./astro/v2/tool/ToolToggle.astro
States
off · pressed · icon only · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

ToolSelect

tool

Compact selection among known tool modes or resources.

./astro/v2/tool/ToolSelect.astro
States
default · selected · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

ToolNumberField

tool

Exact numeric value with unit and dense inline option.

./astro/v2/tool/ToolNumberField.astro
States
default · selected · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

TabStrip

tool

Document, panel, or mode tabs with explicit selected state.

./astro/v2/tool/TabStrip.astro
States
default · selected · disabled · horizontal · vertical
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

IconRail

tool

Compact mode or tool navigation at a workbench edge.

./astro/v2/tool/IconRail.astro
States
vertical · horizontal · selected · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

StatusBar

tool

Low-priority runtime, selection, revision, and connection telemetry.

./astro/v2/tool/StatusBar.astro
States
ready · busy · warning · offline
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.
Workbench shell6

Viewport-first docking, inspection, floating, overlay, and panel-heading primitives.

WorkbenchShell

tool

Coordinates toolbar, left/right/bottom docks, viewport, overlays, and status.

./astro/v2/tool/WorkbenchShell.astro
States
full · no inspector · no rail · viewport only
Density
desktop · tablet · phone
Responsive
Right dock, then left dock, then bottom dock yield in that order.
Accessibility
Requires an accessible label and visible focus state.

DockPanel

tool

Left, right, bottom, or floating secondary work region.

./astro/v2/tool/DockPanel.astro
States
left · right · bottom · floating · selected · collapsed
Density
narrow · regular · wide
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

FloatingPalette

tool

Temporary command, asset, or insertion palette over the viewport.

./astro/v2/tool/FloatingPalette.astro
States
top left · top right · bottom left · bottom right · center
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

ViewportOverlay

tool

Non-blocking viewport telemetry or interactive mini-control.

./astro/v2/tool/ViewportOverlay.astro
States
informational · interactive · five placements
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

InspectorSection

tool

Expandable property family inside an inspector.

./astro/v2/tool/InspectorSection.astro
States
closed · open · with summary metadata
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

PanelHeader

tool

Panel identity, eyebrow, metadata, and action row.

./astro/v2/tool/PanelHeader.astro
States
regular · compact · with actions
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.
Environment6

Reusable live-environment sections for navigation, front matter, resources, capabilities, and composed editor sessions.

SectionNavigator

tool

Moves among stable environment sections such as Code, Files, Canvas, and Runtime.

./astro/v2/tool/SectionNavigator.astro
States
default · selected · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

EnvironmentSection

tool

Section container with identity, state, and content slots.

./astro/v2/tool/EnvironmentSection.astro
States
default · selected · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

FrontmatterGrid

tool

Displays editable, derived, and controlled environment metadata.

./astro/v2/tool/FrontmatterGrid.astro
States
editable · derived · controlled · invalid
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

ResourceList

tool

Files, sessions, assets, and runtime resources with current-state semantics.

./astro/v2/tool/ResourceList.astro
States
default · selected · modified · missing · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

CapabilityPane

tool

Shows only available Sessions, Files, Canvas, 3D, Runtime, and Observation capabilities.

./astro/v2/tool/CapabilityPane.astro
States
partial capabilities · all capabilities · unavailable
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

EnvironmentWorkbench

tool

Composes navigation, editor/viewport, optional capability pane, and observations.

./astro/v2/tool/EnvironmentWorkbench.astro
States
code · front matter · graphics · console · embedded
Density
regular · dense
Responsive
Capability pane dismisses before the editor or viewport is compromised.
Accessibility
Requires an accessible label and visible focus state.
Runtime5

Compact and application-sized runtime state, connection, backend, and lifecycle components.

StatusLamp

runtime

Text-supported runtime or connection state marker.

./astro/v2/tool/StatusLamp.astro
States
ready · busy · warning · error · offline
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

RuntimeSwitch

runtime

Capability-aware interpreter or HBC backend selection.

./astro/v2/tool/RuntimeSwitch.astro
States
selected · unsupported · disabled
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

ConnectionRow

runtime

Named provider or runtime connection with state and action.

./astro/v2/tool/ConnectionRow.astro
States
connected · connecting · error · disconnected
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

CompactRuntimeShell

runtime

Documentation-sized runtime identity, transport, output, and detail surface.

./astro/v2/tool/CompactRuntimeShell.astro
States
idle · running · cancelled · failed · complete
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

RuntimeAppShell

runtime

Application-sized runtime lifecycle and capability envelope.

./astro/v2/tool/RuntimeAppShell.astro
States
idle · running · restarting · replacing · cancelled · disposed
Density
regular · dense
Responsive
Secondary tool regions yield before the viewport.
Accessibility
Requires an accessible label and visible focus state.

02 · Shell and navigation

Global reference, application context, and local work remain distinct.

The global catalogue header identifies the design review surface. Product headers and context navigation sit below it. Sidebars and inspectors are optional supporting regions; they never redefine the global route inventory.

Document shell compositionShell · Header · ContextNav · Sidebar · PageHeader
shared
Hara PackagesRegistry

Package · std.work

Replayable work, explicit effects.

A package record foregrounds purpose, compatibility, stewardship, and exact publication provenance.

v0.8.4verified6 runtimes
HARA / FLEET FIELD 07 VECTOR 241.6 DECK FRAME / A SIGNAL LOCK SYSTEM ONLINE
Landmarks banner, navigation, complementary, mainCollapse inspector → sidebar → horizontal context rowOwnership product labels and routes; shared geometry and state
DoKeep route layers distinct.

Catalogue navigation, route navigation, page tabs, and section outlines each have one scope.

AvoidPut every destination in one top row.

A flat global menu becomes crowded and removes the distinction between ecosystem, product, and document context.

Current site compositionsvariant · class · style · slots
inspectable

WWW

product

Full-width public page

Composition
Shared Shell + product-owned WwwHeader
Customization
Wide page inset · no rails

Docs

document

Starlight reading frame

Composition
Shared Header + ContextNav + Starlight sidebar
Customization
Comfortable density · 256px rail

Learn / Build

product

Route and workflow product

Composition
Shared Shell + Header + ContextNav
Customization
Product-owned context actions

Studio / Tools

workbench

Embedded workspace

Composition
Shared Shell + product menu + rails
Customization
Compact density · inspector

Benchmarks

migration

Standalone evidence board

Composition
Legacy static header and route surface
Customization
Next migration target
Shared geometry, landmarks, focus, responsive statesOwned routes, account, content, drawers, product controlsOverride named variant, class hook, and local token values

03 · Controls and forms

State is visible before decoration.

Controls use semantic HTML first. Variants change emphasis or consequence, not meaning. Loading, selected, disabled, success, warning, and danger states retain text and non-colour cues.

Buttons.hara-v2-button · .hara-v2-icon-button
One primary action per local decisionIcon-only controls require accessible names
Fields and form groups.hara-v2-form-grid · .hara-v2-form-field
Shown in registry search and package detail.
Use an exact semantic version, for example 0.8.4.
Tabs and segmented choice.hara-v2-tabs · .hara-v2-tab
Panels, badges, and stats.hara-v2-panel · .hara-v2-badge · .hara-v2-stat

Publication receipt

verified
12artifacts
6runtimes
0unexplained gaps
1exact revision
Receipt 9d7b…e21 · signed by hara-lang

04 · Content and data

Reading, evidence, and community share one material system.

Prose, code, tables, matrices, feeds, and profiles use different density and semantics without inventing parallel typography, colour, or surface contracts.

Prose, code, callout, outlinecontent.css

Runtime model

One lifecycle envelope.

Interpreter and HBC execution share session, generation, source-revision fencing, cancellation, and disposal semantics while retaining backend-specific observations.

Exact state

Claims expose the session, generation, source revision, and backend that produced them.

(defn publish-ready? [release]
  (and (:verified release)
       (seq (:artifacts release))))
Tables and matrices.hara-v2-table · .hara-v2-matrix
RuntimeStatusMedianRevision
HBC Wasmselected4.8 ms9d7b…e21
JVMverified6.1 msaf62…77e
Interpreterbaseline13.2 ms9d7b…e21
WorkloadHBCJVMInterp.JSRustmaps1.0×1.3×2.7×1.8×1.1×schemas1.0×1.4×3.1×n/a1.2×
Feed and story.hara-v2-feed · .hara-v2-story
M

Schema values move into the ordinary runtime

A release note with migration guidance, exact implementation revision, and runnable examples.

GitHub11 commentsverified source
Q

I made my first small Hara graphics program

A newcomer shares a runnable sketch and asks how browser sessions fit together.

Reddit29 commentsnewcomer
Profile and contribution evidence.hara-v2-profile-list · .hara-v2-profile
M
@mina

Maintains std.work and work.executor · 137 merged contributions · 4 evidence-linked badges.

J
@jo

Maintains hara-wasm-core · 28 accepted reviews · owner of @jo/release-relay.

05 · Tool and workbench

Dense controls, viewport-first collapse.

The tool layer is additive to v2. It introduces editor-specific surface and control tokens, but still consumes the Hara identity, document themes, grid, state, focus, and responsive contracts.

Editor + viewport + inspectorToolbar · WorkbenchShell · DockPanel · InspectorSection · StatusBar
Full tool studies →
Project

Files

supersonic-live/main.hal
(defn publish-ready? [release]
  (and (:verified release)
       (seq (:artifacts release))))
session live/8f24generation 042
Insert

Command palette

Selection

Runtime inspector

HBC
Session ready
Capabilities 4
ready · result registered · sequence 108
● readymain.hal
rev 9d7b…e21Ln 12, Col 4
Desktop toolbar + left dock + viewport + inspector + outputTablet inspector yieldsPhone rail and bottom dock yield; viewport remains

06 · Compound patterns

Components prove themselves in workflows.

Compound patterns compose existing primitives without creating a product-agnostic mega-component. The shared contract owns geometry and state; each application owns business rules and realistic content.

Search + filters + result tablePackages
84 packages
std.workverified6 runtimes
work.executoractive3 runtimes
Shared search, field, select, table, badges Product ranking and compatibility rules
Article + metadata + outlineDocs

Guide · 12 min

Build a durable work program.

Describe replayable work, isolate checkpointed effects, and expose capabilities explicitly.

Version note

This guide targets std.work 0.8.

Shared prose, callout, outline Product guide sequence and version policy
Editor + viewport + inspectorPlayground
main.hal
(defn publish-ready? [release]
  (and (:verified release)
       (seq (:artifacts release))))
Shared workbench chrome Product run lifecycle and capabilities
Profile + contribution ledgerWorld / Packages
M

@mina

Package maintainer · helpful reviewer · accountable bot owner

137merged
4packages
3namespaces
2bots
Shared avatar, badges, stats, table Product evidence and badge qualification
Feed item + discussion stateWorld
H

Schema values move into the ordinary runtime

Canonical release note clustered with two external discussions.

94 hot11 comments3 sourcesowner online
↳ @mina/build-botBOTowned by @mina · owner present
Shared story, metadata, badge Product ranking, clustering, moderation, bot accountability
Form + preview + validation summarySpecs / Publish
Use a stable hyphenated identifier.
Shared form, fields, panel, callout Product controlled fields and publication workflow

07 · States and accessibility

Every state has a word, shape, and semantic hook.

Colour and motion reinforce state; they do not carry it alone. Component notes expose keyboard behavior, focus return, touch dimensions, responsive yielding, and ownership of unavailable capabilities.

Default

Available, not yet active.

Selected

Pressed semantics plus marker and signal.

Loading

Busy text remains under reduced motion.

Success
✓ verified

Outcome and receipt are named.

Warning
! review

Recoverable attention state.

Danger
× blocked

Destructive or failed state.

Disabled

Capability absence is explicit.

Keyboard focus

Visible ring with offset.

Semantic roleUse the native element first.

Links navigate, buttons mutate, tabs expose tab semantics, tables remain tables, and shell regions use landmarks.

Focus and disclosureReturn focus to the trigger.

Menus, palettes, inspectors, and dialogs close with Escape and return keyboard users to a predictable location.

Touch and densityDense does not mean untouchable.

Phone controls retain at least 34px height; tool density is reserved for repeated desktop manipulation.

Reduced motionMeaning survives zero-duration transitions.

Loading text, current markers, status labels, and receipts remain visible without animation.

08 · CSS and ownership

Discoverable classes, narrow APIs, product-owned business rules.

Major class families remain visible for framework-free consumers. Astro exports wrap recurring structure where semantics and slots are stable; product-only compositions do not automatically expand the shared API.

Shellsrc/v2/shell.css
6
.hara-v2-shell.hara-v2-header.hara-v2-context-nav.hara-v2-sidebar.hara-v2-inspector.hara-v2-main
Controls and datasrc/v2/components.css
11
.hara-v2-page-header.hara-v2-button.hara-v2-icon-button.hara-v2-command-bar.hara-v2-field.hara-v2-select.hara-v2-panel.hara-v2-badge.hara-v2-tabs.hara-v2-table.hara-v2-matrix
Contentsrc/v2/content.css
8
.hara-v2-code.hara-v2-prose.hara-v2-callout.hara-v2-outline.hara-v2-feed.hara-v2-story.hara-v2-profile-list.hara-v2-form-grid
Tool controlssrc/v2/tool-controls.css
10
.hara-tool-toolbar.hara-tool-group.hara-tool-button.hara-tool-toggle.hara-tool-field.hara-tool-select.hara-tool-number-input.hara-tool-tab-strip.hara-tool-icon-rail.hara-tool-status-bar
Workbenchsrc/v2/tool-shell.css
6
.hara-tool-workbench.hara-tool-dock-panel.hara-tool-panel-header.hara-tool-inspector-section.hara-tool-floating-palette.hara-tool-viewport-overlay
Environment and runtimesrc/v2/tool-environment.css · src/v2/tool-runtime.css
6
.hara-tool-environment.hara-tool-capability-pane.hara-tool-runtime-shell.hara-tool-status-lamp.hara-tool-runtime-switch.hara-tool-connection-row
Package owns

Geometry and semantic state

  • public Astro structures and slots
  • document and tool CSS class behavior
  • theme, focus, density, and responsive contracts
  • stable state attributes and accessible relationships
Catalogue owns

Framing and explanation

  • component cards and inventory annotations
  • side-by-side do/avoid comparisons
  • measurement and ownership notes
  • realistic review-only specimen content
Product owns

Business rules and composition

  • information architecture and local terminology
  • ranking, validation, permission, and lifecycle rules
  • which shared components appear together
  • product data, provenance, and task-specific imagery

Adoption rule

Import the primitive; compose the product.

Do not copy catalogue CSS into downstream sites. Import v2.css or v2-tool.css, use the public Astro export when its structure matches, and keep application-specific workflow logic local.

Return to catalogueReview foundations