@lepid-labs/styles 1.0.0 → 1.0.2

package/neon-butterfly/components/button-hold.css

@@ -0,0 +1,112 @@
+/* neon-butterfly — hold-to-confirm button: lime ring (the activity signal), glow on commit
+ *
+ * Contract: .ld-btn--hold composes with .ld-btn and any variant. The consumer
+ * writes one number, --ld-hold in [0, 1]; the ring fill is pure CSS.
+ * data-ld-hold="holding" | "fired" carries the behavioural state.
+ */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold {
+  --ld-hold: 0;
+  --ld-hold-color: var(--ld-on-surface); /* neutral on its own */
+  position: relative;
+  gap: var(--ld-space-3);
+  padding: var(--ld-space-2) var(--ld-space-3) var(--ld-space-2) var(--ld-space-2);
+  text-align: left;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none; /* a touch hold must not turn into a scroll */
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold.ld-btn--primary {
+  --ld-hold-color: var(--ld-primary);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold.ld-btn--accent {
+  --ld-hold-color: var(--ld-accent);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold.ld-btn--danger {
+  --ld-hold-color: var(--ld-accent);
+}
+
+/* ring: the icon well, wrapped by a conic fill masked to a 3px stroke */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn__ring {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  background: var(--ld-surface-sunken);
+  color: var(--ld-hold-color);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn__ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(var(--ld-hold-color) calc(var(--ld-hold) * 360deg), var(--ld-border-lit) 0);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
+  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn__ring > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  line-height: 1.2;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn__label {
+  font-weight: var(--ld-font-weight-bold);
+}
+/* the hint and meter restate the ring, so state is never color-only */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn__hint {
+  font-size: 11px;
+  font-weight: var(--ld-font-weight);
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--ld-faint);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn__meter {
+  margin-left: auto;
+  min-width: 3.5ch;
+  text-align: right;
+  font-family: var(--ld-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--ld-faint);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold[data-ld-hold="holding"] .ld-btn__meter {
+  color: var(--ld-hold-color);
+}
+
+/* fired: the post-commit flash */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold[data-ld-hold="fired"] {
+  border-color: var(--ld-hold-color);
+  animation: ld-nb-hold-fired 0.6s ease-out;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold[data-ld-hold="fired"] .ld-btn__ring {
+  box-shadow: 0 0 16px color-mix(in srgb, var(--ld-hold-color) 55%, transparent);
+}
+@keyframes ld-nb-hold-fired {
+  from {
+    box-shadow: 0 0 28px color-mix(in srgb, var(--ld-hold-color) 70%, transparent);
+  }
+  to {
+    box-shadow: 0 0 12px color-mix(in srgb, var(--ld-hold-color) 35%, transparent);
+  }
+}
+
+/* reduced motion: the ring still fills (it is the state, not decoration);
+ * only the flash and glow go */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold[data-ld-hold="fired"] {
+    animation: none;
+    box-shadow: none;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--hold[data-ld-hold="fired"] .ld-btn__ring {
+    box-shadow: none;
+  }
+}

package/neon-butterfly/components/icon-button.css

@@ -0,0 +1,66 @@
+/* neon-butterfly — icon button: chromeless square, faint glyph that lights lilac (backplane's .icon-btn).
+ * Icon-only control (<button> or <a>): give it an accessible name (aria-label).
+ * Active/current: .ld-icon-btn--active, [aria-pressed="true"], [aria-current="page"]. */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--ld-radius);
+  color: var(--ld-faint);
+  font: inherit;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn > svg {
+  width: 1.25em;
+  height: 1.25em;
+  flex: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn:hover,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn:focus-visible {
+  color: var(--ld-primary);
+  outline: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn:focus-visible {
+  box-shadow: 0 0 0 1px var(--ld-primary-border), 0 0 8px var(--ld-primary-glow);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn--active,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn[aria-pressed="true"],
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn[aria-current="page"] {
+  color: var(--ld-primary);
+  text-shadow: 0 0 8px var(--ld-primary-glow);
+}
+
+/* danger: destructive action (delete, remove) — faint at rest, red on hover */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn--danger:hover,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn--danger:focus-visible {
+  color: var(--ld-danger);
+}
+
+/* disabled: dimmed and inert — hover never lights it; [aria-disabled] covers <a> */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn:disabled,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn[aria-disabled="true"] {
+  opacity: 0.4;
+  color: var(--ld-faint);
+  background: none;
+  box-shadow: none;
+  transform: none;
+  cursor: not-allowed;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn {
+    transition: none;
+  }
+}

package/neon-butterfly/components/layout.css

@@ -0,0 +1,348 @@
+/* neon-butterfly — layout: the app shell's grid, sticky parts, rail, drawer and tab
+ * bar. Structure only, identical in every theme (the chrome lives in
+ * shell.css; the page layouts that go inside main live in page.css).
+ *
+ * .ld-shell is a grid of named areas; any of __header, __nav, __footer may be
+ * left out and its track collapses to nothing, so there are no "has header"
+ * modifiers. The shell paints the theme's page background (base.css lists it
+ * beside .ld-bg). Nav state is two presence attributes on the root:
+ * data-ld-nav-collapsed (wide: icon rail) and data-ld-nav-open (narrow:
+ * drawer shown). The header always spans the full width above the nav, so
+ * its toggle and brand never move as the nav collapses or hides. Below 48rem
+ * the nav leaves the grid and becomes a drawer — or, with .ld-shell--tabbar,
+ * a bottom tab bar. 48rem is SHELL_NARROW_QUERY
+ * in the React package; keep the two in step.
+ */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell {
+  --ld-shell-header-h: 3.5rem;
+  --ld-shell-nav-w: 15rem;
+  --ld-shell-rail-w: 4.25rem;
+  --ld-shell-top: 0px; /* sticky offset below the header, when there is one */
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header header"
+    "nav main"
+    "nav footer";
+  min-block-size: 100dvh;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell:has(> .ld-shell__header) {
+  --ld-shell-top: var(--ld-shell-header-h);
+}
+
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__skip {
+  position: absolute;
+  inset-inline-start: var(--ld-space-2);
+  inset-block-start: -10rem;
+  z-index: 50;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__skip:focus {
+  inset-block-start: var(--ld-space-2);
+}
+
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__header {
+  grid-area: header;
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-3);
+  block-size: var(--ld-shell-header-h);
+  padding-inline: var(--ld-space-3);
+  min-inline-size: 0;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__toggle {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  padding: 0;
+  cursor: pointer;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__toggle svg {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell:not(:has(> .ld-shell__nav)) .ld-shell__toggle {
+  display: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__brand {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ld-space-2);
+  text-decoration: none;
+  white-space: nowrap;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__brand svg,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__brand img {
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-topnav {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-1);
+  min-inline-size: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-topnav__item {
+  flex: none;
+  white-space: nowrap;
+  text-decoration: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-2);
+  margin-inline-start: auto;
+}
+
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__nav {
+  grid-area: nav;
+  position: sticky;
+  inset-block-start: var(--ld-shell-top);
+  align-self: start;
+  z-index: 10;
+  inline-size: var(--ld-shell-nav-w);
+  block-size: calc(100dvh - var(--ld-shell-top));
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  transition: inline-size var(--ld-transition);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__scrim {
+  display: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  padding: var(--ld-space-4) var(--ld-space-5);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__main:focus {
+  outline: none; /* focus target of the skip link, not an interactive control */
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__footer {
+  grid-area: footer;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ld-space-2) var(--ld-space-4);
+  padding: var(--ld-space-3) var(--ld-space-5);
+}
+
+/* Side nav: sections of icon + label items, an optional footer pinned low. */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ld-space-3);
+  min-block-size: 100%;
+  padding: var(--ld-space-3) var(--ld-space-2);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__heading {
+  margin: 0;
+  padding: var(--ld-space-1) var(--ld-space-3);
+  white-space: nowrap;
+  overflow: hidden;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-3);
+  min-block-size: 2.5rem;
+  padding: var(--ld-space-2) var(--ld-space-3);
+  text-decoration: none;
+  white-space: nowrap;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__icon {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__icon svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__label {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__badge {
+  flex: none;
+  margin-inline-start: auto;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-block-start: auto;
+}
+/* A brand inside the nav (for shells without a header). */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav > .ld-shell__brand {
+  padding: var(--ld-space-1) var(--ld-space-3) var(--ld-space-2);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-sidenav__footer > .ld-shell__toggle {
+  margin-inline-start: var(--ld-space-2);
+}
+
+/* Wide: the collapsed nav is an icon rail. Labels, headings and badges stay
+ * in the accessibility tree, only visually clipped; headings become rules. */
+@media (width > 48rem) {
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-collapsed] .ld-shell__nav {
+    inline-size: var(--ld-shell-rail-w);
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav__item {
+    justify-content: center;
+    padding-inline: 0;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-collapsed] :is(.ld-sidenav__label, .ld-sidenav__badge),
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav__heading {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav > .ld-shell__brand {
+    justify-content: center;
+    padding-inline: 0;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav > .ld-shell__brand > :not(svg, img) {
+    display: none;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav__footer > .ld-shell__toggle {
+    margin-inline: auto;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-collapsed] .ld-sidenav__section + .ld-sidenav__section {
+    border-block-start: 1px solid var(--ld-border);
+    padding-block-start: var(--ld-space-3);
+  }
+}
+
+/* Narrow: the nav leaves the grid. Default is an off-canvas drawer under the
+ * header (visibility keeps a closed drawer out of the tab order). */
+@media (width <= 48rem) {
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__header {
+    padding-inline: var(--ld-space-2);
+    gap: var(--ld-space-2);
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__main {
+    padding: var(--ld-space-3);
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__footer {
+    padding: var(--ld-space-3);
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__nav {
+    position: fixed;
+    inset-block: var(--ld-shell-top) 0;
+    inset-inline-start: 0;
+    align-self: stretch; /* fixed boxes honour align-self; "start" would shrink-wrap the drawer */
+    z-index: 40;
+    inline-size: min(var(--ld-shell-nav-w) + 3rem, 85vw);
+    block-size: auto;
+    transform: translateX(-100%);
+    visibility: hidden;
+    transition: transform var(--ld-transition), visibility 0s linear var(--ld-transition);
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-open] .ld-shell__nav {
+    transform: none;
+    visibility: visible;
+    transition: transform var(--ld-transition);
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-open] .ld-shell__scrim {
+    display: block;
+    position: fixed;
+    inset: var(--ld-shell-top) 0 0;
+    z-index: 30;
+  }
+
+  /* Tab bar: the nav docks at the bottom; sections flatten into one row. */
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-shell__toggle {
+    display: none;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-shell__nav {
+    inset-block: auto 0;
+    inset-inline: 0;
+    inline-size: auto;
+    transform: none;
+    visibility: visible;
+    overflow: visible;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+    transition: none;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-shell__scrim {
+    display: none;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-sidenav {
+    flex-direction: row;
+    gap: 0;
+    min-block-size: 0;
+    padding: var(--ld-space-1);
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar :is(.ld-sidenav__section, .ld-sidenav__footer) {
+    display: contents;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-sidenav > .ld-shell__brand {
+    display: none;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-sidenav__heading {
+    display: none;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-sidenav__item {
+    position: relative;
+    flex: 1 1 0;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    min-inline-size: 0;
+    padding: var(--ld-space-1);
+    font-size: 0.6875rem;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-sidenav__label {
+    flex: none;
+    max-inline-size: 100%;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-sidenav__badge {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(50% + 0.5rem);
+    margin: 0;
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar .ld-shell__footer {
+    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
+  }
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell--tabbar:not(:has(> .ld-shell__footer)) .ld-shell__main {
+    padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell__nav,
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell[data-ld-nav-open] .ld-shell__nav {
+    transition: none;
+  }
+}

package/neon-butterfly/components/page.css

@@ -0,0 +1,85 @@
+/* neon-butterfly — page layouts: what goes inside .ld-shell__main (or any
+ * container). Structure only, identical in every theme; shell.css dresses the
+ * page header's type. */
+/* A page column: width-capped, centered, with a header row. */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page {
+  display: grid;
+  align-content: start;
+  gap: var(--ld-space-4);
+  inline-size: 100%;
+  max-inline-size: var(--ld-page-max, 72rem);
+  margin-inline: auto;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page--narrow { --ld-page-max: 48rem; }
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page--wide { --ld-page-max: 96rem; }
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page--full { --ld-page-max: none; }
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--ld-space-3);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page__heading {
+  display: grid;
+  gap: var(--ld-space-1);
+  min-inline-size: 0;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page__title,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page__subtitle,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page__eyebrow {
+  margin: 0;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-page__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ld-space-2);
+}
+
+/* Dashboard grid: as many columns of at least --ld-grid-min as fit. */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--ld-grid-min, 18rem), 100%), 1fr));
+  gap: var(--ld-space-3);
+  align-items: start;
+}
+
+/* List + detail, and content + aside: two panes that stack by themselves once
+ * the wide pane would drop below 60% of the row — no breakpoint, so they work
+ * at any shell width. */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-split,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-aside-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--ld-space-4);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-split__list {
+  flex: 1 1 var(--ld-split-list, 20rem);
+  display: grid;
+  gap: var(--ld-space-2);
+  min-inline-size: 0;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-split__detail,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-aside-layout__main {
+  flex: 999 1 0;
+  min-inline-size: 60%;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-aside-layout__aside {
+  flex: 1 1 var(--ld-aside-w, 16rem);
+  position: sticky;
+  inset-block-start: calc(var(--ld-shell-top, 0px) + var(--ld-space-3));
+  min-inline-size: 0;
+}
+
+/* Centered: one narrow column in the middle of the remaining height — sign
+ * in, empty states, a single form. Fills .ld-shell__main (a flex column). */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-center {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  min-block-size: 100%;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-center > * {
+  inline-size: min(100%, var(--ld-center-max, 26rem));
+}

package/neon-butterfly/components/pre.css

@@ -11,3 +11,78 @@
   font-size: var(--ld-text-sm);
   overflow-x: auto;
 }
+
+/* Log / terminal variant (.ld-pre--log): bounded, scrolls both ways, wraps
+ * long lines, and carries faint 4px scanlines. Height comes from
+ * --ld-log-max-height (the React LogBlock's maxHeight sets it inline). */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre--log {
+  max-height: var(--ld-log-max-height, 420px);
+  overflow: auto;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 100% 4px;
+}
+
+/* Copy control (.ld-pre-wrap + .ld-pre-copy): an .ld-icon-btn pinned to the
+ * block's top-right corner. Hidden until the wrap is hovered or holds focus
+ * (so it stays keyboard-reachable), always shown where there's no hover
+ * (touch). The host script sets data-ld-copy="copied" | "failed" on the
+ * button for ~1.5s: copied swaps the copy glyph for the check. Status text for
+ * screen readers goes in the visually hidden aria-live .ld-pre-copy-status. */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-wrap {
+  position: relative;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-wrap > .ld-pre {
+  padding-right: calc(2rem + var(--ld-space-3));
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-copy {
+  position: absolute;
+  top: var(--ld-space-1);
+  right: var(--ld-space-1);
+  background: var(--ld-surface-sunken);
+  opacity: 0;
+  transition: opacity var(--ld-transition), color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-wrap:hover .ld-pre-copy,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-wrap:focus-within .ld-pre-copy,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-wrap .ld-pre-copy[data-ld-copy] {
+  opacity: 1;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-wrap .ld-pre-copy[data-ld-copy="copied"] {
+  color: var(--ld-success);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-wrap .ld-pre-copy[data-ld-copy="failed"] {
+  color: var(--ld-danger);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-copy__check,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-copy[data-ld-copy="copied"] .ld-pre-copy__icon {
+  display: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-copy[data-ld-copy="copied"] .ld-pre-copy__check {
+  display: block;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-copy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (hover: none) {
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-copy {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre-copy {
+    transition: none;
+  }
+}