@ape-egg/codecane 0.0.0-stage → 1.0.0

package/package.json

@@ -1,6 +1,33 @@
 {
   "name": "@ape-egg/codecane",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Build a project up step by step: add-only step folders stacked into runnable steps, with a timeline viewer",
+  "type": "module",
+  "license": "ISC",
+  "author": "kkortes",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kkortes/codecane.git",
+    "directory": "package"
+  },
+  "bin": {
+    "codecane": "core/cli.js"
+  },
+  "exports": {
+    ".": "./core/index.js",
+    "./workflow.md": "./workflow.md"
+  },
+  "files": [
+    "core",
+    "ui",
+    "workflow.md",
+    "README.md"
+  ],
+  "dependencies": {
+    "@ape-egg/codie": "^0.1.18",
+    "@ape-egg/vibe": "^4.3.17"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/ui/codecane.css

@@ -0,0 +1,534 @@
+:root {
+  --line: #2e2e33;
+  --dim: #8b8b94;
+  --accent: oklch(0.72 0.14 250);
+  --addition: oklch(0.76 0.13 145);
+  --removal: oklch(0.72 0.15 27);
+  --violet: oklch(0.72 0.12 300);
+  --yellow: oklch(0.86 0.13 90);
+  --text: #e8e8ec;
+  --slide: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
+  color-scheme: dark;
+  font: 0.875rem/1.6 system-ui, sans-serif;
+  color: var(--text);
+  background: #18181b;
+}
+
+body {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  height: 100dvh;
+  margin: 0;
+  overflow: hidden;
+}
+
+header,
+story-panel,
+changes-list {
+  position: relative;
+  z-index: 1;
+  background: #18181b;
+  transition: translate var(--slide);
+}
+
+header[away] {
+  translate: 0 -100%;
+}
+
+[away] story-panel {
+  translate: -100%;
+}
+
+[away] changes-list {
+  translate: 100%;
+}
+
+[away] code-panel {
+  translate: 0 100%;
+}
+
+[away] failure card {
+  translate: -50% calc(-50% - 100dvh);
+}
+
+[fullscreen] stage {
+  position: fixed;
+  inset: 0;
+}
+
+a {
+  color: inherit;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+header {
+  --bar: 3.8rem;
+  display: flex;
+  align-items: center;
+  min-height: var(--bar);
+  padding-left: 1.25rem;
+  border-bottom: 1px solid var(--line);
+}
+
+version {
+  margin-left: 4px;
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: normal;
+  color: var(--dim);
+}
+
+logotext-codecane {
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+logotext-codecane span {
+  color: var(--yellow);
+}
+
+header > button {
+  align-self: start;
+  width: var(--bar);
+  height: var(--bar);
+  padding: 0;
+  border-radius: 0;
+  font-size: 1.375rem;
+}
+
+header ol {
+  display: grid;
+  flex: 1;
+  grid-auto-columns: max-content;
+  gap: 0 0.25rem;
+  transition: grid-template-rows 0.3s ease;
+  min-width: 0;
+  margin: 0 1.5rem;
+  padding: 0.75rem 0;
+  overflow-x: auto;
+  list-style: none;
+}
+
+header li {
+  display: flex;
+  align-self: center;
+  align-items: center;
+  gap: 0.25rem;
+  max-height: 100%;
+  overflow: hidden;
+  transition: visibility 0.3s;
+}
+
+header li:not([shown]) {
+  visibility: hidden;
+}
+
+arrow {
+  color: var(--dim);
+}
+
+header a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 999px;
+  white-space: nowrap;
+  text-decoration: none;
+  color: var(--dim);
+}
+
+header li a {
+  --tint: 8%;
+  flex: 1;
+}
+
+header :is(li a, a[aria-current="page"]) {
+  background: color-mix(in oklch, currentColor var(--tint), transparent);
+}
+
+header li a:is(:hover, [lit], [aria-current="step"]) {
+  --tint: 16%;
+}
+
+header li a:not([aria-current="step"]):hover {
+  filter: brightness(1.4);
+}
+
+logotext-codecane a {
+  gap: 0;
+  padding-right: 0;
+  color: inherit;
+  transition: opacity 0.2s;
+}
+
+logotext-codecane a:hover {
+  opacity: 0.7;
+}
+
+header a:is([aria-current="step"], [aria-current="page"], [lit]) {
+  --tint: 16%;
+  color: inherit;
+}
+
+button[fork] {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.25rem;
+  border: 0;
+  font: inherit;
+  color: var(--violet);
+  background: none;
+  cursor: pointer;
+}
+
+split {
+  rotate: 90deg;
+}
+
+join {
+  rotate: -90deg;
+}
+
+[kind="seam"] {
+  --kind: var(--yellow);
+}
+
+header a[kind="seam"] {
+  --tint: 0%;
+  justify-content: center;
+  height: 2rem;
+  aspect-ratio: 1;
+  padding: 0;
+  color: var(--kind);
+}
+
+convergence {
+  display: grid;
+  gap: 0.5rem;
+  justify-items: start;
+  margin-block: 1.25rem;
+  padding: 0.75rem;
+  border-left: 2px solid var(--kind, var(--line));
+  background: #ffffff08;
+}
+
+convergence :is(p, ul) {
+  margin: 0;
+}
+
+convergence h2 {
+  color: var(--kind, var(--dim));
+}
+
+
+workspace {
+  --side: minmax(0, 32rem);
+  display: grid;
+  grid-template: minmax(0, 1fr) / var(--side) minmax(20rem, 1fr) var(--side);
+}
+
+story-panel,
+changes-list {
+  overflow: auto;
+}
+
+story-panel {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--line);
+}
+
+article,
+file-list {
+  padding: 1.25rem;
+}
+
+article small {
+  color: var(--dim);
+}
+
+story h1 {
+  margin: 0.25rem 0 0.75rem;
+  font-size: 1.375rem;
+  line-height: 1.3;
+}
+
+story :is(h2, p, ul) {
+  margin: 0 0 0.75rem;
+}
+
+story code {
+  font-family: ui-monospace, monospace;
+  padding: 0.0625rem 0.25rem;
+  border-radius: 0.25rem;
+  background: #2a2a30;
+}
+
+story hr {
+  border: 0;
+  border-top: 1px solid var(--line);
+}
+
+story a {
+  color: var(--accent);
+}
+
+alternatives {
+  display: grid;
+  gap: 0.25rem;
+  margin-top: 1.25rem;
+}
+
+alternatives h2 {
+  margin-bottom: 0.25rem;
+}
+
+alternatives a {
+  padding: 0.375rem 0.75rem;
+  border-left: 2px solid var(--violet);
+  background: #ffffff08;
+  color: var(--violet);
+}
+
+alternatives a:hover {
+  background: #ffffff12;
+}
+
+step-links {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.25rem;
+  color: var(--dim);
+}
+
+step-links a:hover {
+  color: var(--text);
+}
+
+step-links [next] {
+  margin-left: auto;
+}
+
+step-links a[kind="seam"] {
+  color: var(--kind);
+}
+
+file-list {
+  flex: 1;
+  border-top: 1px solid var(--line);
+}
+
+file {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-family: ui-monospace, monospace;
+  cursor: pointer;
+}
+
+folder,
+dependency {
+  display: block;
+  padding: 0.25rem 0.5rem;
+  font-family: ui-monospace, monospace;
+  color: var(--dim);
+}
+
+folder ~ :is(file, dependency) {
+  margin-left: 1rem;
+}
+
+file span {
+  flex: 1;
+}
+
+file:hover,
+file[aria-current="location"] {
+  background: #2a2a30;
+}
+
+
+stage {
+  position: relative;
+  display: grid;
+  isolation: isolate;
+  overflow: hidden;
+  background: #fff;
+}
+
+stage > :is(iframe, empty-stage) {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+code-panel {
+  position: absolute;
+  z-index: 1;
+  inset: auto 0 0;
+  display: flex;
+  flex-direction: column;
+  height: var(--panel);
+  background: rgb(24 24 27 / 0.8);
+  transition: height var(--slide), translate var(--slide);
+  animation: rise var(--slide);
+}
+
+code-panel[dragging] {
+  transition: none;
+}
+
+code-panel[closing] {
+  animation: sink var(--slide) forwards;
+}
+
+@keyframes rise {
+  from {
+    bottom: calc(var(--panel) * -1);
+  }
+}
+
+@keyframes sink {
+  to {
+    bottom: calc(var(--panel) * -1);
+  }
+}
+
+grip {
+  height: 0.375rem;
+  cursor: ns-resize;
+  touch-action: none;
+}
+
+editor-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 0.75rem 0.5rem;
+  background: none;
+}
+
+editor-bar code {
+  margin-right: auto;
+}
+
+problem {
+  padding: 0.75rem 1rem;
+  white-space: pre-wrap;
+  font: 0.8125rem/1.5 ui-monospace, monospace;
+  color: #fff;
+  background: oklch(0.45 0.13 27);
+}
+
+code-panel codie[dark] {
+  flex: 1;
+  contain: size;
+  border-radius: 0;
+  --codie-bg: transparent;
+}
+
+failure {
+  position: absolute;
+  inset: 0;
+  background: oklch(from var(--background) l c h / 0.88);
+}
+
+failure card {
+  position: absolute;
+  top: calc((100% - var(--drawer)) * 0.45);
+  left: 50%;
+  width: min(32rem, 100% - 2rem);
+  translate: -50% -50%;
+  transition: top var(--slide), translate var(--slide);
+}
+
+[dragging] ~ failure card {
+  transition: translate var(--slide);
+}
+
+failure message {
+  white-space: pre-wrap;
+  font: 0.8125rem/1.5 var(--font-mono);
+}
+
+failure code {
+  align-self: start;
+}
+
+empty-stage {
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  color: var(--dim);
+  background: #18181b;
+}
+
+changes-list {
+  grid-column: -2;
+  border-left: 1px solid var(--line);
+}
+
+:is(file-list, changes-list) > h2 {
+  font-size: 0.875rem;
+}
+
+changes-list > h2 {
+  padding: 1.25rem 1.25rem 0.75rem;
+}
+
+change-diff {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+  counter-reset: added removed;
+}
+
+change-header {
+  order: -1;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.25rem;
+  background: #18181b;
+}
+
+change-header code {
+  min-width: 0;
+  margin-right: auto;
+  overflow: hidden;
+  direction: rtl;
+  text-overflow: ellipsis;
+}
+
+change-diff codie {
+  font-size: 0.75rem;
+  --codie-bg: transparent;
+}
+
+tally {
+  font-family: ui-monospace, monospace;
+}
+
+added {
+  color: var(--addition);
+}
+
+removed {
+  color: var(--removal);
+}

package/ui/components/Changes.html

@@ -0,0 +1,25 @@
+<changes-list stylecheat dark>
+  <h2>Code changes</h2>
+  <!-- each changes as change (page.id + change.path) -->
+  <change-diff data-state="@[change.state]">
+    <!-- if change.binary -->
+    <empty-stage>Binary file</empty-stage>
+    <!-- else -->
+    <codie dark data-path="@[change.path]"></codie>
+    <!-- /if -->
+    <change-header>
+      <code>@[change.path]</code>
+      <!-- if change.state === 'added' -->
+      <badge bg-green text-green>Added</badge>
+      <!-- /if -->
+      <!-- if change.state === 'modified' -->
+      <badge bg-yellow text-yellow>Modified</badge>
+      <!-- /if -->
+      <!-- if change.state === 'removed' -->
+      <badge bg-red text-red>Removed</badge>
+      <!-- /if -->
+      <tally><added></added> <removed></removed></tally>
+    </change-header>
+  </change-diff>
+  <!-- /each -->
+</changes-list>

package/ui/components/Stage.html

@@ -0,0 +1,40 @@
+<stage style="--drawer: @[open && !closing ? panel : 0]%">
+  <!-- if open -->
+  <code-panel style="--panel: @[panel]%" dragging="@[dragging]" closing="@[closing]" onanimationend="codecane.settle()">
+    <grip onpointerdown="codecane.grab(event)" onpointermove="this.hasPointerCapture(event.pointerId) && codecane.drag(event)" onlostpointercapture="codecane.snap()"></grip>
+    <editor-bar stylecheat dark>
+      <code>@[open]</code>
+      <!-- if editable -->
+      <!-- if page.files.find(file => file.path === open).forks.length > 1 -->
+      <button onclick="codecane.save(true)" onmouseenter="codecane.light(...$.page.files.find(file => file.path === $.open).forks)" onmouseleave="codecane.light()" secondary sm disabled="@[!(open in drafts)]">Save in @[page.files.find(file => file.path === open).forks.length] forks</button>
+      <!-- /if -->
+      <button onclick="codecane.save()" onmouseenter="codecane.light('@[page.files.find(file => file.path === open).changedBy]')" onmouseleave="codecane.light()" secondary sm disabled="@[!(open in drafts)]">Save in @[steps[page.files.find(file => file.path === open).changedBy].title]</button>
+      <!-- /if -->
+      <button onclick="codecane.run()" aria-label="Close" secondary sm><icon cross></icon></button>
+    </editor-bar>
+    <!-- if problem -->
+    <problem>@[problem]</problem>
+    <!-- /if -->
+    <codie dark></codie>
+  </code-panel>
+  <!-- /if -->
+  <!-- if src -->
+  <iframe src="@[src]" title="@[steps[page.id].title]"></iframe>
+  <!-- else -->
+  <empty-stage>This step has no index.html to run.</empty-stage>
+  <!-- /if -->
+  <!-- if failure -->
+  <failure stylecheat dark role="alert">
+    <card g-3>
+      <crow justify-between g-4>
+        <h4>The step threw</h4>
+        <badge bg-red text-red>Error</badge>
+      </crow>
+      <message>@[failure.message]</message>
+      <!-- if failure.at -->
+      <code>@[failure.at]</code>
+      <!-- /if -->
+    </card>
+  </failure>
+  <!-- /if -->
+</stage>

package/ui/components/Story.html

@@ -0,0 +1,85 @@
+<story-panel ontransitionend="event.target === this && codecane.returned()">
+  <article>
+    <small>Step @[timeline.indexOf(page.id) + 1] of @[timeline.length]@[page.untested ? ' · Untested' : '']</small>
+    <!-- if page.convergence && page.convergence.kind === 'seam' -->
+    <story><h1>@[page.title]</h1></story>
+    <!-- else -->
+    <story>@[$.unsafe(page.story)]</story>
+    <!-- /if -->
+    <!-- if page.convergence -->
+    <convergence kind="@[page.convergence.kind]">
+      <h2>@[kinds[page.convergence.kind]]</h2>
+      <!-- if page.convergence.kind === 'seam' -->
+      <p>A seam is a small API that the timelines before it share. Each timeline fills it in where it owns the code, so the steps after it are written once and never ask which timeline they are on.</p>
+      <!-- if page.convergence.requiredBy.length -->
+      <p>Required by @[page.convergence.requiredBy.map(id => steps[id].title).join(', ')]:</p>
+      <ul>
+        <!-- each page.convergence.reasons as reason -->
+        <li>@[reason]</li>
+        <!-- /each -->
+      </ul>
+      <!-- /if -->
+      <!-- else -->
+      <!-- if page.convergence.continues.length -->
+      <p>Continues @[page.convergence.continues.map(id => steps[id].title).join(', ')] together, each timeline on its own.</p>
+      <!-- /if -->
+      <!-- if page.convergence.brought.length -->
+      <p>Brings @[page.convergence.brought.map(id => steps[id].title).join(', ')] onto this timeline.</p>
+      <!-- /if -->
+      <!-- if page.convergence.kind === 'merge' -->
+      <p>Every step replays cleanly and every check passes, so the timelines just join.</p>
+      <!-- /if -->
+      <!-- /if -->
+    </convergence>
+    <!-- /if -->
+    <!-- if page.convergence && page.convergence.kind === 'seam' -->
+    <story>@[$.unsafe(page.story)]</story>
+    <!-- /if -->
+    <!-- if alternatives.length -->
+    <alternatives>
+      <h2>Alternatives</h2>
+      <!-- each alternatives as alternative -->
+      <a href="/@[alternative.address]">@[alternative.title]</a>
+      <!-- /each -->
+    </alternatives>
+    <!-- /if -->
+    <step-links>
+      <!-- if previous -->
+      <a href="/@[previous.address]">← @[previous.title]</a>
+      <!-- /if -->
+      <!-- if next -->
+      <a href="/@[next.address]" next kind="@[next.kind]">@[next.title] →</a>
+      <!-- else -->
+      <span>Final build</span>
+      <!-- /if -->
+    </step-links>
+  </article>
+  <file-list stylecheat dark>
+    <h2>Files</h2>
+    <!-- each [...new Set(page.files.map(file => file.folder))] as folder (page.id + folder) -->
+    <!-- if folder -->
+    <folder>@[folder]</folder>
+    <!-- /if -->
+    <!-- each page.files.filter(file => file.folder === folder) as file (page.id + file.path) -->
+    <file data-path="@[file.path]" aria-current="@[file.path === open ? 'location' : 'false']" onclick="codecane.open('@[file.path]')" onmouseenter="codecane.light('@[file.changedBy]')" onmouseleave="codecane.light()">
+      <span>@[file.path.slice(folder.length)]</span>
+      <!-- if file.owner === page.id && file.overrides -->
+      <badge bg-orange text-orange>Override</badge>
+      <!-- /if -->
+      <!-- if file.owner === page.id && !file.overrides -->
+      <badge bg-green text-green>Added</badge>
+      <!-- /if -->
+      <!-- if file.patchedBy.includes(page.id) -->
+      <badge bg-yellow text-yellow>Modified</badge>
+      <!-- /if -->
+    </file>
+    <!-- /each -->
+    <!-- /each -->
+    <!-- if page.dependencies.length -->
+    <folder>node_modules/</folder>
+    <!-- each page.dependencies as dependency (page.id + dependency) -->
+    <dependency>@[dependency]</dependency>
+    <!-- /each -->
+    <!-- /if -->
+  </file-list>
+</story-panel>