@cloudhal/cli 0.0.0-stage → 0.1.0

package/dist/assets/starters/blog/src/styles/features/search-dialog.css

@@ -0,0 +1,144 @@
+/*
+ * RFC-0029 §6: the search modal. Painted from the color roles like the overlays (RFC-0025 §3):
+ * centered and 40rem wide on wide screens, a full-height sheet on phones, and the page behind it
+ * does not scroll (`overlays.css`).
+ */
+.ch-search-dialog {
+  margin: 10dvh auto auto;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  max-width: min(40rem, calc(100vw - 2rem));
+  max-height: min(75dvh, 40rem);
+  overflow: hidden;
+  border-radius: var(--ch-radius-l, 0.75rem);
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+  box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.4);
+}
+.ch-search-dialog[open] {
+  display: flex;
+}
+.ch-search-dialog::backdrop {
+  background: rgb(0 0 0 / 0.5);
+}
+.ch-search-dialog__panel {
+  @apply flex min-h-0 w-full flex-col;
+}
+.ch-search-dialog__bar {
+  @apply flex items-center gap-2 px-4 py-3;
+  border-bottom: 1px solid var(--ch-color-border);
+}
+.ch-search-dialog__bar input {
+  @apply min-w-0 flex-1 bg-transparent py-1 text-lg outline-none;
+}
+.ch-search-dialog__bar input::-webkit-search-cancel-button {
+  display: none;
+}
+.ch-search-dialog__close {
+  @apply shrink-0 cursor-pointer rounded-md px-2 py-1 text-sm;
+  color: var(--ch-color-text-muted);
+}
+.ch-search-dialog__close:hover {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+.ch-search-dialog__body {
+  @apply min-h-0 flex-1 overflow-y-auto px-2 py-2;
+  overscroll-behavior: contain;
+}
+.ch-search-dialog__body:has(.ch-search-dialog__list:empty):has(.ch-search-dialog__note[hidden]) {
+  display: none;
+}
+.ch-search-group + .ch-search-group {
+  @apply mt-2;
+}
+.ch-search-group__label {
+  @apply px-3 pt-2 pb-1 text-xs font-medium;
+  color: var(--ch-color-text-subtle);
+}
+.ch-search-option {
+  @apply grid gap-0.5 rounded-md px-3 py-2 no-underline;
+  color: inherit;
+  scroll-margin: 0.5rem;
+}
+.ch-search-option[aria-selected="true"] {
+  background: color-mix(in oklab, var(--ch-color-link, currentColor) 12%, transparent);
+}
+.ch-search-option__context {
+  @apply text-xs;
+  color: var(--ch-color-text-subtle);
+}
+.ch-search-option__title {
+  @apply font-medium;
+}
+.ch-search-option__snippet {
+  @apply line-clamp-2 text-sm;
+  color: var(--ch-color-text-muted);
+}
+.ch-search-option__snippet mark {
+  @apply rounded-sm px-0.5;
+  background: color-mix(in oklab, #f59e0b 30%, transparent);
+  color: inherit;
+}
+.ch-search-option--all .ch-search-option__title {
+  @apply text-sm;
+  color: var(--ch-color-link, inherit);
+}
+.ch-search-dialog__note {
+  @apply flex flex-wrap items-center gap-2 px-3 py-3 text-sm;
+  color: var(--ch-color-text-muted);
+}
+.ch-search-dialog__note a {
+  @apply underline underline-offset-4;
+}
+.ch-search-clear {
+  @apply cursor-pointer text-sm underline underline-offset-4;
+}
+.ch-search-dialog__keys {
+  @apply hidden items-center gap-4 px-4 py-2 text-xs sm:flex;
+  border-top: 1px solid var(--ch-color-border);
+  color: var(--ch-color-text-subtle);
+}
+.ch-search-dialog__keys kbd {
+  @apply me-1 rounded px-1 font-mono;
+  border: 1px solid var(--ch-color-border);
+}
+.ch-search-dialog[aria-busy="true"] .ch-search-dialog__list {
+  opacity: 0.6;
+}
+/* Phones: a full-height sheet with the field at the top. */
+@media (max-width: 639px) {
+  .ch-search-dialog {
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    height: 100dvh;
+    border-radius: 0;
+  }
+}
+/* The header field opens the modal once the module is here. */
+:root[data-ch-search-ready] [data-ch-search-open] input {
+  cursor: pointer;
+}
+/* Entrance at the site's motion level (RFC-0024); none under reduced motion. */
+:root:not([data-ch-motion="none"]) .ch-search-dialog {
+  transition:
+    opacity var(--ch-dur-2, 0.2s) ease-out,
+    translate var(--ch-dur-2, 0.2s) var(--ch-ease-out, ease-out),
+    display var(--ch-dur-2, 0.2s) allow-discrete,
+    overlay var(--ch-dur-2, 0.2s) allow-discrete;
+}
+:root:not([data-ch-motion="none"]) .ch-search-dialog:not([open]) {
+  opacity: 0;
+}
+@starting-style {
+  .ch-search-dialog[open] {
+    opacity: 0;
+    translate: 0 -0.5rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ch-search-dialog {
+    transition: none !important;
+  }
+}

package/dist/assets/starters/blog/src/styles/features/search.css

@@ -0,0 +1,59 @@
+/* Search (RFC-0019 §3): the header form, the page's form, results with highlighted snippets. */
+.ch-header-search input {
+  @apply w-40 rounded-md border border-zinc-300 px-3 py-1.5 text-sm sm:w-48;
+}
+.ch-search h1 {
+  @apply text-3xl font-bold tracking-tight;
+}
+.ch-search-form {
+  @apply mt-4 flex gap-2;
+}
+.ch-search-form input {
+  @apply min-w-0 flex-1 rounded-md border border-zinc-300 px-3 py-2;
+}
+.ch-search-form button {
+  @apply rounded-md px-4 py-2 font-medium bg-(--ch-color-surface-inverse) text-(--ch-color-text-inverse) hover:opacity-90;
+}
+.ch-search-note {
+  @apply mt-4 rounded-md border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900;
+}
+.ch-search-summary {
+  @apply mt-4 text-sm text-zinc-600;
+}
+.ch-search-results {
+  @apply mt-6 space-y-6;
+}
+.ch-search-context {
+  @apply text-xs font-medium text-zinc-500;
+}
+.ch-search-results h2 {
+  @apply text-lg font-semibold;
+}
+.ch-search-results h2 a {
+  @apply underline-offset-4 hover:underline;
+}
+.ch-search-snippet {
+  @apply mt-1 text-zinc-700;
+}
+.ch-search-snippet mark {
+  @apply rounded-sm bg-amber-100 px-0.5 text-zinc-900;
+}
+.ch-search-results time {
+  @apply mt-1 block text-sm text-zinc-500;
+}
+/* The built-in not-found page: the search page's form, a sentence and a link home. */
+.ch-not-found-text {
+  @apply mt-3 text-zinc-700;
+}
+.ch-not-found .ch-search-form {
+  @apply flex-wrap items-center;
+}
+.ch-not-found-prompt {
+  @apply w-full text-sm text-zinc-600;
+}
+.ch-not-found-home {
+  @apply mt-6;
+}
+.ch-not-found-home a {
+  @apply font-medium underline underline-offset-4;
+}

package/dist/assets/starters/blog/src/styles/features/surface-media.css

@@ -0,0 +1,123 @@
+/* RFC-0028 §3: how an image meets its frame. cover (the default) crops around the focal point the
+   renderer sets as object-position; the others show the whole picture, and what fills the bars is
+   the image's placeholder layer: its blurred self (blur-fill), its colour (color-fill) or nothing. */
+.ch-figure:is([data-fit="contain"], [data-fit="blur-fill"], [data-fit="color-fill"]) img,
+.ch-carousel[data-aspect]
+  .ch-carousel__slide
+  .ch-figure:is([data-fit="contain"], [data-fit="blur-fill"], [data-fit="color-fill"])
+  img {
+  object-fit: contain;
+}
+.ch-figure[data-fit="natural"] img {
+  aspect-ratio: auto;
+  height: auto;
+}
+.ch-figure figcaption {
+  @apply mt-2 text-sm text-zinc-500;
+}
+.ch-button--ghost {
+  @apply underline-offset-4 hover:underline;
+}
+.ch-link {
+  @apply font-medium underline underline-offset-4;
+}
+.ch-badge {
+  @apply inline-block w-fit rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-700;
+}
+.ch-badge[data-tone="info"] {
+  @apply bg-sky-100 text-sky-800;
+}
+.ch-badge[data-tone="success"] {
+  @apply bg-emerald-100 text-emerald-800;
+}
+.ch-badge[data-tone="warning"] {
+  @apply bg-amber-100 text-amber-900;
+}
+.ch-badge[data-tone="danger"] {
+  @apply bg-red-100 text-red-800;
+}
+.ch-stat {
+  @apply flex flex-col gap-1;
+}
+.ch-stat__value {
+  @apply text-4xl font-bold tracking-tight;
+}
+.ch-stat__label {
+  @apply text-sm font-medium text-zinc-700;
+}
+.ch-stat__detail {
+  @apply text-sm text-zinc-500;
+}
+.ch-quote blockquote {
+  @apply border-l-4 border-zinc-300 pl-4 text-lg italic;
+}
+.ch-quote figcaption {
+  @apply mt-2 text-sm text-zinc-600;
+}
+.ch-quote cite {
+  @apply font-medium not-italic text-zinc-900;
+}
+.ch-list {
+  @apply space-y-2 pl-5;
+}
+ul.ch-list {
+  @apply list-disc;
+}
+ol.ch-list {
+  @apply list-decimal;
+}
+.ch-list[data-marker="none"] {
+  @apply list-none pl-0;
+}
+/* RFC-0026: an icon of the set as the bullet ("check" included), in the brand color. */
+.ch-list[data-marker="icon"] {
+  @apply list-none pl-0;
+}
+.ch-list[data-marker="icon"] li {
+  @apply flex items-start gap-2;
+}
+.ch-list__marker {
+  @apply mt-[0.2em];
+  color: var(--ch-color-brand);
+}
+/* Tabs without JavaScript: the n-th checked radio shows the n-th panel. */
+.ch-tabs {
+  @apply flex flex-wrap gap-x-1;
+}
+.ch-tabs__radio {
+  @apply sr-only;
+}
+.ch-tabs__tab {
+  @apply cursor-pointer rounded-t border-b-2 border-transparent px-4 py-2 text-sm font-medium text-zinc-600;
+}
+.ch-tabs__radio:checked + .ch-tabs__tab {
+  @apply border-current text-zinc-900;
+}
+.ch-tabs__radio:focus-visible + .ch-tabs__tab {
+  @apply outline-2 outline-offset-2;
+}
+.ch-tabs__panels {
+  @apply w-full border-t border-zinc-200 pt-4;
+}
+.ch-tabs__panel {
+  @apply hidden;
+}
+.ch-tabs__radio:nth-of-type(1):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(1),
+.ch-tabs__radio:nth-of-type(2):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(2),
+.ch-tabs__radio:nth-of-type(3):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(3),
+.ch-tabs__radio:nth-of-type(4):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(4),
+.ch-tabs__radio:nth-of-type(5):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(5),
+.ch-tabs__radio:nth-of-type(6):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(6),
+.ch-tabs__radio:nth-of-type(7):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(7),
+.ch-tabs__radio:nth-of-type(8):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(8) {
+  @apply flex flex-col gap-4;
+}
+.ch-accordion {
+  @apply divide-y divide-zinc-200 border-y border-zinc-200;
+}
+.ch-disclosure summary {
+  @apply cursor-pointer py-3 font-medium;
+}
+.ch-disclosure__body {
+  @apply flex flex-col gap-3 pb-4;
+}

package/dist/assets/starters/blog/src/styles/features/surfaces.css

@@ -0,0 +1,309 @@
+/* Generated UI (RFC-0020): surfaces built by agents from the catalog's primitives. Values arrive
+   as data-* attributes from closed sets; nothing a model wrote reaches this file. */
+.ch-surface {
+  @apply py-6;
+}
+.ch-stack {
+  @apply flex flex-col gap-4;
+}
+.ch-row {
+  @apply flex flex-wrap items-center gap-4;
+}
+.ch-row[data-wrap="no"] {
+  @apply flex-nowrap;
+}
+.ch-grid {
+  @apply grid grid-cols-1 gap-4 sm:grid-cols-2;
+}
+.ch-grid[data-cols="1"] {
+  @apply sm:grid-cols-1;
+}
+@media (min-width: 48rem) {
+  .ch-grid[data-cols="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .ch-grid[data-cols="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .ch-grid[data-cols="5"] {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .ch-grid[data-cols="6"] {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+.ch-columns {
+  @apply grid grid-cols-1 gap-6 md:grid-cols-2;
+}
+@media (min-width: 48rem) {
+  .ch-columns[data-ratio="2-1"] {
+    grid-template-columns: 2fr 1fr;
+  }
+  .ch-columns[data-ratio="1-2"] {
+    grid-template-columns: 1fr 2fr;
+  }
+  .ch-columns[data-ratio="1-1-1"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .ch-columns[data-ratio="1-2-1"] {
+    grid-template-columns: 1fr 2fr 1fr;
+  }
+}
+:is(.ch-stack, .ch-row, .ch-grid, .ch-columns)[data-gap="none"] {
+  gap: 0;
+}
+:is(.ch-stack, .ch-row, .ch-grid, .ch-columns)[data-gap="s"] {
+  gap: 0.5rem;
+}
+:is(.ch-stack, .ch-row, .ch-grid, .ch-columns)[data-gap="l"] {
+  gap: 2rem;
+}
+:is(.ch-stack, .ch-row, .ch-grid, .ch-columns)[data-gap="xl"] {
+  gap: 3rem;
+}
+:is(.ch-stack, .ch-row)[data-align="center"] {
+  @apply items-center text-center;
+}
+:is(.ch-stack, .ch-row)[data-align="end"] {
+  @apply items-end;
+}
+.ch-row[data-justify="center"] {
+  @apply justify-center;
+}
+.ch-row[data-justify="end"] {
+  @apply justify-end;
+}
+.ch-row[data-justify="between"] {
+  @apply justify-between;
+}
+/* A band leaves the reading column: full width, or wider than the text. */
+.ch-band {
+  @apply relative py-12;
+  margin-inline: calc(50% - 50vw);
+  padding-inline: max(1rem, calc(50vw - 36rem));
+}
+.ch-band[data-width="narrow"] .ch-band__inner {
+  @apply mx-auto max-w-2xl;
+}
+.ch-band[data-width="wide"] .ch-band__inner,
+.ch-band:not([data-width]) .ch-band__inner {
+  @apply mx-auto max-w-6xl;
+}
+/* A band's own children (heading, text, buttons, a grid) need room between them; the theme's
+   spacing unit scales it with the density. */
+.ch-band__inner > * + * {
+  margin-block-start: calc(var(--spacing) * 4);
+}
+.ch-band__inner > .ch-heading + :is(.ch-grid, .ch-columns, .ch-stack, .ch-tabs, .ch-table-wrap) {
+  margin-block-start: calc(var(--spacing) * 6);
+}
+.ch-band[data-spacing="s"] {
+  @apply py-6;
+}
+.ch-band[data-spacing="l"] {
+  @apply py-16;
+}
+.ch-band[data-spacing="xl"] {
+  @apply py-24;
+}
+/*
+ * Surfaces (RFC-0023 §4): what a band or card is painted with, from the color roles only, so
+ * text keeps the contrast the token expansion checked. `data-tone` (older pages) is an alias.
+ */
+:is([data-surface="muted"], [data-tone="muted"]):is(.ch-band, .ch-card) {
+  background: var(--ch-color-surface-muted);
+}
+[data-surface="raised"]:is(.ch-band, .ch-card) {
+  background: var(--ch-color-surface-raised);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.05),
+    0 6px 20px -6px rgb(0 0 0 / 0.12);
+}
+:is([data-surface="brand"], [data-tone="brand"]):is(.ch-band, .ch-card) {
+  background: var(--ch-color-brand);
+  color: var(--ch-color-on-brand);
+}
+:is([data-surface="inverse"], [data-tone="inverse"]):is(.ch-band, .ch-card) {
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+}
+[data-surface="accent"]:is(.ch-band, .ch-card) {
+  background: var(--ch-color-accent);
+  color: var(--ch-color-on-accent);
+}
+/* From the brand to its gradient end: text on brand reads on both (the expansion checks it). */
+[data-surface="gradient"]:is(.ch-band, .ch-card) {
+  background: var(--ch-color-brand);
+  background-image: linear-gradient(
+    135deg in oklch,
+    var(--ch-color-brand),
+    var(--ch-color-gradient)
+  );
+  color: var(--ch-color-on-brand);
+}
+/* Soft light from the brand and accent over the muted surface; plain muted where unsupported. */
+[data-surface="mesh"]:is(.ch-band, .ch-card) {
+  background-color: var(--ch-color-surface-muted);
+  background-image:
+    radial-gradient(
+      at 12% 18%,
+      color-mix(in oklch, var(--ch-color-brand) 16%, transparent),
+      transparent 55%
+    ),
+    radial-gradient(
+      at 88% 8%,
+      color-mix(in oklch, var(--ch-color-accent) 14%, transparent),
+      transparent 50%
+    ),
+    radial-gradient(
+      at 55% 100%,
+      color-mix(in oklch, var(--ch-color-brand) 9%, transparent),
+      transparent 60%
+    );
+}
+[data-surface="dots"]:is(.ch-band, .ch-card) {
+  background-color: var(--ch-color-surface-muted);
+  background-image: radial-gradient(var(--ch-color-border-strong) 1px, transparent 1.5px);
+  background-size: 18px 18px;
+}
+[data-surface="grid"]:is(.ch-band, .ch-card) {
+  background-color: var(--ch-color-surface-muted);
+  background-image:
+    linear-gradient(var(--ch-color-border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--ch-color-border) 1px, transparent 1px);
+  background-size: 28px 28px;
+}
+/* A fixed grey grain (no color in it), faint on light and dark alike. */
+[data-surface="noise"]:is(.ch-band, .ch-card) {
+  background-color: var(--ch-color-surface-muted);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+/* Loud surfaces: their text, buttons and links follow the surface's own text color. */
+:is(
+  [data-surface="brand"],
+  [data-surface="inverse"],
+  [data-surface="accent"],
+  [data-surface="gradient"],
+  [data-tone="brand"],
+  [data-tone="inverse"]
+) :is(.ch-text, .ch-stat__label, .ch-stat__detail) {
+  color: inherit;
+  opacity: 0.85;
+}
+:is(
+    [data-surface="brand"],
+    [data-surface="inverse"],
+    [data-surface="accent"],
+    [data-surface="gradient"],
+    [data-tone="brand"],
+    [data-tone="inverse"]
+  )
+  .ch-button--primary {
+  @apply bg-(--ch-color-surface) text-(--ch-color-text);
+}
+:is(
+    [data-surface="brand"],
+    [data-surface="inverse"],
+    [data-surface="accent"],
+    [data-surface="gradient"],
+    [data-tone="brand"],
+    [data-tone="inverse"]
+  )
+  .ch-button--secondary {
+  @apply border-current/60 text-inherit;
+}
+:is(
+    [data-surface="brand"],
+    [data-surface="inverse"],
+    [data-surface="accent"],
+    [data-surface="gradient"],
+    [data-tone="brand"],
+    [data-tone="inverse"]
+  )
+  .ch-link {
+  color: inherit;
+}
+:is(
+  [data-surface="brand"],
+  [data-surface="inverse"],
+  [data-surface="accent"],
+  [data-surface="gradient"],
+  [data-surface="raised"]
+).ch-card {
+  border-color: transparent;
+}
+/* A band with an anchor stops below the top of the window when a link jumps to it. */
+.ch-band[id] {
+  scroll-margin-top: 1rem;
+}
+.ch-card {
+  @apply flex flex-col gap-3 rounded-lg border border-zinc-200 p-5 no-underline;
+}
+a.ch-card {
+  @apply hover:border-zinc-400;
+}
+.ch-spacer {
+  @apply h-8;
+}
+.ch-spacer[data-size="s"] {
+  @apply h-4;
+}
+.ch-spacer[data-size="l"] {
+  @apply h-16;
+}
+.ch-spacer[data-size="xl"] {
+  @apply h-24;
+}
+.ch-divider {
+  @apply my-2 border-zinc-200;
+}
+.ch-heading {
+  @apply font-bold tracking-tight;
+}
+h1.ch-heading {
+  @apply text-4xl sm:text-5xl;
+}
+h2.ch-heading {
+  @apply text-3xl;
+}
+h3.ch-heading {
+  @apply text-xl;
+}
+h4.ch-heading {
+  @apply text-lg;
+}
+.ch-text {
+  @apply space-y-2 leading-relaxed;
+}
+.ch-text[data-size="s"] {
+  @apply text-sm;
+}
+.ch-text[data-size="l"] {
+  @apply text-xl;
+  /* A lead keeps a readable measure, even at a dramatic type scale. */
+  max-inline-size: 48ch;
+}
+.ch-text[data-muted="yes"] {
+  @apply text-zinc-600;
+}
+[data-align="center"]:is(.ch-heading, .ch-text) {
+  @apply text-center;
+}
+[data-align="end"]:is(.ch-heading, .ch-text) {
+  @apply text-right;
+}
+.ch-figure img {
+  @apply w-full rounded-lg object-cover;
+}
+.ch-figure[data-ratio="16:9"] img {
+  aspect-ratio: 16 / 9;
+}
+.ch-figure[data-ratio="4:3"] img {
+  aspect-ratio: 4 / 3;
+}
+.ch-figure[data-ratio="1:1"] img {
+  aspect-ratio: 1;
+}
+.ch-figure[data-ratio="3:4"] img {
+  aspect-ratio: 3 / 4;
+}