@misoto22/folio 0.0.0 → 0.17.0

package/dist/website-recovery.css

@@ -0,0 +1,28 @@
+.folio-recovery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
+.folio-recovery-links { margin-block: clamp(3.5rem, 7vw, 6rem) 3rem; }
+.folio-recovery-links ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 4rem; margin: .25rem 0 0; padding: 0; list-style: none; }
+.folio-recovery-links li { border-block-end: 1px solid var(--rule); padding-block: .25rem; }
+.folio-loading-container { inline-size: 100%; max-inline-size: var(--w-page); margin-inline: auto; padding-inline: var(--page-pad); }
+.folio-loading-intro { display: grid; align-items: end; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.75rem, 5vw, 4.5rem); }
+.folio-loading-records, .folio-loading-gallery, .folio-loading-metrics { padding-block-end: clamp(4rem, 9vw, 8rem); }
+.folio-loading-records__row { display: grid; gap: 1rem 2.25rem; border-block-end: 1px solid var(--rule); padding-block: 2rem; }
+.folio-loading-records__row:first-child { border-block-start: 1px solid var(--rule-hard); }
+.folio-loading-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
+.folio-loading-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .75rem; }
+.folio-loading-media { border-block: 1px solid var(--rule); background: var(--paper-2); }
+.folio-loading-metrics__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--rule); }
+.folio-loading-metrics__figures > div { padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 3vw, 1.625rem); }
+.folio-loading-identity { display: grid; align-items: center; gap: 3.5rem; padding-block: clamp(7rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem); }
+@media (min-width: 640px) {
+  .folio-recovery-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .folio-loading-records__row { grid-template-columns: 11rem minmax(0, 1fr); }
+  .folio-loading-records__row[data-media] { grid-template-columns: 2rem 15.375rem minmax(0, 1fr); }
+}
+@media (min-width: 768px) {
+  .folio-loading-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
+  .folio-loading-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
+}
+@media (min-width: 1024px) {
+  .folio-loading-metrics__figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .folio-loading-identity { grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem); gap: clamp(3rem, 6vw, 6rem); }
+}

package/dist/website-search.css

@@ -0,0 +1,26 @@
+  .folio-search-palette__search { position: relative; }
+  .folio-search-palette__search:focus-within { background: var(--paper-2); }
+  .folio-search-palette__search input { padding-inline-end: 3rem; font-size: .875rem; }
+  .folio-search-palette__search input:focus, .folio-search-palette__search input:focus-visible,
+  .folio-search-palette__input input:focus, .folio-search-palette__input input:focus-visible { outline: none; box-shadow: none; }
+  .folio-search-palette__close { position: absolute; inset-block-start: 50%; inset-inline-end: .5rem; translate: 0 -50%; }
+  .folio-search-palette__input { display: flex; align-items: center; gap: .5rem; padding: .75rem; border-block-end: 1px solid var(--rule); }
+  .folio-search-palette__input input { min-inline-size: 0; }
+  .folio-search-palette__detail { max-block-size: calc(80svh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; }
+  .folio-search-palette__result { flex: 1; min-inline-size: 0; display: grid; gap: .125rem; }
+  .folio-search-palette__result > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .folio-search-palette__description { color: var(--ink-3-aa); font-size: .75rem; }
+  .folio-search-palette__heading { font-family: var(--sans); font-size: .75rem; letter-spacing: normal; text-transform: none; }
+  .folio-search-palette__item { margin: .125rem 0; border-radius: var(--radius-sm); font-size: .875rem; }
+  .folio-search-palette__item::before { display: none; }
+  .folio-search-palette__item[data-selected=true] { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
+  .folio-search-palette__meta { font-family: var(--sans); font-size: .6875rem; opacity: 0; }
+  .folio-search-palette__item[data-selected=true] .folio-search-palette__meta { opacity: 1; }
+  .folio-search-palette__highlight { color: var(--ink); background: var(--stone); border-radius: var(--radius-sm); }
+  .folio-search-palette__footer { flex-wrap: wrap; }
+  @media (max-width: 40rem) {
+    .folio-search-palette__search input { font-size: 1rem; }
+    .folio-search-palette__detail { max-block-size: calc(84svh - 4.5rem); }
+    .folio-search-palette__meta { display: none; }
+    .folio-search-palette__footer { display: none; }
+  }

package/dist/website-shell.css

@@ -0,0 +1,89 @@
+@layer base {
+  .folio-site-shell { min-block-size: 100svh; background: var(--background); color: var(--foreground); }
+  .folio-site-shell main { min-block-size: 60svh; }
+}
+  .folio-site-container { max-inline-size: var(--w-page); margin-inline: auto; padding-inline: var(--page-pad); }
+  .folio-site-skip { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: var(--z-toast); padding: .75rem 1rem; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); transform: translateY(-200%); }
+  .folio-site-skip:focus { transform: none; }
+  .folio-site-navigation { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); background: var(--paper); color: var(--ink); border-block-end: 1px solid var(--rule); transition: background-color var(--duration-fast), color var(--duration-fast); }
+  .folio-site-navigation[data-overlay] { background: transparent; color: var(--on-dark); border-color: transparent; }
+  .folio-site-navigation { inset-inline-end:auto; inline-size:100%; }
+  .folio-navigation-search { inline-size: clamp(10rem, 16vw, 14rem); justify-content: flex-start; gap: .65rem; border: 1px solid var(--rule); border-radius: .625rem; background: var(--paper-2); color: var(--ink-2); padding-inline: .875rem; }
+  .folio-navigation-search-label { font-size: .8rem; }
+  .folio-navigation-search { block-size:44px; padding-block:0; flex-shrink:0; }
+  .folio-navigation-search kbd { margin-inline-start: auto; font-size: .7rem; border: 1px solid var(--rule); padding: .15rem .35rem; background: var(--paper); color: var(--ink-3-aa); }
+  @media (max-width: 599px) {
+    .folio-navigation-search-label { display: none; }
+    .folio-navigation-search kbd { margin-inline-start: 0; }
+    .folio-navigation-search { inline-size: auto; gap: .4rem; padding-inline: .5rem; }
+  }
+  .folio-site-navigation[data-overlay]::before { content: ''; position: absolute; inset: 0 0 -3rem; z-index: -1; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--photo-scrim) 45%, transparent), transparent); }
+  .folio-site-navigation-inner { max-inline-size: var(--w-page); padding-inline: var(--page-pad); margin-inline: auto; min-block-size: 4.25rem; display: flex; align-items: center; gap: 2rem; }
+  .folio-site-wordmark { font-family: var(--font-heading); font-size: 1.4rem; letter-spacing: -.025em; white-space: nowrap; }
+  .folio-site-wordmark a { display: inline-flex; align-items: center; min-block-size: 44px; }
+  .folio-site-navigation-desktop { margin-inline-start: auto; }
+  .folio-site-navigation-desktop ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.6rem; }
+  .folio-site-navigation-link { display: inline-flex; align-items: center; min-block-size: 44px; font-family: var(--sans); font-size: .875rem; color: inherit; opacity: .7; text-decoration: none; }
+  .folio-site-navigation-link[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
+  .folio-site-navigation-link:hover { opacity: 1; }
+  .folio-site-navigation-actions { display: flex; align-items: center; gap: .4rem; }
+  .folio-site-navigation-actions>button { flex-shrink:0; }
+  @media(max-width:359px) {
+    .folio-site-navigation .folio-site-navigation-inner { padding-inline:12px; gap:4px; }
+    .folio-site-navigation .folio-site-wordmark { font-size:1.05rem; }
+    .folio-site-navigation .folio-site-navigation-actions { gap:0; }
+    .folio-navigation-search kbd { display:none; }
+    .folio-navigation-search { inline-size:44px; justify-content:center; }
+  }
+  .folio-site-navigation-toggle { display: none; }
+  .folio-site-navigation-sheet { padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem; max-block-size: 85svh; border-radius: 0 0 1rem 1rem; background: var(--paper); backdrop-filter: none; transition: none; translate: none; }
+  .folio-site-navigation-sheet[data-state=open] { animation: folio-navigation-down 260ms var(--ease-out-expo) both; }
+  .folio-site-navigation-sheet[data-state=closed] { animation: folio-navigation-up 180ms var(--ease) both; }
+  .folio-site-navigation-sheet>div:first-child { margin: 0; min-block-size: 3rem; padding-inline: .75rem 3rem; justify-content: center; border-block-end: 1px solid var(--rule); }
+  .folio-site-navigation-sheet h2 { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--ink-3-aa); }
+  .folio-site-navigation-sheet>button { inset-block-start: max(1rem, env(safe-area-inset-top)); inset-inline-end: 1rem; inline-size: 44px; block-size: 44px; }
+  .folio-site-navigation-mobile { display: flex; flex-direction: column; gap: .25rem; padding-block-start: .75rem; }
+  .folio-site-navigation-mobile .folio-site-navigation-link { justify-content: space-between; min-block-size: 48px; padding-inline: .75rem; font-size: 1rem; border-radius: var(--radius-md); color: var(--ink-2); opacity: 1; text-decoration: none; }
+  .folio-site-navigation-mobile .folio-site-navigation-link[aria-current] { background: var(--paper-2); color: var(--ink); }
+  .folio-site-navigation-mobile .folio-site-navigation-link[aria-current]::after { content: ''; inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; }
+  .folio-site-navigation-mobile .folio-site-navigation-link:hover { background: var(--paper-2); }
+  @keyframes folio-navigation-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+  @keyframes folio-navigation-up { from { transform: translateY(0); } to { transform: translateY(-100%); } }
+  .folio-site-navigation-footer { margin-block-start: auto; padding-block-start: 2rem; color: var(--ink-2); }
+  .folio-site-footer { border-block-start: 1px solid var(--rule); padding-block: 3rem 6rem; background: var(--paper); }
+  .folio-site-footer-masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
+  .folio-site-footer-masthead > a { font-size: .9rem; color: var(--ink-2); min-block-size: 44px; display: inline-flex; align-items: center; }
+  .folio-site-footer-description { margin-block: .75rem 0; color: var(--ink-3-aa); font-size: .85rem; }
+  .folio-site-footer-groups { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 3rem; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); }
+  .folio-site-footer h2 { font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--ink-3-aa); margin-block-end: .75rem; }
+  .folio-site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
+  .folio-site-footer li a { min-block-size: 44px; display: inline-flex; align-items: center; font-size: .85rem; color: var(--ink-2); overflow-wrap: anywhere; }
+  .folio-site-footer li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
+  .folio-site-footer [data-kind='files'] a { font-family: var(--mono); font-size: .75rem; }
+  .folio-site-footer [data-kind='social'] ul { display: flex; flex-wrap: wrap; gap: .25rem; }
+  .folio-site-footer [data-kind='social'] a { min-inline-size: 44px; justify-content: center; }
+  .folio-site-colophon { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-family: var(--sans); font-size: .75rem; color: var(--ink-3-aa); }
+  .folio-site-section-heading { margin-block-end: clamp(2rem, 4vw, 3.5rem); }
+  .folio-site-section-heading p { max-inline-size: 42rem; margin-block-start: .8rem; }
+  .folio-site-link { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; font-family: var(--sans); font-size: .875rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 5px; transition: color var(--duration-fast); }
+  .folio-site-link:hover { color: var(--ink); text-decoration-color: currentColor; }
+  .folio-site-link-back { text-decoration: none; }
+  .folio-site-link-back::before { content: '↳'; }
+  .folio-site-link-meta { font-size: .85rem; }
+  .folio-site-preference-item { position: relative; display: flex; align-items: center; gap: .75rem; min-block-size: 44px; padding: .5rem 1.75rem .5rem .75rem; color: var(--ink-2); font-family: var(--sans); font-size: .875rem; outline: none; border-radius: var(--radius-sm); cursor: default; }
+  .folio-site-preference-item[data-highlighted] { background: var(--paper-2); color: var(--ink); }
+  .folio-site-preference-item > span:first-child { flex: 1; }
+  .folio-site-preference-indicator { position: absolute; inset-inline-end: .5rem; }
+  .folio-locale-mark{display:inline-flex;align-items:baseline;gap:.15rem;font-family:var(--mono-i18n,var(--font-mono));font-size:.7rem;font-weight:600;letter-spacing:-.08em;line-height:1}.folio-locale-mark>span{color:var(--ink-3-aa);font-weight:400}
+  @media (max-width: 899px) {
+    .folio-site-navigation-desktop { display: none; }
+    .folio-site-navigation-actions { margin-inline-start: auto; gap: .1rem; }
+    .folio-site-navigation-inner { gap: .5rem; }
+    .folio-site-navigation-toggle { display: inline-flex; }
+    .folio-site-wordmark { font-size: 1.2rem; }
+  }
+  @media (max-width: 767px) {
+    .folio-site-footer-groups { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
+    .folio-site-footer-groups [data-kind='social'] { grid-column: 1 / -1; }
+    .folio-site-footer ul { grid-template-columns: 1fr; }
+  }

package/dist/website-timeline.css

@@ -0,0 +1,43 @@
+.folio-record-section { scroll-margin-block-start: var(--scroll-offset); }
+.folio-record-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--rule-hard); }
+.folio-career-record { display: grid; gap: 1rem; border-block-end: 1px solid var(--rule); padding-block: clamp(2rem, 3.5vw, 3rem); }
+.folio-career-record__dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; }
+.folio-career-record__dates dl, .folio-career-record__dates dd { margin: 0; }
+.folio-career-record__dates dl { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
+.folio-career-record__dates dd { font-variant-numeric: tabular-nums; }
+.folio-career-record__body { min-inline-size: 0; }
+.folio-career-record__description { margin-block: 1.25rem 0; max-inline-size: var(--measure-record); padding-inline-start: 1.25rem; list-style: disc; }
+.folio-career-record__description > li + li { margin-block-start: .5rem; }
+.folio-career-record__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.25rem 0; list-style: none; padding: 0; }
+.folio-career-record__mark { display: none; }
+.folio-career-record__mark img { inline-size: 4rem; block-size: 4rem; object-fit: contain; }
+.folio-profile-section, .folio-profile-narrative { padding-block: clamp(3rem, 6vw, 5rem); }
+.folio-profile-section__header { display: flex; flex-direction: column; gap: 1rem; margin-block-end: clamp(2rem, 4vw, 3rem); }
+.folio-profile-narrative { display: grid; gap: 2rem; }
+.folio-profile-figure { margin: 0; padding-block: clamp(2rem, 5vw, 4rem); }
+.folio-profile-figure__image { overflow: hidden; border-radius: var(--radius); }
+.folio-profile-figure__image img { display: block; inline-size: 100%; block-size: auto; }
+.folio-profile-skills__group { display: grid; gap: 1rem; border-block-end: 1px solid var(--rule); padding-block: 1.5rem; }
+.folio-profile-skills__group:first-child { border-block-start: 1px solid var(--rule-hard); }
+.folio-profile-skills__items { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; margin: 0; padding: 0; }
+.folio-profile-skills__items > li { display: inline-flex; align-items: center; gap: .5rem; }
+.folio-profile-skill__icon { display: inline-flex; }
+.folio-profile-skill__icon:empty { display: none; }
+.folio-profile-skill__icon [data-artwork='dark'] { display: none; }
+[data-mode='dark'] .folio-profile-skill__icon[data-has-dark] [data-artwork='light'] { display: none; }
+[data-mode='dark'] .folio-profile-skill__icon[data-has-dark] [data-artwork='dark'] { display: inline-flex; }
+[data-mode='dark'] .folio-profile-skill__icon[data-invert]:not([data-has-dark]) img { filter: invert(1); }
+.folio-profile-interests { display: grid; gap: 2rem; }
+.folio-profile-interests article { border-block-start: 1px solid var(--rule); padding-block-start: 1.5rem; }
+.folio-timeline { border-block-start: 1px solid var(--rule-hard); }
+.folio-timeline__item { min-inline-size: 0; }
+@media (min-width: 768px) {
+  .folio-career-record { grid-template-columns: 11rem minmax(0, 1fr) 4rem; column-gap: clamp(2rem, 4vw, 3.5rem); }
+  .folio-career-record__dates, .folio-career-record__dates dl { display: block; }
+  .folio-career-record__dates dd + dt + dd { margin-block-start: .5rem; }
+  .folio-career-record__dates > dl + * { margin-block-start: 1rem; }
+  .folio-career-record__mark { display: block; justify-self: end; }
+  .folio-profile-narrative { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 7vw, 6rem); }
+  .folio-profile-skills__group { grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr); gap: 2rem; }
+  .folio-profile-interests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}

package/dist/website-workbench.css

@@ -0,0 +1,162 @@
+/*
+ * Workbench compositions.
+ *
+ * One grid for the whole page: 12 columns with a 24px gutter inside the page
+ * width. A section's heading takes columns 1–4 and its content an 8-column
+ * subgrid on columns 5–12, so every list, card and caption on the page shares
+ * the same vertical lines. Colour, rules and type come from the theme axes;
+ * the Workbench preset is `linen` + `ember` + `grotesk` + `quiet`, but these
+ * compositions read only roles and work under any preset.
+ */
+@layer components {
+  .folio-wb-section,
+  .folio-wb-hero {
+    --wb-gap: 24px;
+    max-inline-size: var(--w-page);
+    margin-inline: auto;
+    padding-inline: var(--page-pad);
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--wb-gap);
+  }
+
+  /* ─── Section ─────────────────────────────────────────────────────────── */
+  .folio-wb-section { margin-block-start: 7.5rem; }
+  .folio-wb-section:last-child { margin-block-end: 7.5rem; }
+  .folio-wb-section::before { content: ''; grid-column: 1 / -1; border-block-start: 1px solid var(--rule); margin-block-end: 2rem; }
+  .folio-wb-section-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 1rem; padding-inline-end: 1.5rem; }
+  .folio-wb-section-body { grid-column: 5 / -1; min-inline-size: 0; }
+  .folio-wb-heading { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
+  .folio-wb-heading-lead { color: var(--ink-3-aa); }
+  .folio-wb-section-action a,
+  .folio-wb-link { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--accent-on-muted); text-decoration: none; font-size: .9375rem; }
+  .folio-wb-section-action a:hover,
+  .folio-wb-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
+
+  /* ─── Hero ────────────────────────────────────────────────────────────── */
+  .folio-wb-hero { padding-block-start: clamp(4rem, 8vw, 6rem); row-gap: 3rem; align-items: end; }
+  .folio-wb-hero-copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 1.75rem; }
+  .folio-wb-hero-statement { font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.3; }
+  .folio-wb-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
+  .folio-wb-hero-stats { grid-column: 10 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wb-gap); margin: 0; align-self: end; }
+  .folio-wb-hero-stats > div { display: flex; flex-direction: column-reverse; gap: .125rem; }
+  .folio-wb-hero-stats dd { margin: 0; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
+  .folio-wb-hero-stats dt { font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-hero-figure { grid-column: 1 / -1; }
+
+  /* ─── Figure ──────────────────────────────────────────────────────────── */
+  .folio-wb-figure { margin: 0; }
+  .folio-wb-figure-frame { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 3 / 2; }
+  .folio-wb-figure[data-ratio='wide'] .folio-wb-figure-frame { aspect-ratio: 16 / 9; }
+  .folio-wb-figure[data-ratio='portrait'] .folio-wb-figure-frame { aspect-ratio: 4 / 5; }
+  .folio-wb-figure[data-ratio='panorama'] .folio-wb-figure-frame { aspect-ratio: 3 / 1; }
+  .folio-wb-figure-frame img,
+  .folio-wb-mosaic-frame img,
+  .folio-wb-card-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--slow) var(--ease); }
+  .folio-wb-figure figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: .75rem; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Tools ───────────────────────────────────────────────────────────── */
+  .folio-wb-tools { max-inline-size: var(--w-page); margin: 4.5rem auto 0; padding-inline: var(--page-pad); }
+  .folio-wb-tools-label { margin: 0 0 1.25rem; text-align: center; font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-tools ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
+  .folio-wb-tools li { display: grid; place-items: center; block-size: 4rem; border-radius: var(--radius); background: var(--paper-2); color: var(--ink-3-aa); transition: color var(--mid) var(--ease), background-color var(--mid) var(--ease); }
+  .folio-wb-tools li:hover { color: var(--ink); background: var(--stone); }
+  .folio-wb-tools li svg { inline-size: 1.375rem; block-size: 1.375rem; }
+
+  /* ─── Cards ───────────────────────────────────────────────────────────── */
+  .folio-wb-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 24px; }
+  .folio-wb-card { position: relative; display: flex; flex-direction: column; gap: .375rem; }
+  .folio-wb-card-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-block-end: .625rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); transition: border-color var(--mid) var(--ease), translate var(--mid) var(--ease); }
+  .folio-wb-card-title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1rem; line-height: 1.4; color: var(--ink); }
+  .folio-wb-card-title a { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; text-decoration: none; }
+  .folio-wb-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
+  .folio-wb-card:has(a:focus-visible) .folio-wb-card-cover { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
+  .folio-wb-card-description,
+  .folio-wb-card-meta { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3-aa); }
+  .folio-wb-card-meta { font-size: .8125rem; }
+  .folio-wb-card:hover .folio-wb-card-cover { translate: 0 -2px; border-color: var(--rule-2); }
+  .folio-wb-card:hover .folio-wb-card-cover img,
+  .folio-wb-figure:hover .folio-wb-figure-frame img,
+  .folio-wb-mosaic-frame:hover img { scale: 1.02; }
+  .folio-wb-tile { display: grid; align-items: end; block-size: 100%; padding: 1.25rem; color: var(--paper); background-color: var(--ink); background-image: linear-gradient(color-mix(in srgb, var(--paper) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--paper) 10%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
+  .folio-wb-tile span { font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; }
+
+  /* ─── Entries ─────────────────────────────────────────────────────────── */
+  .folio-wb-entries { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; row-gap: 2rem; }
+  .folio-wb-entries > ul { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+  .folio-wb-entries[data-has-featured] > ul { grid-column: 5 / -1; }
+  .folio-wb-entries > ul > li + li { border-block-start: 1px solid var(--rule); }
+  .folio-wb-entries > ul > li { padding-block: 1.25rem; }
+  .folio-wb-entries > ul > li:first-child { padding-block-start: 0; }
+  .folio-wb-entry-featured { grid-column: 1 / span 4; position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background-color: var(--paper-2); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.625rem - 1px), var(--rule) calc(1.625rem - 1px) 1.625rem); transition: border-color var(--mid) var(--ease), translate var(--mid) var(--ease); }
+  .folio-wb-entry-featured:hover { translate: 0 -2px; border-color: var(--rule-2); }
+  .folio-wb-entry-featured h3 { margin: 0 0 auto; font-family: var(--font-heading); font-weight: 400; font-size: 1.375rem; line-height: 1.3; color: var(--ink); }
+  .folio-wb-entry-featured p { margin: 0; font-size: .9375rem; line-height: 1.625rem; color: var(--ink-2); }
+  .folio-wb-entry-featured h3 a::after { content: ''; position: absolute; inset: 0; }
+  .folio-wb-entry h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 1rem; line-height: 1.4; }
+  .folio-wb-entry h3 a,
+  .folio-wb-entry-featured h3 a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink); text-decoration: none; }
+  .folio-wb-entry h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
+  .folio-wb-entry-date { margin: 0 0 .25rem; font-size: .8125rem; color: var(--ink-3-aa); }
+  .folio-wb-entry-excerpt { margin: .375rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3-aa); }
+  .folio-wb-entry-meta { margin: .375rem 0 0; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Chronology ──────────────────────────────────────────────────────── */
+  .folio-wb-chronology { margin: 0; }
+  .folio-wb-chronology ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
+  .folio-wb-chronology li p { margin: 0 0 .375rem; font-size: .8125rem; line-height: 1.4; color: var(--ink); white-space: nowrap; }
+  .folio-wb-chronology li[data-align='start'] p { margin-inline-start: var(--start); }
+  .folio-wb-chronology li[data-align='end'] p { text-align: end; padding-inline-end: calc(100% - var(--end)); }
+  .folio-wb-chronology-org { color: var(--ink-3-aa); }
+  .folio-wb-chronology-now { color: var(--accent-on-muted); }
+  .folio-wb-chronology-bar { display: block; margin-inline-start: var(--start); block-size: .5rem; inline-size: calc(var(--end) - var(--start)); min-inline-size: .75rem; border-radius: var(--radius-pill); }
+  .folio-wb-chronology li[data-kind='role'] .folio-wb-chronology-bar { background: var(--stone); }
+  .folio-wb-chronology li[data-kind='study'] .folio-wb-chronology-bar { box-shadow: inset 0 0 0 1px var(--rule-2); }
+  .folio-wb-chronology li[data-current] .folio-wb-chronology-bar { background: linear-gradient(90deg, var(--ink) calc(100% - .5rem), var(--accent) 0); }
+  .folio-wb-chronology-axis { display: flex; overflow: hidden; margin-block-start: 1.5rem; border-block-start: 1px solid var(--rule-2); }
+  .folio-wb-chronology-axis span { flex: 1; min-inline-size: 0; white-space: nowrap; padding: .5rem 0 0 .375rem; border-inline-start: 1px solid var(--rule); font-size: .8125rem; color: var(--ink-3-aa); font-variant-numeric: tabular-nums; }
+
+  /* ─── Mosaic ──────────────────────────────────────────────────────────── */
+  .folio-wb-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 24px; }
+  .folio-wb-mosaic-lead { grid-row: span 2; margin: 0; display: flex; flex-direction: column; }
+  .folio-wb-mosaic-lead .folio-wb-mosaic-frame { flex: 1; }
+  .folio-wb-mosaic-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 4 / 5; }
+  .folio-wb-mosaic-lead .folio-wb-mosaic-frame { aspect-ratio: auto; min-block-size: 100%; }
+  .folio-wb-mosaic-frame > a { position: absolute; inset: 0; display: block; }
+  .folio-wb-mosaic-lead figcaption { margin-block-start: .75rem; font-size: .8125rem; color: var(--ink-3-aa); }
+
+  /* ─── Contact ─────────────────────────────────────────────────────────── */
+  .folio-wb-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
+  .folio-wb-contact-address a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: clamp(1.25rem, 2vw, 1.625rem); color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--rule-2); transition: text-decoration-color var(--mid) var(--ease); }
+  .folio-wb-contact-address a:hover { text-decoration-color: var(--ink); }
+
+
+  /* ─── Reveal ──────────────────────────────────────────────────────────── */
+  .folio-wb-reveal[data-reveal] { transition: opacity calc(var(--slow) * 1.2) var(--ease), translate calc(var(--slow) * 1.2) var(--ease); }
+  .folio-wb-reveal[data-reveal='hidden'] { opacity: 0; translate: 0 12px; }
+
+  .folio-wb-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+  /* ─── Narrow screens ──────────────────────────────────────────────────── */
+  @media (max-width: 47.5rem) {
+    .folio-wb-section { margin-block-start: 5rem; }
+    .folio-wb-section-head,
+    .folio-wb-section-body,
+    .folio-wb-hero-copy,
+    .folio-wb-hero-stats { grid-column: 1 / -1; }
+    .folio-wb-section-head { margin-block-end: 2rem; padding-inline-end: 0; }
+    .folio-wb-tools ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
+    .folio-wb-card-grid { grid-template-columns: minmax(0, 1fr); }
+    .folio-wb-entries > ul,
+    .folio-wb-entries[data-has-featured] > ul,
+    .folio-wb-entry-featured { grid-column: 1 / -1; }
+    .folio-wb-mosaic { grid-template-columns: 1fr 1fr; }
+    .folio-wb-mosaic-lead { grid-column: 1 / -1; grid-row: auto; }
+    .folio-wb-mosaic-lead .folio-wb-mosaic-frame { aspect-ratio: 4 / 5; }
+    .folio-wb-chronology li p { white-space: normal; }
+    /* A long career puts a dozen years on a phone-width axis; every other
+       label keeps them legible without pushing the page sideways. */
+    .folio-wb-chronology-axis span:nth-child(even) { color: transparent; }
+  }
+}
+

package/dist/website.css

@@ -0,0 +1,26 @@
+/*
+ * Styles for `@misoto22/folio/website`, published as `website.css`.
+ *
+ * Separate from `styles.css`, so an application that renders only the
+ * primitives ships none of it. Every rule here is scoped to a composition's own
+ * classes. The document defaults a whole website wants — body type, heading
+ * margins, the site-wide focus ring — are in `website-base.css`, a second
+ * opt-in entry, because they reach past the compositions to the page itself.
+ */
+@import './website-shell.css';
+@import './website-portfolio.css';
+@import './website-collection.css';
+@import './website-reading.css';
+@import './website-contact.css';
+@import './website-music.css';
+@import './website-timeline.css';
+@import './website-recovery.css';
+@import './website-media.css';
+@import './website-metrics.css';
+@import './website-search.css';
+@import './website-content.css';
+@import './website-actions.css';
+@import './website-conversation.css';
+@import './website-evidence.css';
+@import './website-controls.css';
+@import './website-workbench.css';

package/llms.txt

@@ -0,0 +1,35 @@
+# @misoto22/folio
+
+> A monochrome design system for software, writing and photography: portable CSS
+> tokens and accessible React 19 primitives, charts and diagrams. Components ship
+> compiled — import them, do not copy them.
+
+This file is a stub on purpose. It carries no prop tables and no version, so it
+cannot go stale between releases; everything it points at is generated from the
+source in this same tarball at build time.
+
+## In this package, offline
+
+- [dist/agent/index.md](./dist/agent/index.md): every component, one line each, plus the theme axes read out of the stylesheets.
+- [dist/agent/<Component>.md](./dist/agent/): one component in full — every prop with its type and default, the exported unions, the keyboard contract, the accessibility promises, the examples.
+- [skills/folio-design/SKILL.md](./skills/folio-design/SKILL.md): the conventions an agent gets wrong from habit — the names that diverge from shadcn/ui, and colour that is never a raw class.
+- [AGENTS.md](./AGENTS.md): the short version of this, plus what to know when working on the package itself.
+
+Prefer the CLI over reading these by path — it resolves parts and types, not
+just components:
+
+```bash
+npx @misoto22/folio docs Button
+npx @misoto22/folio docs --installed
+```
+
+## On the web
+
+- [https://ui.misoto22.com/llms.txt](https://ui.misoto22.com/llms.txt): the site's index.
+- [https://ui.misoto22.com/llms-full.txt](https://ui.misoto22.com/llms-full.txt): every component inline, in one file.
+- [https://ui.misoto22.com](https://ui.misoto22.com): the rendered documentation.
+
+## Optional
+
+- [README.md](./README.md): install, theming, and the same three commands for a human reader.
+- [CHANGELOG.md](./CHANGELOG.md)

package/package.json

@@ -1,14 +1,172 @@
 {
   "name": "@misoto22/folio",
-  "version": "0.0.0",
-  "description": "Placeholder for the Folio design system. Install @misoto22/folio@^0.16.0.",
+  "version": "0.17.0",
+  "private": false,
+  "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",
-  "type": "commonjs",
+  "author": "Henry Chen",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "skills",
+    "bin",
+    "AGENTS.md",
+    "CLAUDE.md",
+    "llms.txt",
+    "LICENSE",
+    "README.md"
+  ],
+  "bin": {
+    "folio-design": "./bin/folio-design.mjs"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.js"
+    },
+    "./diagrams": {
+      "types": "./dist/diagrams/index.d.ts",
+      "import": "./dist/diagrams/index.js"
+    },
+    "./website": {
+      "types": "./dist/website/index.d.ts",
+      "import": "./dist/website/index.js"
+    },
+    "./website.css": "./dist/website.css",
+    "./website-base.css": "./dist/website-base.css",
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./semantic.css": "./dist/semantic.css",
+    "./keyframes.css": "./dist/keyframes.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./themes.css": "./dist/themes.css",
+    "./article.css": "./dist/article.css",
+    "./brand": {
+      "types": "./dist/tokens/brand.d.ts",
+      "default": "./dist/tokens/brand.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "motion": "^12.23.26",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^3.8.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.14",
+    "@radix-ui/react-avatar": "^1.1.14",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-progress": "^1.1.10",
+    "@radix-ui/react-radio-group": "^1.3.11",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.2.8",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.12",
+    "@remixicon/react": "^4.9.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "react-day-picker": "^10.0.1",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@fontsource/hanken-grotesk": "^5.2.5",
+    "@fontsource/ibm-plex-mono": "^5.2.5",
+    "@fontsource/newsreader": "^5.2.5",
+    "@tailwindcss/cli": "4.3.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/culori": "^4.0.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "axe-core": "^4.13.0",
+    "culori": "^4.0.2",
+    "esbuild": "^0.28.2",
+    "esbuild-fix-imports-plugin": "^1.0.23",
+    "jsdom": "^29.1.1",
+    "motion": "^12.43.0",
+    "publint": "^0.3.24",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "recharts": "3.8.0",
+    "tailwindcss": "4.3.3",
+    "tsup": "^8.5.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.11"
+  },
+  "engines": {
+    "node": ">=24",
+    "pnpm": ">=11"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Misoto22/folio.git"
+    "url": "git+https://github.com/Misoto22/folio.git",
+    "directory": "packages/design"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "tailwind",
+    "radix",
+    "components",
+    "tokens",
+    "accessibility"
+  ],
+  "homepage": "https://ui.misoto22.com",
+  "bugs": {
+    "url": "https://github.com/Misoto22/folio/issues"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependenciesMeta": {
+    "motion": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build:fonts": "node scripts/vendor-fonts.mjs",
+    "build:js": "NODE_OPTIONS=--max-old-space-size=8192 tsup",
+    "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify && node scripts/copy-portable-css.mjs && node scripts/emit-tokens.mjs",
+    "build:agent": "node scripts/emit-agent.mjs",
+    "build": "pnpm run build:fonts && pnpm run build:js && pnpm run build:css && pnpm run build:agent",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src scripts agent bin",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "check:size": "node scripts/check-size.mjs",
+    "check:publish": "node scripts/check-publish.mjs"
   }
-}
+}