@treeseed/core 0.8.9 → 0.8.10

package/dist/styles/app-shell.css

@@ -41,6 +41,8 @@
 	color: var(--ts-color-text);
 	display: flex;
 	gap: var(--ts-space-2);
+	min-width: 0;
+	max-width: 100%;
 	text-decoration: none;
 }
 
@@ -53,14 +55,20 @@
 	display: inline-flex;
 	flex: 0 0 auto;
 	font-weight: 800;
-	height: 2rem;
+	height: 3rem;
 	justify-content: center;
-	width: 2rem;
+	max-height: 3rem;
+	max-width: 3rem;
+	overflow: hidden;
+	width: 3rem;
 }
 
 .ts-shell-brand__mark img {
 	display: block;
 	height: 100%;
+	max-height: 100%;
+	max-width: 100%;
+	object-fit: contain;
 	width: 100%;
 }
 
@@ -98,6 +106,7 @@
 	flex-wrap: wrap;
 	gap: var(--ts-space-1);
 	justify-content: flex-end;
+	min-width: 0;
 }
 
 .ts-app-shell__rail-context,
@@ -242,9 +251,9 @@
 	font-size: 0.875rem;
 	font-weight: 650;
 	justify-content: center;
-	line-height: 1.15;
-	min-height: 2.25rem;
-	padding: 0.45rem 0.65rem;
+	line-height: 1.2;
+	min-height: 2.5rem;
+	padding: 0.55rem 0.75rem;
 	text-align: center;
 	white-space: nowrap;
 }
@@ -298,6 +307,12 @@
 	padding: var(--ts-space-3);
 }
 
+.ts-public-shell--content .ts-public-shell__main {
+	margin-inline: auto;
+	max-width: var(--ts-content-width);
+	width: 100%;
+}
+
 .ts-public-shell__header {
 	display: grid;
 	gap: var(--ts-space-2);
@@ -305,9 +320,12 @@
 }
 
 .ts-public-shell__nav {
+	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--ts-space-2);
+	gap: var(--ts-space-1);
+	justify-content: flex-end;
+	min-width: 0;
 }
 
 .ts-public-shell__link {
@@ -319,6 +337,7 @@
 }
 
 .ts-public-shell__link[aria-current='page'],
+.ts-public-shell__summary--active,
 .ts-public-shell__link:hover {
 	background: var(--ts-color-surface-raised);
 	border-color: var(--ts-color-border);
@@ -326,9 +345,182 @@
 	text-decoration: none;
 }
 
+.ts-public-shell__nav-group {
+	position: relative;
+}
+
+.ts-public-shell__summary {
+	align-items: center;
+	cursor: pointer;
+	display: inline-flex;
+	gap: 0.35rem;
+	list-style: none;
+}
+
+.ts-public-shell__summary::-webkit-details-marker {
+	display: none;
+}
+
+.ts-public-shell__summary span {
+	color: var(--ts-color-text-subtle);
+	font-size: 0.75rem;
+	transition: transform 160ms ease;
+}
+
+.ts-public-shell__nav-group[open] .ts-public-shell__summary span {
+	transform: rotate(180deg);
+}
+
+.ts-public-shell__menu {
+	background: var(--ts-color-surface-overlay);
+	border: 1px solid var(--ts-color-border-strong);
+	border-radius: var(--ts-radius-md);
+	box-shadow: var(--ts-color-shadow);
+	display: grid;
+	gap: 0.15rem;
+	inset-block-start: calc(100% + 0.35rem);
+	inset-inline-end: 0;
+	min-width: 13rem;
+	padding: var(--ts-space-1);
+	position: absolute;
+	z-index: 40;
+}
+
+.ts-public-shell__menu-link {
+	border-radius: var(--ts-radius-sm);
+	color: var(--ts-color-text-muted);
+	font-size: 0.9rem;
+	font-weight: 600;
+	padding: 0.5rem 0.65rem;
+	text-decoration: none;
+}
+
+.ts-public-shell__menu-link[aria-current='page'],
+.ts-public-shell__menu-link:hover,
+.ts-public-shell__menu-link:focus-visible {
+	background: var(--ts-color-surface-muted);
+	color: var(--ts-color-text);
+	text-decoration: none;
+}
+
+.ts-public-shell__icon-link {
+	align-items: center;
+	border: 1px solid transparent;
+	border-radius: var(--ts-radius-md);
+	color: var(--ts-color-text-muted);
+	display: inline-flex;
+	height: 2.25rem;
+	justify-content: center;
+	text-decoration: none;
+	width: 2.25rem;
+}
+
+.ts-public-shell__icon-link:hover,
+.ts-public-shell__icon-link:focus-visible {
+	background: var(--ts-color-surface-raised);
+	border-color: var(--ts-color-border);
+	color: var(--ts-color-text);
+	text-decoration: none;
+}
+
+.ts-public-shell__icon-link svg {
+	fill: currentColor;
+	height: 1.15rem;
+	width: 1.15rem;
+}
+
+.ts-public-shell__icon-link--stroke svg {
+	fill: none;
+	stroke: currentColor;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-width: 1.8;
+}
+
 .ts-public-shell__main {
 	display: grid;
 	gap: var(--ts-space-3);
+	padding-top: clamp(1.25rem, 3vw, 2.25rem);
+}
+
+.ts-public-footer {
+	border-top: 2px solid var(--ts-color-border-strong);
+	display: block;
+	margin-top: 4rem;
+	padding-top: 2rem;
+	width: 100%;
+}
+
+.site-footer-cta + .ts-public-footer {
+	margin-top: 0;
+}
+
+.ts-public-footer__inner {
+	display: grid;
+	gap: 2rem;
+	margin-inline: auto;
+	max-width: var(--ts-content-width);
+	padding-bottom: 3.75rem;
+	width: 100%;
+}
+
+.ts-public-footer__grid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2rem;
+	justify-content: center;
+}
+
+.ts-public-footer__column {
+	align-content: start;
+	display: grid;
+	gap: 0.75rem;
+	width: 16rem;
+}
+
+.ts-public-footer__title,
+.ts-public-footer__column-title {
+	color: var(--ts-color-text);
+	font-size: 1.25rem;
+	font-weight: 750;
+	line-height: 1.2;
+	margin: 0;
+}
+
+.ts-public-footer__heading {
+	color: var(--ts-color-info-text);
+	font-size: 0.82rem;
+	font-weight: 750;
+	letter-spacing: 0.14em;
+	line-height: 1.2;
+	margin: 0;
+	text-transform: uppercase;
+}
+
+.ts-public-footer__copy,
+.ts-public-footer__links {
+	color: var(--ts-color-text-muted);
+	font-size: 1rem;
+	line-height: 1.9;
+	margin: 0;
+}
+
+.ts-public-footer__links {
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+}
+
+.ts-public-footer__links a {
+	color: var(--ts-color-text-muted);
+	display: block;
+	text-decoration: none;
+}
+
+.ts-public-footer__links a:hover,
+.ts-public-footer__links a:focus-visible {
+	color: var(--ts-color-text);
+	text-decoration: underline;
 }
 
 @media (min-width: 48rem) {
@@ -387,12 +579,19 @@
 	}
 
 	.ts-top-bar {
-		align-items: flex-start;
-		flex-direction: column;
+		align-items: center;
+		flex-wrap: wrap;
 	}
 
 	.ts-top-bar__actions {
+		justify-content: flex-end;
+	}
+
+	.ts-public-shell__nav {
 		justify-content: flex-start;
-		width: 100%;
+	}
+
+	.ts-public-shell__menu {
+		inset-inline: 0 auto;
 	}
 }

package/dist/styles/global.css

@@ -1,6 +1,10 @@
 @import "tailwindcss";
 @import "katex/dist/katex.min.css";
 @import "./tokens.css";
+@import "./theme.css";
+@import "./ui.css";
+@import "./forms.css";
+@import "./app-shell.css";
 @import "./prose.css";
 
 @theme {
@@ -573,9 +577,10 @@ button:focus-visible {
 	width: 100vw;
 	margin-left: calc(50% - 50vw);
 	margin-right: calc(50% - 50vw);
-	margin-bottom: -8rem;
+	margin-bottom: 0;
 	background: var(--ts-color-canvas-subtle);
 	border-top: 1px solid color-mix(in srgb, var(--ts-color-info) 36%, var(--ts-color-surface) 12%);
+	border-bottom: 1px solid var(--ts-color-border);
 }
 
 .site-footer-cta::before {

package/dist/utils/color-schemes/cedar.js

@@ -0,0 +1,53 @@
+import { completeTokens } from "./shared.js";
+const cedarScheme = {
+  id: "cedar",
+  name: "Cedar Clay",
+  swatches: ["#b86b3c", "#7d4528", "#fffdf8", "#2d241c"],
+  modeSwatches: {
+    light: ["#b86b3c", "#7d4528", "#fffdf8", "#2d241c"],
+    dark: ["#d98c5f", "#ffc59c", "#241b16", "#f1e7da"]
+  },
+  tokens: {
+    light: completeTokens({
+      canvas: "#f8f2e8",
+      canvasSubtle: "#efe3d2",
+      surface: "#fffdf8",
+      surfaceMuted: "#efe3d2",
+      surfaceRaised: "#fbf7ef",
+      text: "#2d241c",
+      textMuted: "#695746",
+      border: "#dccdb8",
+      borderStrong: "#bea98f",
+      accent: "#b86b3c",
+      accentHover: "#9a5731",
+      accentStrong: "#7d4528",
+      accentSoft: "#f1d9c8",
+      info: "#557f84",
+      success: "#5f7d45",
+      warning: "#9a6a21",
+      danger: "#a74435"
+    }, "light"),
+    dark: completeTokens({
+      canvas: "#181310",
+      canvasSubtle: "#241b16",
+      surface: "#241b16",
+      surfaceMuted: "#2d2119",
+      surfaceRaised: "#33261d",
+      text: "#f1e7da",
+      textMuted: "#c0ab98",
+      border: "#49382b",
+      borderStrong: "#655040",
+      accent: "#d98c5f",
+      accentHover: "#f0b184",
+      accentStrong: "#ffc59c",
+      accentSoft: "#3a241b",
+      info: "#83b0b3",
+      success: "#a1bf78",
+      warning: "#ddb76b",
+      danger: "#e88976"
+    }, "dark")
+  }
+};
+export {
+  cedarScheme
+};

package/dist/utils/color-schemes/fern.js

@@ -0,0 +1,53 @@
+import { completeTokens } from "./shared.js";
+const fernScheme = {
+  id: "fern",
+  name: "Fern Canopy",
+  swatches: ["#4f7d4e", "#2f5a35", "#ffffff", "#1f2a20"],
+  modeSwatches: {
+    light: ["#4f7d4e", "#2f5a35", "#ffffff", "#1f2a20"],
+    dark: ["#8bbb75", "#b9e69e", "#172016", "#e8f0e3"]
+  },
+  tokens: {
+    light: completeTokens({
+      canvas: "#f3f7ef",
+      canvasSubtle: "#e8efe1",
+      surface: "#ffffff",
+      surfaceMuted: "#e8efe1",
+      surfaceRaised: "#fafcf7",
+      text: "#1f2a20",
+      textMuted: "#51604d",
+      border: "#cdd8c6",
+      borderStrong: "#aebca6",
+      accent: "#4f7d4e",
+      accentHover: "#3f6f3f",
+      accentStrong: "#2f5a35",
+      accentSoft: "#dcebd6",
+      info: "#3a6f75",
+      success: "#287243",
+      warning: "#8a6a1f",
+      danger: "#a23e35"
+    }, "light"),
+    dark: completeTokens({
+      canvas: "#11170f",
+      canvasSubtle: "#172016",
+      surface: "#172016",
+      surfaceMuted: "#1e2b1b",
+      surfaceRaised: "#223020",
+      text: "#e8f0e3",
+      textMuted: "#a8b6a2",
+      border: "#344431",
+      borderStrong: "#4d6048",
+      accent: "#8bbb75",
+      accentHover: "#a9d88e",
+      accentStrong: "#b9e69e",
+      accentSoft: "#20351f",
+      info: "#7db9bd",
+      success: "#81c784",
+      warning: "#d6b45e",
+      danger: "#e07a6f"
+    }, "dark")
+  }
+};
+export {
+  fernScheme
+};

package/dist/utils/color-schemes/index.js

@@ -0,0 +1,13 @@
+import { cedarScheme } from "./cedar.js";
+import { fernScheme } from "./fern.js";
+import { lichenScheme } from "./lichen.js";
+import { tidepoolScheme } from "./tidepool.js";
+const BUILT_IN_COLOR_SCHEMES = [
+  fernScheme,
+  lichenScheme,
+  cedarScheme,
+  tidepoolScheme
+];
+export {
+  BUILT_IN_COLOR_SCHEMES
+};

package/dist/utils/color-schemes/lichen.js

@@ -0,0 +1,53 @@
+import { completeTokens } from "./shared.js";
+const lichenScheme = {
+  id: "lichen",
+  name: "Lichen Stone",
+  swatches: ["#6f8b67", "#4e6d49", "#ffffff", "#242923"],
+  modeSwatches: {
+    light: ["#6f8b67", "#4e6d49", "#ffffff", "#242923"],
+    dark: ["#9ab48a", "#c9dbbd", "#1a201d", "#e7ece5"]
+  },
+  tokens: {
+    light: completeTokens({
+      canvas: "#f4f5f1",
+      canvasSubtle: "#e7ebe3",
+      surface: "#ffffff",
+      surfaceMuted: "#e7ebe3",
+      surfaceRaised: "#fbfcf8",
+      text: "#242923",
+      textMuted: "#596057",
+      border: "#d2d8cf",
+      borderStrong: "#b7c0b2",
+      accent: "#6f8b67",
+      accentHover: "#5d7a56",
+      accentStrong: "#4e6d49",
+      accentSoft: "#e0eadc",
+      info: "#607d83",
+      success: "#537f54",
+      warning: "#8a7140",
+      danger: "#9d4c44"
+    }, "light"),
+    dark: completeTokens({
+      canvas: "#121614",
+      canvasSubtle: "#1a201d",
+      surface: "#1a201d",
+      surfaceMuted: "#222a25",
+      surfaceRaised: "#27302b",
+      text: "#e7ece5",
+      textMuted: "#a5aea4",
+      border: "#38423c",
+      borderStrong: "#515c55",
+      accent: "#9ab48a",
+      accentHover: "#bdd0ad",
+      accentStrong: "#c9dbbd",
+      accentSoft: "#243322",
+      info: "#8fb1b4",
+      success: "#94be8d",
+      warning: "#d0b577",
+      danger: "#db8579"
+    }, "dark")
+  }
+};
+export {
+  lichenScheme
+};

package/dist/utils/color-schemes/shared.js

@@ -0,0 +1,33 @@
+function completeTokens(tokens, mode) {
+  return {
+    ...tokens,
+    surfaceOverlay: mode === "dark" ? "rgba(7, 12, 8, 0.72)" : "rgba(255, 255, 255, 0.88)",
+    textSubtle: tokens.textMuted,
+    textInverse: mode === "dark" ? "#11170f" : "#ffffff",
+    link: tokens.info,
+    linkHover: tokens.accentHover,
+    borderMuted: tokens.border,
+    focus: tokens.info,
+    accentText: mode === "dark" ? "#10170f" : "#ffffff",
+    infoSoft: mode === "dark" ? colorMix(tokens.info, tokens.canvas, 22) : colorMix(tokens.info, tokens.surface, 18),
+    infoText: tokens.info,
+    infoBorder: colorMix(tokens.info, tokens.border, mode === "dark" ? 48 : 42),
+    successSoft: mode === "dark" ? colorMix(tokens.success, tokens.canvas, 24) : colorMix(tokens.success, tokens.surface, 18),
+    successText: tokens.success,
+    successBorder: colorMix(tokens.success, tokens.border, mode === "dark" ? 48 : 42),
+    warningSoft: mode === "dark" ? colorMix(tokens.warning, tokens.canvas, 24) : colorMix(tokens.warning, tokens.surface, 18),
+    warningText: tokens.warning,
+    warningBorder: colorMix(tokens.warning, tokens.border, mode === "dark" ? 48 : 42),
+    dangerSoft: mode === "dark" ? colorMix(tokens.danger, tokens.canvas, 24) : colorMix(tokens.danger, tokens.surface, 16),
+    dangerText: tokens.danger,
+    dangerBorder: colorMix(tokens.danger, tokens.border, mode === "dark" ? 48 : 42),
+    shadow: mode === "dark" ? "0 16px 36px rgba(0, 0, 0, 0.28)" : "0 1px 2px rgba(31, 35, 40, 0.08)",
+    grid: mode === "dark" ? "rgba(160, 180, 150, 0.12)" : "rgba(80, 100, 74, 0.12)"
+  };
+}
+function colorMix(first, second, firstPercent) {
+  return `color-mix(in srgb, ${first} ${firstPercent}%, ${second})`;
+}
+export {
+  completeTokens
+};

package/dist/utils/color-schemes/tidepool.js

@@ -0,0 +1,53 @@
+import { completeTokens } from "./shared.js";
+const tidepoolScheme = {
+  id: "tidepool",
+  name: "Tidepool Dusk",
+  swatches: ["#3f8582", "#286462", "#ffffff", "#1d2928"],
+  modeSwatches: {
+    light: ["#3f8582", "#286462", "#ffffff", "#1d2928"],
+    dark: ["#73c5bd", "#b8eee8", "#162123", "#e2eeee"]
+  },
+  tokens: {
+    light: completeTokens({
+      canvas: "#eff7f5",
+      canvasSubtle: "#dfecea",
+      surface: "#ffffff",
+      surfaceMuted: "#dfecea",
+      surfaceRaised: "#f7fbfa",
+      text: "#1d2928",
+      textMuted: "#4f615f",
+      border: "#c9d9d7",
+      borderStrong: "#a9bfbc",
+      accent: "#3f8582",
+      accentHover: "#32726f",
+      accentStrong: "#286462",
+      accentSoft: "#d5ece9",
+      info: "#4c7899",
+      success: "#3d7b62",
+      warning: "#8b6e2f",
+      danger: "#a6453d"
+    }, "light"),
+    dark: completeTokens({
+      canvas: "#0f1718",
+      canvasSubtle: "#162123",
+      surface: "#162123",
+      surfaceMuted: "#1c2b2d",
+      surfaceRaised: "#223235",
+      text: "#e2eeee",
+      textMuted: "#9fb6b6",
+      border: "#304649",
+      borderStrong: "#496265",
+      accent: "#73c5bd",
+      accentHover: "#a2e1d9",
+      accentStrong: "#b8eee8",
+      accentSoft: "#1c3838",
+      info: "#8bbce5",
+      success: "#7cc6a1",
+      warning: "#d3b66a",
+      danger: "#e28074"
+    }, "dark")
+  }
+};
+export {
+  tidepoolScheme
+};

package/dist/utils/starlight-nav.js

@@ -1,3 +1,9 @@
+import {
+  BOOKS as RUNTIME_BOOKS,
+  BOOKS_LINK as RUNTIME_BOOKS_LINK,
+  TREESEED_LIBRARY_DOWNLOAD as RUNTIME_TREESEED_LIBRARY_DOWNLOAD,
+  TREESEED_LINKS as RUNTIME_TREESEED_LINKS
+} from "@treeseed/sdk/platform/books-data";
 const normalizeHref = (href) => href.endsWith("/") ? href : `${href}/`;
 function buildSidebarLink(href, label, currentPath) {
   return {
@@ -76,20 +82,20 @@ function getDocsDownloadForPathFromRuntime(runtime2, pathname) {
     downloadTitle: book.downloadTitle
   };
 }
-const BOOKS = [];
-const BOOKS_LINK = {
+const BOOKS = RUNTIME_BOOKS ?? [];
+const BOOKS_LINK = RUNTIME_BOOKS_LINK ?? {
   label: "Books",
-  link: "/knowledge/"
+  link: "/books/"
 };
-const TREESEED_LIBRARY_DOWNLOAD = {
+const TREESEED_LIBRARY_DOWNLOAD = RUNTIME_TREESEED_LIBRARY_DOWNLOAD ?? {
   downloadFileName: "treeseed-knowledge.md",
   downloadHref: "/books/treeseed-knowledge.md",
   downloadTitle: "TreeSeed Knowledge Library"
 };
-const TREESEED_LINKS = {
-  home: "/knowledge/"
+const TREESEED_LINKS = RUNTIME_TREESEED_LINKS ?? {
+  home: "/books/"
 };
-const runtime = { BOOKS, BOOKS_LINK, TREESEED_LIBRARY_DOWNLOAD, TREESEED_LINKS };
+const runtime = typeof __TREESEED_BOOK_RUNTIME__ !== "undefined" ? __TREESEED_BOOK_RUNTIME__ : { BOOKS, BOOKS_LINK, TREESEED_LIBRARY_DOWNLOAD, TREESEED_LINKS };
 function buildBookSidebar(bookSlug) {
   return buildBookSidebarFromRuntime(runtime, bookSlug);
 }