@cloudhal/cli 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,185 @@
+/*
+ * Ambient backgrounds (RFC-0024 §4): a layer under a band's or card's content, from its role
+ * colors at low strength, so the surface's text roles keep their contrast. CSS kinds move slowly
+ * (12 s or more a cycle) where motion plays; particles are painted by the ambient module on a
+ * canvas. Everywhere else, and while the reader has paused motion, the layer is a still poster.
+ */
+[data-ch-ambient] {
+  --ch-amb-1: var(--ch-color-brand);
+  --ch-amb-2: var(--ch-color-accent);
+  position: relative;
+  isolation: isolate;
+  overflow: clip;
+}
+[data-ch-colors="brand"] {
+  --ch-amb-2: var(--ch-color-gradient);
+}
+[data-ch-colors="accent"] {
+  --ch-amb-1: var(--ch-color-accent);
+  --ch-amb-2: var(--ch-color-link);
+}
+[data-ch-colors="neutral"] {
+  --ch-amb-1: var(--ch-color-border-strong);
+  --ch-amb-2: var(--ch-color-text-subtle);
+}
+[data-ch-ambient]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+[data-ch-ambient="aurora"]::before {
+  inset: -20%;
+  background:
+    radial-gradient(
+      40% 50% at 20% 30%,
+      color-mix(in oklch, var(--ch-amb-1) 28%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      35% 45% at 80% 20%,
+      color-mix(in oklch, var(--ch-amb-2) 24%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      45% 40% at 60% 90%,
+      color-mix(in oklch, var(--ch-amb-1) 18%, transparent),
+      transparent 70%
+    );
+  filter: blur(24px);
+}
+[data-ch-ambient="gradient-shift"]::before {
+  background-image: linear-gradient(
+    115deg,
+    color-mix(in oklch, var(--ch-amb-1) 22%, transparent),
+    color-mix(in oklch, var(--ch-amb-2) 22%, transparent),
+    color-mix(in oklch, var(--ch-amb-1) 22%, transparent)
+  );
+  background-size: 300% 300%;
+}
+[data-ch-ambient="grain"]::before {
+  inset: -10%;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' 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 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.6;
+}
+[data-ch-ambient="beams"]::before {
+  background-image:
+    linear-gradient(
+      105deg,
+      transparent 35%,
+      color-mix(in oklch, var(--ch-amb-1) 20%, transparent) 45%,
+      transparent 55%
+    ),
+    linear-gradient(
+      105deg,
+      transparent 55%,
+      color-mix(in oklch, var(--ch-amb-2) 16%, transparent) 63%,
+      transparent 72%
+    );
+  background-size: 250% 100%;
+}
+/* Particles: a soft still poster until (and unless) the ambient module paints the canvas. */
+[data-ch-ambient="particles"]::before {
+  background:
+    radial-gradient(
+      45% 60% at 25% 35%,
+      color-mix(in oklch, var(--ch-amb-1) 14%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      40% 55% at 75% 65%,
+      color-mix(in oklch, var(--ch-amb-2) 12%, transparent),
+      transparent 70%
+    );
+}
+.ch-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+@keyframes ch-amb-aurora {
+  to {
+    translate: 6% -4%;
+    rotate: 8deg;
+  }
+}
+@keyframes ch-amb-pan {
+  to {
+    background-position: 100% 50%;
+  }
+}
+@keyframes ch-amb-drift {
+  to {
+    translate: -6% -4%;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-ambient="aurora"]::before {
+    animation: ch-amb-aurora 18s ease-in-out infinite alternate;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-ambient="gradient-shift"]::before {
+    animation: ch-amb-pan 16s ease-in-out infinite alternate;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-ambient="grain"]::before {
+    animation: ch-amb-drift 14s ease-in-out infinite alternate;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-ambient="beams"]::before {
+    animation: ch-amb-pan 12s linear infinite alternate;
+  }
+}
+/*
+ * Page transitions (RFC-0024 §5): themeVariables writes @view-transition when the site chose one;
+ * these shape it. Crossfade is the browser's own, at the level's pace; slide moves the old page
+ * out and the new one in (crossfade at "subtle"); morph moves elements with the same
+ * view-transition name between pages. Nothing animates at "none" or under reduced motion.
+ */
+::view-transition-group(*),
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: var(--ch-dur-normal, 250ms);
+  animation-timing-function: var(--ch-ease-standard, ease);
+}
+@keyframes ch-vt-out {
+  to {
+    opacity: 0;
+    translate: calc(var(--ch-move-l, 0px) * -0.5) 0;
+  }
+}
+@keyframes ch-vt-in {
+  from {
+    opacity: 0;
+    translate: calc(var(--ch-move-l, 0px) * 0.5) 0;
+  }
+}
+:root[data-ch-page-transition="slide"]:is(
+  [data-ch-motion="standard"],
+  [data-ch-motion="expressive"]
+)::view-transition-old(root) {
+  animation-name: ch-vt-out;
+}
+:root[data-ch-page-transition="slide"]:is(
+  [data-ch-motion="standard"],
+  [data-ch-motion="expressive"]
+)::view-transition-new(root) {
+  animation-name: ch-vt-in;
+}
+:root[data-ch-motion="none"]::view-transition-group(*),
+:root[data-ch-motion="none"]::view-transition-old(*),
+:root[data-ch-motion="none"]::view-transition-new(*) {
+  animation: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

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

@@ -0,0 +1,215 @@
+/* The article (RFC-0018 §3): kicker, title, dek, byline, table of contents. */
+.ch-article-head {
+  @apply space-y-3 border-b border-zinc-200 pt-6 pb-6;
+}
+.ch-kicker {
+  @apply inline-block text-sm font-semibold uppercase;
+  color: var(--ch-color-link);
+  letter-spacing: 0.04em;
+}
+a.ch-kicker:hover {
+  @apply underline underline-offset-4;
+}
+.ch-article-head h1 {
+  @apply text-4xl font-bold tracking-tight sm:text-5xl;
+}
+.ch-dek {
+  @apply text-xl leading-relaxed text-zinc-600;
+}
+.ch-byline {
+  @apply flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-zinc-500;
+}
+.ch-byline > * + *::before {
+  content: "·";
+  @apply mr-3 text-zinc-400;
+}
+.ch-byline__author {
+  @apply font-medium text-zinc-800;
+}
+.ch-cover {
+  @apply my-6;
+}
+.ch-cover img {
+  @apply w-full rounded-lg;
+}
+.ch-cover figcaption {
+  @apply mt-2 text-sm text-zinc-500;
+}
+.ch-toc {
+  @apply my-6 rounded-lg border border-zinc-200 px-4 py-3 text-sm;
+}
+.ch-toc summary {
+  @apply cursor-pointer font-medium;
+}
+.ch-toc ol {
+  @apply mt-2 space-y-1;
+}
+.ch-toc li[data-depth="3"] {
+  @apply pl-4;
+}
+.ch-toc a {
+  @apply text-zinc-600 underline-offset-4 hover:text-zinc-900 hover:underline;
+}
+.ch-richtext :is(h2, h3)[id] {
+  scroll-margin-top: 1.5rem;
+}
+.ch-byline__author a {
+  @apply underline-offset-4 hover:underline;
+}
+.ch-byline a[href="#ch-corrections"] {
+  @apply font-medium text-amber-800 underline underline-offset-4;
+}
+/* Corrections (RFC-0019 §2): newest first, the kind as a label. */
+.ch-corrections {
+  @apply mt-10 rounded-lg border border-amber-200 bg-amber-50 px-5 py-4;
+  scroll-margin-top: 1.5rem;
+}
+.ch-corrections h2 {
+  @apply text-lg font-semibold;
+}
+.ch-corrections ol {
+  @apply mt-3 space-y-3;
+}
+.ch-correction__meta {
+  @apply flex flex-wrap gap-x-2 text-sm text-zinc-600;
+}
+.ch-correction__meta strong {
+  @apply font-semibold text-amber-900;
+}
+.ch-correction__note {
+  @apply mt-1 text-zinc-800;
+}
+.ch-correction__note a {
+  @apply underline underline-offset-4;
+}
+/* Article lists as cards: cover thumbnail, title, summary, date and reading time. */
+.ch-card-entry {
+  @apply flex gap-4;
+}
+.ch-card-entry__cover {
+  @apply h-24 w-36 shrink-0 rounded-md object-cover sm:h-28 sm:w-44;
+}
+.ch-card-entry__body {
+  @apply min-w-0 space-y-1;
+}
+.ch-card-entry__body a {
+  @apply text-lg font-semibold leading-snug underline-offset-4 hover:underline;
+}
+.ch-card-entry__body p {
+  @apply text-sm text-zinc-600;
+}
+.ch-card-entry__meta {
+  @apply flex flex-wrap gap-x-3 text-xs text-zinc-500;
+}
+.ch-card-entry__meta > * + *::before {
+  content: "·";
+  @apply mr-3;
+}
+
+/* Breadcrumbs, term chips, archives, pagination, related posts (RFC-0002). */
+.ch-breadcrumbs ol {
+  @apply flex flex-wrap gap-1 pt-6 text-sm text-zinc-500;
+}
+.ch-breadcrumbs li + li::before {
+  content: "›";
+  @apply mr-1 text-zinc-400;
+}
+.ch-breadcrumbs a {
+  @apply hover:text-zinc-900;
+}
+.ch-terms {
+  @apply flex flex-wrap gap-2 border-t border-zinc-200 py-4;
+}
+.ch-terms__group {
+  @apply flex flex-wrap gap-2;
+}
+.ch-chip {
+  @apply inline-block rounded-full border border-zinc-300 px-3 py-1 text-sm text-zinc-700;
+}
+a.ch-chip {
+  @apply hover:border-zinc-900 hover:text-zinc-900;
+}
+.ch-terms__group[data-taxonomy="category"] .ch-chip {
+  @apply border-(--ch-color-surface-inverse) bg-(--ch-color-surface-inverse) text-(--ch-color-text-inverse) hover:text-(--ch-color-text-inverse);
+}
+.ch-archive-header {
+  @apply space-y-2 border-b border-zinc-200 pt-4 pb-6;
+}
+.ch-archive-header h1 {
+  @apply text-4xl font-bold tracking-tight;
+}
+.ch-archive-kind {
+  @apply text-sm font-medium tracking-wide text-zinc-500 uppercase;
+}
+.ch-archive-meta {
+  @apply flex gap-4 text-sm text-zinc-500;
+}
+.ch-archive-meta a {
+  @apply underline-offset-4 hover:underline;
+}
+.ch-archive-image {
+  @apply mt-4 w-full rounded;
+}
+/* Author pages (RFC-0019 §1): round portrait, role and profile links. */
+.ch-archive[data-taxonomy="author"] .ch-archive-image {
+  @apply h-24 w-24 rounded-full object-cover;
+}
+.ch-archive-role {
+  @apply text-lg text-zinc-600;
+}
+.ch-archive-links {
+  @apply flex flex-wrap gap-3 text-sm;
+}
+.ch-archive-links a {
+  @apply font-medium underline underline-offset-4;
+}
+.ch-entrylist {
+  @apply space-y-6 py-6;
+}
+.ch-entrylist a {
+  @apply text-lg font-medium underline-offset-4 hover:underline;
+}
+.ch-entrylist p {
+  @apply text-sm text-zinc-600;
+}
+.ch-entrylist time {
+  @apply text-xs text-zinc-500;
+}
+.ch-pagination {
+  @apply flex items-center justify-between border-t border-zinc-200 py-6 text-sm text-zinc-600;
+}
+.ch-pagination a {
+  @apply font-medium text-zinc-900 underline-offset-4 hover:underline;
+}
+.ch-related {
+  @apply border-t border-zinc-200 pt-6;
+}
+.ch-related h2 {
+  @apply text-xl font-semibold;
+}
+
+/* Navigation menus (RFC-0003): dropdowns and nested items as disclosures, no JavaScript. */
+.ch-nav-menu {
+  @apply relative;
+}
+.ch-nav-menu summary {
+  @apply cursor-pointer list-none;
+}
+.ch-nav-menu summary::-webkit-details-marker {
+  display: none;
+}
+.ch-nav-menu__caret {
+  @apply ml-1 text-xs;
+}
+.ch-nav-menu[open] > summary .ch-nav-menu__caret {
+  rotate: 180deg;
+}
+.ch-nav-menu > ul {
+  @apply absolute z-10 mt-2 min-w-40 space-y-1 rounded border border-zinc-200 bg-white p-2 shadow-sm;
+}
+footer .ch-nav-menu > ul {
+  @apply bottom-full mb-2;
+}
+.ch-nav-menu .ch-nav-menu > ul {
+  @apply static mt-1 border-0 p-0 pl-3 shadow-none;
+}

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

@@ -0,0 +1,93 @@
+/* Shown in previews only, where an invalid ```surface would draw nothing. */
+.ch-surface-problem {
+  @apply rounded-lg px-4 py-3 text-sm;
+  border: 1px solid var(--ch-color-accent);
+}
+.ch-surface-problem ul {
+  @apply mt-2 list-disc ps-5;
+}
+.ch-richtext table:not([class]) tbody tr:hover {
+  background: var(--ch-color-surface-muted);
+}
+.ch-image {
+  @apply py-6;
+}
+/* Block types (RFC-0015): callout, button, video link and questions. */
+.ch-block {
+  @apply py-4;
+}
+.ch-callout {
+  @apply space-y-2 rounded border-l-4 border-sky-500 bg-sky-50 px-4 py-3;
+}
+.ch-callout--success {
+  @apply border-emerald-500 bg-emerald-50;
+}
+.ch-callout--warning {
+  @apply border-amber-500 bg-amber-50;
+}
+.ch-callout--danger {
+  @apply border-red-500 bg-red-50;
+}
+.ch-button {
+  /* w-fit: a button in a Stack (a flex column) keeps its own width (RFC-0022 22e). */
+  @apply inline-block w-fit rounded px-4 py-2 font-medium;
+}
+.ch-button--primary {
+  @apply text-(--ch-color-on-brand);
+  background: var(--ch-color-brand);
+}
+.ch-button--secondary {
+  @apply border border-zinc-300 text-zinc-900;
+}
+.ch-embed__link {
+  @apply flex items-center gap-3 rounded border border-zinc-200 px-4 py-3 no-underline;
+}
+.ch-embed__play {
+  @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-(--ch-color-surface-inverse) text-(--ch-color-text-inverse);
+}
+.ch-embed__title {
+  @apply font-medium text-zinc-900;
+}
+.ch-embed__host {
+  @apply ml-auto text-sm text-zinc-500;
+}
+.ch-embed__frame {
+  @apply aspect-video w-full rounded border-0;
+}
+.ch-faq__item {
+  @apply border-b border-zinc-200 py-3;
+}
+.ch-faq__item summary {
+  @apply cursor-pointer font-medium;
+}
+.ch-faq__answer {
+  @apply mt-2 space-y-2 text-zinc-700;
+}
+/* This theme's own block type (src/blocks.ts). */
+.testimonial blockquote {
+  @apply border-l-4 border-zinc-300 pl-4 text-lg italic text-zinc-800;
+}
+.testimonial figcaption {
+  @apply mt-2 flex gap-2 text-sm;
+}
+.testimonial__author {
+  @apply font-medium text-zinc-900;
+}
+.testimonial__role {
+  @apply text-zinc-500;
+}
+.ch-image figcaption {
+  @apply mt-2 text-sm text-zinc-500;
+}
+.ch-contentlist {
+  @apply py-6;
+}
+.ch-contentlist ul {
+  @apply space-y-4;
+}
+.ch-contentlist a {
+  @apply text-lg font-medium underline-offset-4 hover:underline;
+}
+.ch-contentlist p {
+  @apply text-sm text-zinc-600;
+}