@use "/shell" as *; @use "quark:list" as list; #release-notice { /* opens once: sheet re-runs restart a delay, so gate it on the fact it writes */ &:not([data-did-open]) { @delay 7000 { is-open: ""; data-did-open: ""; } } /* prevent clicks from bubbling to the sheet */ @on mouseup, click (stop-propagation); } provider-fetch[api-url*="package-metas/index.json"][is-success] { $package-indices: prop("provision").body; /* `excom.navGroup` moves a package out of its type's list, into that group */ $ungrouped: list.reject($package-indices.packages, "navGroup"); .package-links { [bind-elements] ul:not(ul ul) { content: iterate(getPackagesByType($ungrouped, "kit-element")); } [bind-element-bases] ul:not(ul ul) { content: iterate(getPackagesByType($ungrouped, "element-base")); } [bind-tools] ul:not(ul ul) { content: iterate(getPackagesByType($ungrouped, "tool")); } /* the standalone libraries: same rows, rendered flat (shell.css) */ [bind-libraries] ul:not(ul ul) { content: iterate(getPackagesByType($ungrouped, "library")); } [bind-library-group] ul:not(ul ul) { content: iterate(list.filter($package-indices.packages, "navGroup", "libraries")); } ul:not(ul ul) > li { $pkg: item.shortName; > spa-a { route-href: "/packages/#{item.shortName}"; } } /* one `content` rule per link: a second one would rewrite the first's text on every pass */ ul:not(ul ul, [bind-libraries] ul) > li > spa-a { content: item.shortName; } [bind-libraries] ul:not(ul ul) > li > spa-a { content: displayName(item.shortName); } /* packages whose docs span several pages: one collapsible group per section */ [bind-sections] { content: iterate(item.docSections); summary { content: item.title; } details > ul { content: iterate(item.docs); spa-a { route-href: "/packages/#{$pkg}/#{item.name}"; content: item.title; } } details:not(:has(spa-a[is-active])) { open: none; } } } /* page titles: the page, then the site. The docs home keeps the title in the document head; the other routes carry theirs in markup */ spa-route[is-active] { /* a site guide */ &[route-href$=":name"] { $title-guide: list.find($package-indices.docs, "name", $route.params.name); document-title: "#{$title-guide.title or $route.params.name} · Nucleus · docs"; } /* a package README */ &[route-href$=":packageName"] { document-title: "#{displayName($route.params.packageName)} · Nucleus · docs"; } /* one page of a package's docs */ &[route-href$=":docName"] { $title-package: list.find($package-indices.packages, "shortName", $route.params.packageName); document-title: "#{docTitle($title-package, $route.params.docName)} · #{displayName($route.params.packageName)} · Nucleus · docs"; } } /* the page's markdown file, for the footer link: the docs home and each guide the index lists, and a package's page whose index entry says `markdown` (build-docs-index sets it; the dev server's index has none, so no link there). siteDocHref and the path check say which URL is the page's own: the 404 and a package's doc pages have none */ > spa-manager[active-url] { $page-path: attr("active-url").split("#").at(0).split("?").at(0); $page-name: if($page-path == SITE_HOME: SITE_HOME_DOC; else: $page-path.split("/").at(-1)); $page-guide: list.find($package-indices.docs, "name", $page-name); $page-package: list.find($package-indices.packages, "shortName", $page-name); $page-markdown: if($page-guide and siteDocHref($page-guide.name) == $page-path: "/docs/#{$page-guide.name}.md"; $page-package.markdown and "#{SITE_BASE}/packages/#{$page-package.shortName}" == $page-path: "/#{$page-package.shortName}.md"); footer [bind-page-markdown] { href: $page-markdown; content: ternary($page-markdown, "Markdown version of this page"); } } } spa-route { $route: prop("provision"); /* paramless routes name their guide in markup (the docs home, `/`); /docs/:name gets it from params */ $route-doc-name: attr("data-doc-name"); } /* the desktop aside and the mobile sheet stamp the same nav template */ [data-site-nav] { details:has(spa-a[is-active]) { /* not kosher */ open: ""; } spa-a[is-active] { aria-current: ""; } spa-a:not([is-active]) { aria-current: none; } } /* mobile sheet: Escape / back gesture while open; a tapped link closes it */ #site-menu { &[is-open] dismiss-watcher { is-active: ""; } &:not([is-open]) dismiss-watcher { is-active: none; } @on click (target: "spa-a") { is-open: none; } } #site-menu-gesture { &:has(> #site-menu[is-open]) { progress-offset: 1; } &:not(:has(> #site-menu[is-open])) { progress-offset: 0; } @on gesture-handler-start { #site-menu { is-scrubbing: ""; } } @on gesture-handler-end { #site-menu { is-open: event.detail.snap == 1; is-scrubbing: none; } } } main { @on copy-source (handle: copySource); } #search-dialog[open] { > include-content { is-active: ""; /* for some reason this is necessary on first render */ @on include-content-did-render (handle: focusInput); } input[type="search"] { /* works on all subsequent opens */ autofocus: ""; } } #search-dialog:not([open]) input[type="search"] { autofocus: none; }

Glossary

One definition per term. Capitalization marks a term that names one of the three ASO roles.

Adapter — A located element (or family of elements) that bridges the State and one foreign protocol — a system or a person — carrying the protocol's state as attributes and provisions, its occurrences as events, and its other machinery privately. On the web: a custom or native element.

ASO — Adapter, State, Orchestrator. The application architecture implemented by the Nucleus Stack.

Addressability — Any part of the State can be named. On the web, by a CSS selector. A precondition for orchestration.

Binding — A $variable value a Quark rule stores on an element, readable by that element and its descendants, across sheets.

Catalyst — Whatever originates change: a user action, a network response, a timer. Adapters originate change; rules respond.

Closed under derivation — Every fact in the State traces back to somewhere else in the State, with computation allowed in between. Nothing originates outside it.

Command — An imperative aimed at one element, carried by the platform's command event (CommandEvent): non-bubbling, cancelable, with a --verb name (--submit, --reload) and a source. Invoked by <button command commandfor>, <event-handler command-name>, or script; handled with Neutron onCommand. Not State (it describes no fact) and not an announcement.

Content — In Quark, the content: property: text, a cloned <template>, a fetched fragment, an iteration, trusted HTML, or a node a module function built.

Default action — What an element does after firing a cancelable event unless a listener synchronously calls preventDefault(). The escape hatch for customizing an Adapter without forking it.

Effect — In Neutron, the plain object (or array of objects) a lifecycle or method returns, describing what should happen (prop values, emit, style, listeners) instead of mutating the element directly.

Element base — A composable Neutron builder that encodes a shared contract (abortable-element, fetchable-element, renderable-element, listenable-element, routable-element). Opt-in.

Family — A root Adapter plus its sub-adapters, sharing a name prefix: content-tabs / content-tabs-header / content-tabs-body.

Host — The parent element of a <quark-sheet>. The sheet's rules match only inside it, unless is-global attr is set. The host itself is reachable via :scope.

Iteration — iterate(array or object): stamps one copy of an element's <template> per item, exposing item and index to rules.

Neutron — The declarative factory for building custom elements as Adapters. Optional; an ASO app can use only native elements or other Custom Element constructors, so long as the elements themselves adhere to the Adapter definition.

Neutron element — Any custom element built with the Neutron factory, whether it ships in NucleusKit or the app author wrote it.

NucleusKit — The package that bundles the whole stack behind one import: nucleus-kit.

NucleusKit element — One of the drop-in custom elements in the NucleusKit catalog (content-drawer, super-form, spa-route, …). Each is also published on its own.

Nucleus Stack — The whole combination: NucleusKit elements + Neutron + Quark + Valence.css + Nucleus DevTools, published as @excom/*.

Option attribute — An attribute the author sets to configure an element (api-url, lazy-load).

Orchestrator — A declarative, selector-driven observer that watches the State for changes and writes coordinated changes back into it, holding no state of its own. On the web: Quark.

Protocol — What an Adapter bridges to the State: a system (network, storage, sensor, clock, history, viewport) or a person (pointer, keyboard, focus, the accessibility tree). One protocol per Adapter.

Provision — Rich data an Adapter publishes on itself (a parsed response, route params). Adapter-owned, published rather than authored. Read in Quark with prop("provision").

Pure function — A JavaScript function that takes values and returns values without side effects. The preferred shape for everything imported via @use.

Quark — The CSS-derived orchestration language and runtime. Sheets of rules that select elements and write attributes, content, listeners, and variables.

Recognized elements — The descendants an element wires up automatically (super-form recognizes your <form>). Listed on each package page.

Rule — A selector plus declarations. Runs whenever a matched element's referenced attributes or bindings change. Does not revert on unmatch.

Rule reversion — CSS behavior in which a declaration stops applying when its selector stops matching. Quark does not do this; write the inverse rule.

Scope — The subtree a sheet may affect. Sheets are implicitly wrapped in @scope { } anchored at the host; is-global opts out.

Serializability — The whole State can be written out and shipped fully formed. A requirement, not a convenience.

Quark Sheet — A <quark-sheet> (inline or src-url) or a programmatic Quark instance: one unit of orchestration.

element.quark — The JS side of $variables: setProperty / setProperties / removeProperty / getPropertyValue on any element, shaped like element.style. The element written to becomes the binding's owner.

State — An application's living, structured, declarative body of data — the single source of truth - that is simultaneously what the application reads and presents. On the web: the document.

State attribute — An attribute an element writes about itself (is-loading, did-fail, has-rendered). What CSS and Quark select on.

Sub-adapter — A dependent part of an Adapter family that cannot operate alone. It adapts input at its own node and announces upward; the root keeps the family's state coherent and may write it.

Super element — A super-* element that wraps and upgrades a native element the author still writes (super-form, super-input).

Tag alias — A .tag-* class in Valence.css that lends a native tag's look to any element (<my-card class="tag-article">). Every alias has a matching ARIA role; prefer the role.

Template method — The architectural pattern behind an Adapter's customization surfaces: the Adapter owns the algorithm; attributes, events, and default actions are the hooks.

Unified surface — The State is simultaneously the source of truth and the presented artifact. ASO's headline property.

Valence.css — The stack's semantic, classless CSS with --v-* tokens, [data-scheme] light/dark, role and tag aliases, and opt-outs. Proud fork of the brilliant Pico.css.

View — An HTML fragment that owns its CSS and its Quark sheet, loaded by include-content or spa-route. The stack's replacement for components; always the app author's, never shipped with the stack.

@use — Quark's module import statement: @use "/utils.js" as *; exposes a module's exports to sheet expressions and event handlers.

Beta. The Nucleus Stack is in beta for a few weeks until features are stabilized and optimized.

Thanks — we'll email you when it ships.

Something went wrong. Please try again.