handzon-core 0.6.0

package/styles/components/reveal.css

@@ -0,0 +1,25 @@
+/* Reveal */
+.reveal { margin: 1rem 0; }
+.reveal-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border: 0;
+  font: inherit;
+  font-size: 0.9em;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0;
+}
+.reveal-btn:hover {
+  background: color-mix(in oklab, var(--color-accent) 88%, white);
+}
+.reveal-content {
+  margin-top: 0.75rem;
+  padding: 0.95rem 1.1rem;
+  background: var(--color-surface);
+  border-left: var(--border-thick) solid var(--color-accent);
+}

package/styles/components/tabs.css

@@ -0,0 +1,60 @@
+/* Tabs — browser-tab look. Triggers at top, content directly below.
+ * No outer container. Active trigger shares the content's surface bg
+ * so the underline appears to extend under the inactive triggers and
+ * the active one visually attaches to the content area below it.
+ */
+.tut-tabs {
+  margin: 1.25rem 0;
+}
+.tut-tabs-list {
+  display: flex;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  border-bottom: var(--border-default) solid var(--color-border);
+}
+.tut-tabs-trigger {
+  padding: 0.55rem 1.1rem;
+  /* Inactive tab: clearly visible chip in the secondary surface tier. */
+  background: color-mix(in oklab, var(--color-surface) 75%, var(--color-bg));
+  border: 0;
+  color: var(--color-muted);
+  font: inherit;
+  font-size: 0.85em;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0;
+  margin-bottom: -1px;
+  /* Tabs share edges — every trigger draws top/right/bottom; the first
+   * one also gets a left border. Adjacent edges collapse to one line. */
+  border-top: var(--border-default) solid var(--color-border);
+  border-right: var(--border-default) solid var(--color-border);
+  border-bottom: var(--border-default) solid var(--color-border);
+  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
+}
+.tut-tabs-trigger:first-child {
+  border-left: var(--border-default) solid var(--color-border);
+}
+.tut-tabs-trigger:hover {
+  color: var(--color-fg);
+  background: var(--color-surface);
+}
+.tut-tabs-trigger[data-active="true"] {
+  color: var(--color-fg);
+  font-weight: 600;
+  /* Lifted bg — distinct from the content panel below. */
+  background: var(--color-surface-2);
+  border-top: var(--border-thick) solid var(--color-accent);
+  /* Drop the bottom border so the active tab opens into the panel. */
+  border-bottom-color: transparent;
+}
+.tut-tabs-content {
+  background: var(--color-surface);
+  padding: 0.95rem 1.1rem;
+  border-left: var(--border-default) solid var(--color-border);
+  border-right: var(--border-default) solid var(--color-border);
+  border-bottom: var(--border-default) solid var(--color-border);
+}
+.tut-tab-panel[hidden] { display: none; }
+.tut-tab-panel > :first-child { margin-top: 0; }
+.tut-tab-panel > :last-child { margin-bottom: 0; }

package/styles/components/terminal.css

@@ -0,0 +1,55 @@
+/* Terminal */
+.term {
+  margin: 1.25rem 0;
+  background: var(--color-surface);
+  overflow: hidden;
+  position: relative;
+  border-radius: 0;
+  border: var(--border-default) solid var(--color-border);
+}
+.term-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  background: var(--color-surface-2);
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  color: var(--color-muted);
+}
+.term-dots { display: inline-flex; gap: 0.3rem; }
+.term-dots span {
+  width: 10px; height: 10px; border-radius: 50%;
+  background: var(--color-border-strong);
+  display: inline-block;
+}
+.term-dots span:nth-child(1) { background: oklch(60% 0.22 25); }
+.term-dots span:nth-child(2) { background: oklch(75% 0.16 75); }
+.term-dots span:nth-child(3) { background: oklch(70% 0.18 145); }
+.term-body {
+  margin: 0;
+  padding: 0.85rem 1rem;
+  color: var(--color-fg);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  line-height: 1.55;
+  background: transparent;
+  border: 0;
+  overflow-x: auto;
+}
+.term-line { display: flex; gap: 0.5rem; }
+.term-prompt { color: var(--color-accent); user-select: none; }
+.term-out { color: var(--color-muted); white-space: pre-wrap; }
+.term-run {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.5rem;
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border: 0;
+  padding: 0.25rem 0.6rem;
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  cursor: pointer;
+  border-radius: 0;
+}

package/styles/components.css

@@ -0,0 +1,28 @@
+/* Component styles for React islands + MDX components.
+ *
+ * Each feature lives in its own file under ./components/. Imports are
+ * ordered so cross-cutting rules (Expressive Code overrides, modal
+ * helpers, a11y utilities) come before component-specific stylesheets.
+ */
+
+/* Cross-cutting + utilities */
+@import "./components/expressive-code.css";
+@import "./components/a11y.css";
+@import "./components/modal.css";
+
+/* Site chrome */
+@import "./components/progress.css";
+
+/* AI assistant */
+@import "./components/chat.css";
+@import "./components/byok.css";
+
+/* MDX components */
+@import "./components/tabs.css";
+@import "./components/filetree.css";
+@import "./components/reveal.css";
+@import "./components/terminal.css";
+@import "./components/mermaid.css";
+@import "./components/diff.css";
+@import "./components/quiz.css";
+@import "./components/checkpoint.css";

package/styles/global.css

@@ -0,0 +1,15 @@
+/*
+ * Handzon framework styles. Consumers should chain this with their own
+ * theme tokens:
+ *
+ *   @import "handzon-core/styles/global.css";
+ *   @import "./themes/<chosen>.css";
+ *
+ * Theme tokens (--color-*, --font-*, --border-*, --shadow-*) are NOT
+ * provided here — they live in user-owned `src/styles/themes/*.css` so
+ * the scaffold can pick or override them without ejecting the framework.
+ */
+@import "tailwindcss";
+
+@import "./base.css";
+@import "./components.css";