@lupinum/ginko-docs 0.4.0-rc.10 → 0.4.0-rc.11

package/README.md

@@ -24,12 +24,12 @@ Use this package when a Nuxt application needs documentation routes, navigation,
 - Node.js 22.18, 24.11, or 26 and later maintenance releases
 - Nuxt 4.5.1 or later in the Nuxt 4 line
 - Vue 3.5.40 or later
-- Ginko Content 0.4 prerelease or later in the 0.4 line
+- Ginko Content 1.0.0-beta.9 or later in the 1.x line
 
 ## Installation
 
 ```bash
-pnpm add -D @lupinum/ginko-docs@0.4.0-rc.10 @lupinum/ginko-content@1.0.0-beta.7
+pnpm add -D @lupinum/ginko-docs@0.4.0-rc.11 @lupinum/ginko-content@1.0.0-beta.9
 ```
 
 ```ts
@@ -40,6 +40,29 @@ export default defineNuxtConfig({
 });
 ```
 
+<!-- BEGIN:consumer-onboarding -->
+
+## Use a coding agent
+
+A coding agent is a development tool that can inspect and change your project.
+
+Copy this task prompt into your application agent:
+
+```text [Agent task]
+Use the installed @lupinum/ginko-docs package to implement my requested feature.
+Read the application's instructions first. Resolve @lupinum/ginko-docs/agent-docs
+from this application directory and read the relevant local pages.
+Preserve the existing AGENTS.md. If it has no equivalent guidance, append
+one short note to resolve installed package docs before integration work
+and after dependency changes. Do not install a consumer skill.
+Check the completed feature using this project's normal commands.
+```
+
+The installed documentation matches the package version. If an older version
+has no documentation export, use its README, types and matching release docs.
+
+<!-- END:consumer-onboarding -->
+
 ## Quick start
 
 ```ts

package/app/assets/css/component-kit.css

@@ -0,0 +1,669 @@
+/* Reading flow owns its measure; figures can use the available track without
+   escaping the page or a nested column. Floats never escape this body. */
+.content-flow {
+  min-width: 0;
+  margin-block: 2rem;
+}
+.content-flow[data-surface="muted"],
+.content-flow[data-surface="tint"] {
+  padding: clamp(1.25rem, 4%, 3rem);
+}
+.content-flow[data-surface="muted"] {
+  background: var(--muted);
+}
+.content-flow[data-surface="tint"] {
+  background: color-mix(in oklab, var(--primary) 10%, var(--background));
+}
+.content-flow-track {
+  container: content-flow / inline-size;
+  min-width: 0;
+}
+.content-flow-body {
+  display: flow-root;
+  max-width: 65ch;
+  margin-inline: auto;
+  overflow-wrap: anywhere;
+}
+.content-flow-body[data-width="wide"] {
+  max-width: none;
+}
+.content-flow-body > :first-child {
+  margin-block-start: 0;
+}
+.content-flow-body > :last-child {
+  margin-block-end: 0;
+}
+.content-flow-body > .content-media[data-bleed="true"] {
+  width: 100cqi;
+  max-width: none;
+  margin-inline: calc((100% - 100cqi) / 2);
+}
+/* A figure inside a column stays inside that column, even on a wide screen. */
+.content-layout-column-inner > .content-media[data-bleed="true"] {
+  margin-inline: 0;
+}
+.content-flow-body > :not(p):not(.content-media),
+.content-flow-body > .content-media[data-placement="inline"] {
+  clear: both;
+}
+@container content-flow (min-width: 40rem) {
+  .content-flow-body > .content-media:is([data-placement="start"], [data-placement="end"]) {
+    width: 38%;
+    max-width: 20rem;
+    margin-block: 0.35rem 1rem;
+  }
+  .content-flow-body > .content-media[data-placement="start"] {
+    float: inline-start;
+    margin-inline: 0 1.5rem;
+  }
+  .content-flow-body > .content-media[data-placement="end"] {
+    float: inline-end;
+    margin-inline: 1.5rem 0;
+  }
+}
+.content-media[data-frame="none"][data-appearance] {
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+.content-media[data-frame="none"][data-appearance] img {
+  border: 0;
+  border-radius: var(--radius);
+  box-shadow: none;
+}
+.content-media[data-frame="none"][data-appearance] figcaption {
+  border: 0;
+  background: transparent;
+  padding: 0.65rem 0 0;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+}
+.content-media[data-focus="top"] img {
+  object-position: top;
+}
+.content-media[data-focus="bottom"] img {
+  object-position: bottom;
+}
+.content-media[data-focus="left"] img {
+  object-position: left;
+}
+.content-media[data-focus="right"] img {
+  object-position: right;
+}
+.content-excerpt[data-size="display"][data-appearance] {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  padding: 1.5rem 0;
+  margin-block: 2rem;
+}
+.content-excerpt[data-size="display"][data-appearance]::before {
+  display: none;
+}
+.content-excerpt[data-size="display"][data-appearance] .content-excerpt-body,
+.content-excerpt[data-size="display"][data-appearance] .content-excerpt-body p {
+  color: var(--foreground);
+  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+  text-wrap: pretty;
+}
+
+.content-layout {
+  container: content-layout / inline-size;
+  min-width: 0;
+  margin-block: 1.5rem;
+}
+.content-layout-row {
+  --layout-align: start;
+  --layout-gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-gap);
+  width: 100%;
+}
+.content-layout-row[data-align="center"] {
+  --layout-align: center;
+}
+.content-layout-row[data-align="end"] {
+  --layout-align: end;
+}
+.content-layout-row[data-gap="none"] {
+  --layout-gap: 0rem;
+}
+.content-layout-row[data-gap="sm"] {
+  --layout-gap: 0.5rem;
+}
+.content-layout-row[data-gap="lg"] {
+  --layout-gap: clamp(1.5rem, 4cqi, 3rem);
+}
+.content-layout-row[data-surface="muted"],
+.content-layout-row[data-surface="tint"] {
+  padding: clamp(1rem, 3cqi, 2rem);
+  border-radius: var(--radius, 0.625rem);
+  color: var(--foreground, #171717);
+}
+.content-layout-row[data-surface="muted"] {
+  background: var(--muted, #f5f5f5);
+}
+.content-layout-row[data-surface="tint"] {
+  background: color-mix(in oklab, var(--primary, #555) 10%, var(--background, white));
+}
+.content-layout-row[data-type^="border"],
+.content-layout-row[data-type^="outline"] {
+  border-radius: var(--radius, 0.625rem);
+  padding: 0.5rem;
+}
+.content-layout-row[data-type^="border"] {
+  border: 1px solid var(--border, #d4d4d4);
+}
+.content-layout-row[data-type="border-dashed"] {
+  border-style: dashed;
+}
+.content-layout-row[data-type^="outline"] {
+  outline: 1px solid var(--border, #d4d4d4);
+  outline-offset: 2px;
+}
+.content-layout-row[data-type="outline-dashed"] {
+  outline-style: dashed;
+}
+.content-layout-column {
+  --column-weight: 3;
+  min-width: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: var(--layout-align);
+}
+.content-layout-column[data-size="xs"] {
+  --column-weight: 1.5;
+}
+.content-layout-column[data-size="sm"] {
+  --column-weight: 2;
+}
+.content-layout-column[data-size="lg"] {
+  --column-weight: 4;
+}
+.content-layout-column[data-size="xl"] {
+  --column-weight: 4.5;
+}
+.content-layout-column[data-align="start"] {
+  justify-content: start;
+}
+.content-layout-column[data-align="center"] {
+  justify-content: center;
+}
+.content-layout-column[data-align="end"] {
+  justify-content: end;
+}
+.content-layout-column-inner {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+/* Trim only the column edges. Interior prose keeps its own reading rhythm. */
+.content-layout-column-inner > :first-child {
+  margin-block-start: 0;
+}
+.content-layout-column-inner > :last-child {
+  margin-block-end: 0;
+}
+.content-layout-row[data-type^="border"] > .content-layout-column:not(:last-child) {
+  border-block-end: 1px solid var(--border, #d4d4d4);
+  padding-block-end: var(--layout-gap);
+}
+.content-layout-row[data-type="border-dashed"] > .content-layout-column:not(:last-child) {
+  border-style: dashed;
+}
+
+@container content-layout (min-width: 32rem) {
+  .content-layout-row[data-stack="sm"] {
+    flex-direction: row;
+  }
+  .content-layout-row[data-stack="sm"] > .content-layout-column {
+    flex: var(--column-weight) 1 0%;
+    width: 0;
+  }
+  .content-layout-row[data-stack="sm"][data-type^="border"]
+    > .content-layout-column:not(:last-child) {
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--border, #d4d4d4);
+    padding-block-end: 0;
+    padding-inline-end: var(--layout-gap);
+  }
+  .content-layout-row[data-stack="sm"][data-type="border-dashed"]
+    > .content-layout-column:not(:last-child) {
+    border-inline-end-style: dashed;
+  }
+  .content-layout-row[data-stack="sm"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner {
+    display: grid;
+    flex: 1;
+    min-height: 12rem;
+  }
+  .content-layout-row[data-stack="sm"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > :is(p, button):only-child {
+    display: grid;
+    position: relative;
+    margin: 0;
+  }
+  .content-layout-row[data-stack="sm"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > :is(p, button):only-child
+    img,
+  .content-layout-row[data-stack="sm"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > img:only-child {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--column-media-fit);
+  }
+  .content-layout-row[data-stack="sm"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner {
+    position: relative;
+  }
+}
+
+@container content-layout (min-width: 40rem) {
+  .content-layout-row[data-stack="md"] {
+    flex-direction: row;
+  }
+  .content-layout-row[data-stack="md"] > .content-layout-column {
+    flex: var(--column-weight) 1 0%;
+    width: 0;
+  }
+  .content-layout-row[data-stack="md"][data-type^="border"]
+    > .content-layout-column:not(:last-child) {
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--border, #d4d4d4);
+    padding-block-end: 0;
+    padding-inline-end: var(--layout-gap);
+  }
+  .content-layout-row[data-stack="md"][data-type="border-dashed"]
+    > .content-layout-column:not(:last-child) {
+    border-inline-end-style: dashed;
+  }
+  .content-layout-row[data-stack="md"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner {
+    display: grid;
+    flex: 1;
+    min-height: 12rem;
+  }
+  .content-layout-row[data-stack="md"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > :is(p, button):only-child {
+    display: grid;
+    position: relative;
+    margin: 0;
+  }
+  .content-layout-row[data-stack="md"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > :is(p, button):only-child
+    img,
+  .content-layout-row[data-stack="md"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > img:only-child {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--column-media-fit);
+  }
+  .content-layout-row[data-stack="md"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner {
+    position: relative;
+  }
+}
+
+@container content-layout (min-width: 48rem) {
+  .content-layout-row[data-stack="lg"] {
+    flex-direction: row;
+  }
+  .content-layout-row[data-stack="lg"] > .content-layout-column {
+    flex: var(--column-weight) 1 0%;
+    width: 0;
+  }
+  .content-layout-row[data-stack="lg"][data-type^="border"]
+    > .content-layout-column:not(:last-child) {
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--border, #d4d4d4);
+    padding-block-end: 0;
+    padding-inline-end: var(--layout-gap);
+  }
+  .content-layout-row[data-stack="lg"][data-type="border-dashed"]
+    > .content-layout-column:not(:last-child) {
+    border-inline-end-style: dashed;
+  }
+  .content-layout-row[data-stack="lg"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner {
+    display: grid;
+    flex: 1;
+    min-height: 12rem;
+  }
+  .content-layout-row[data-stack="lg"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > :is(p, button):only-child {
+    display: grid;
+    position: relative;
+    margin: 0;
+  }
+  .content-layout-row[data-stack="lg"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > :is(p, button):only-child
+    img,
+  .content-layout-row[data-stack="lg"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > img:only-child {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--column-media-fit);
+  }
+  .content-layout-row[data-stack="lg"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner {
+    position: relative;
+  }
+}
+.content-layout-column[data-media="cover"] {
+  --column-media-fit: cover;
+}
+.content-layout-column[data-media="contain"] {
+  --column-media-fit: contain;
+}
+
+.content-alert-title {
+  margin: 0;
+}
+.content-callout {
+  --content-callout-accent: var(--muted-foreground, #666);
+  --content-callout-surface: color-mix(in oklab, var(--secondary, #f5f5f5) 90%, transparent);
+  width: 100%;
+  display: flex;
+  gap: 0.5rem;
+  margin: 1.25rem 0;
+  border-radius: var(--radius, 0.625rem);
+  background-color: var(--secondary, #f5f5f5);
+  padding: 0.75rem 0.75rem 0.75rem 0.4rem;
+  color: var(--foreground, #171717);
+  font-size: 0.875rem;
+  line-height: 1.625;
+}
+.content-callout-info {
+  --content-callout-accent: var(--info, #2563eb);
+}
+.content-callout[data-appearance="quiet"] {
+  border: 1px solid var(--border, #d4d4d4);
+  background-color: var(--card, #fff);
+  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 5%));
+  padding: 0.75rem 0.9rem 0.75rem 0.4rem;
+}
+.content-callout-note {
+  --content-callout-accent: var(--muted-foreground, #666);
+}
+.content-callout-warning {
+  --content-callout-accent: var(--warning, #ca8a04);
+}
+.content-callout-error {
+  --content-callout-accent: var(--destructive, #dc2626);
+}
+.content-callout-success {
+  --content-callout-accent: var(--success, #16a34a);
+}
+.content-callout-idea {
+  --content-callout-accent: var(--primary, #2563eb);
+}
+.content-callout > .content-callout-bar {
+  width: 0.125rem;
+  flex-shrink: 0;
+  border-radius: var(--radius, 0.625rem);
+  background-color: color-mix(in oklab, var(--content-callout-accent) 70%, transparent);
+}
+.content-callout > .content-callout-icon {
+  display: inline-flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.25rem;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--content-callout-accent);
+}
+.content-callout > .content-callout-icon > :where(svg, span, .iconify) {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+.content-callout-body {
+  min-width: 0;
+  flex: 1;
+}
+.content-callout .content-prose {
+  font-size: 0.875rem;
+  line-height: inherit;
+}
+.content-callout .content-alert-title {
+  margin-bottom: 0.125rem;
+  color: var(--foreground, #171717);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: inherit;
+}
+
+.content-aside p.content-aside-label,
+.content-excerpt p.content-excerpt-label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0 0 0.35rem;
+  color: var(--muted-foreground, #666);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+.content-excerpt-source {
+  color: var(--muted-foreground, #666);
+  font-family: var(--font-mono, monospace);
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+/* --- Aside + excerpt (voice) --- */
+
+.content-aside,
+.content-excerpt {
+  position: relative;
+  margin-block: 1.25rem;
+  border-radius: var(--radius, 0.625rem);
+  font-size: 0.875rem;
+  line-height: 1.625;
+}
+
+.content-aside[data-appearance="quiet"],
+.content-excerpt[data-appearance="quiet"] {
+  border: 1px solid var(--border, #d4d4d4);
+  background-color: var(--card, #fff);
+  box-shadow: var(--shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+  padding: 0.75rem 1rem;
+}
+
+.content-aside[data-appearance="tint"],
+.content-excerpt[data-appearance="tint"] {
+  background-color: var(--secondary, #f5f5f5);
+  padding: 0.75rem 1rem 0.75rem 1.15rem;
+}
+
+/* The voice rail: an inset 2px bar, muted for asides, accent for excerpts. */
+.content-aside[data-appearance="tint"]::before,
+.content-excerpt[data-appearance="tint"]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0.75rem;
+  inset-inline-start: 0.45rem;
+  width: 2px;
+  border-radius: 999px;
+  background-color: color-mix(in oklab, var(--muted-foreground, #666) 45%, transparent);
+}
+
+.content-excerpt[data-appearance="tint"]::before {
+  background-color: color-mix(in oklab, var(--info, #0284c7) 70%, transparent);
+}
+
+.content-excerpt .content-excerpt-label {
+  color: var(--info, #0284c7);
+}
+
+.content-aside-body,
+.content-excerpt-body {
+  color: var(--muted-foreground, #666);
+}
+
+.content-excerpt-body {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  font-size: 0.875rem;
+  font-style: normal;
+  line-height: 1.625;
+}
+
+.content-excerpt-source {
+  display: block;
+  margin: 0.5rem 0 0;
+}
+
+.content-excerpt-source::before {
+  content: "— ";
+}
+
+@container content-layout (min-width: 32rem) {
+  .content-layout-row[data-stack="sm"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child {
+    display: grid;
+    grid-template-rows: minmax(12rem, 1fr) auto;
+    min-height: 0;
+  }
+  .content-layout-row[data-stack="sm"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child
+    > .content-media-visual {
+    position: relative;
+    min-height: 0;
+  }
+  .content-layout-row[data-stack="sm"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child
+    > .content-media-visual
+    img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--column-media-fit);
+  }
+}
+
+@container content-layout (min-width: 40rem) {
+  .content-layout-row[data-stack="md"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child {
+    display: grid;
+    grid-template-rows: minmax(12rem, 1fr) auto;
+    min-height: 0;
+  }
+  .content-layout-row[data-stack="md"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child
+    > .content-media-visual {
+    position: relative;
+    min-height: 0;
+  }
+  .content-layout-row[data-stack="md"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child
+    > .content-media-visual
+    img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--column-media-fit);
+  }
+}
+
+@container content-layout (min-width: 48rem) {
+  .content-layout-row[data-stack="lg"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child {
+    display: grid;
+    grid-template-rows: minmax(12rem, 1fr) auto;
+    min-height: 0;
+  }
+  .content-layout-row[data-stack="lg"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child
+    > .content-media-visual {
+    position: relative;
+    min-height: 0;
+  }
+  .content-layout-row[data-stack="lg"]
+    > .content-layout-column:not([data-media="natural"])
+    > .content-layout-column-inner
+    > .content-media:only-child
+    > .content-media-visual
+    img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: var(--column-media-fit);
+  }
+}
+
+.content-layout-row[data-type="card"] {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-xs);
+  padding: 1.5rem;
+}
+
+.content-media-visual > button {
+  height: 100%;
+}
+
+.content-layout-row[data-type="card"][data-surface="default"] {
+  background: var(--card);
+}