create-shibumi 0.2.5 → 0.2.8

package/src/templates/ship.ts

@@ -25,7 +25,7 @@ const SERVER_HOSTNAME = /^[A-Za-z0-9](?:[A-Za-z0-9.-]{0,251}[A-Za-z0-9])?$/;
 const COMMIT = /^[a-f0-9]{40}$/;
 const SERVER_CLI = "~/.local/bin/shibumi-server";
 const LATEST_SOURCE = "https://shibumistack.dev/ship/latest.ts";
-const CURRENT_SOURCE = "https://shibumistack.dev/ship/v45.ts";
+const CURRENT_SOURCE = "https://shibumistack.dev/ship/v46.ts";
 let sshControlDirectory: string | undefined;
 let sshControlTarget: string | undefined;
 
@@ -1703,13 +1703,13 @@ function portIsBusy(port: number): Promise<boolean> {
   });
 }
 
-export function formatDevStartup(port: number, domain: string, time: string, color = false): string {
+export function formatDevStartup(port: number, domain: string | undefined, time: string, color = false): string {
   const paint = (code: string, value: string) => color ? `\x1b[${code}m${value}\x1b[0m` : value;
   const row = (label: string, url: string) => `${paint("2", "┃")} ${label.padEnd(8)} ${paint("34", url)}`;
   return [
     `${paint("38;5;208", "渋み")}  ship dev`,
     row("Local", `http://localhost:${port}/`),
-    row("Remote", `https://${domain}`),
+    ...(domain ? [row("Remote", `https://${domain}`)] : []),
     `${paint("2", time)} starting app dev server...`,
   ].join("\n");
 }
@@ -1719,30 +1719,33 @@ function localTime(date = new Date()): string {
 }
 
 async function runDev(): Promise<void> {
+  // Dev must work on a fresh scaffold, before any server exists: without
+  // setup, fall back to the Shibumi port convention (registered apps get the
+  // first free port above 9000) and skip the Remote row.
   const config = await readConfig();
-  if (!config) throw new Error("Shibumi setup is missing.\n\nNext: run bun ship:setup.");
-  if (await portIsBusy(config.port)) {
+  const port = config?.port ?? 9000;
+  if (await portIsBusy(port)) {
     const lsof = Bun.which("lsof");
     const fuser = Bun.which("fuser");
-    if (!lsof && !fuser) throw new Error(`Port ${config.port} is already in use.\n\nNext: stop that process, then run bun dev again.`);
+    if (!lsof && !fuser) throw new Error(`Port ${port} is already in use.\n\nNext: stop that process, then run bun dev again.`);
     const found = lsof
-      ? await run([lsof, "-nP", `-iTCP:${config.port}`, "-sTCP:LISTEN", "-t"], { allowFailure: true })
-      : await run([fuser!, "-n", "tcp", String(config.port)], { allowFailure: true });
+      ? await run([lsof, "-nP", `-iTCP:${port}`, "-sTCP:LISTEN", "-t"], { allowFailure: true })
+      : await run([fuser!, "-n", "tcp", String(port)], { allowFailure: true });
     const pids = [...new Set(`${found.stdout} ${found.stderr}`.split(/\s+/).filter((value) => /^\d+$/.test(value)).map(Number))];
-    if (pids.length === 0) throw new Error(`Port ${config.port} is already in use.\n\nNext: stop that process, then run bun dev again.`);
+    if (pids.length === 0) throw new Error(`Port ${port} is already in use.\n\nNext: stop that process, then run bun dev again.`);
     const details = await run(["ps", "-o", "pid=,comm=", "-p", pids.join(",")], { allowFailure: true });
-    log.warn(`Port ${config.port} is in use${details.stdout.trim() ? `:\n${details.stdout.trim()}` : ""}`);
+    log.warn(`Port ${port} is in use${details.stdout.trim() ? `:\n${details.stdout.trim()}` : ""}`);
     const accepted = await confirm({ message: "Stop it and start this project?", initialValue: false });
     if (isCancel(accepted) || !accepted) return;
     for (const pid of pids) process.kill(pid, "SIGTERM");
     const deadline = Date.now() + 5_000;
-    while (await portIsBusy(config.port) && Date.now() < deadline) await Bun.sleep(100);
-    if (await portIsBusy(config.port)) throw new Error(`Port ${config.port} did not stop.\n\nNext: stop PID ${pids.join(", ")} manually, then run bun dev again.`);
+    while (await portIsBusy(port) && Date.now() < deadline) await Bun.sleep(100);
+    if (await portIsBusy(port)) throw new Error(`Port ${port} did not stop.\n\nNext: stop PID ${pids.join(", ")} manually, then run bun dev again.`);
   }
-  process.stdout.write(`${formatDevStartup(config.port, config.domain, localTime(), supportsTerminalColor())}\n`);
+  process.stdout.write(`${formatDevStartup(port, config?.domain, localTime(), supportsTerminalColor())}\n`);
   const child = Bun.spawn([process.execPath, "run", "dev:app"], {
     cwd: root,
-    env: { ...process.env, PORT: String(config.port), SHIBUMI_PORT: String(config.port) },
+    env: { ...process.env, PORT: String(port), SHIBUMI_PORT: String(port) },
     stdin: "inherit",
     stdout: "inherit",
     stderr: "inherit",
@@ -1808,7 +1811,7 @@ export async function runShip(): Promise<void> {
         ? await confirm({ message: "Ship now?", initialValue: true })
         : false;
       if (shipNow !== true || isCancel(shipNow)) {
-        outro(`${accent("Next:")} ${result.config.trigger === "github-push" ? "git push deploys automatically" : "bun ship"}`);
+        outro(`${accent("Next:")} ${result.config.trigger === "github-push" ? `git push origin ${result.config.branch} to deploy` : "bun ship"}`);
         return;
       }
     }

package/src/templates/web/public/style.css

@@ -1,60 +1,150 @@
-:root {
-  color-scheme: light dark;
-  --paper: #f5f0e4;
-  --ink: #1b130f;
-  --accent: #e95f19;
+/* App styles on top of the vendored shibumi.css tokens (public/vendor/).
+   Edit freely; this file is yours. Tokens: --paper --ink --muted --line
+   --accent, type scale --text-xs..--text-2xl, --font-sans/serif/mono. */
+
+/* The vendored shibumi.css sets a kozo paper background for the sites; apps
+   stay flat, and this override also stops the browser fetching the image. */
+body {
+  background-image: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --paper: #1b130f;
-    --ink: #f5f0e4;
-    --accent: #ff8648;
-  }
+.scaffold {
+  max-width: 40.625rem;
+  margin: 0 auto;
+  padding: clamp(3rem, 9vh, 6.5rem) 1.5rem 4rem;
 }
 
-body {
-  margin: 0;
-  background: var(--paper);
-  color: var(--ink);
-  font-family: system-ui, sans-serif;
-  font-size: 1.125rem;
-  line-height: 1.6;
+.masthead {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  margin: 0 0 3.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: var(--text-sm);
+  letter-spacing: 0.04em;
 }
 
-main {
-  max-width: 40rem;
-  margin: 0 auto;
-  padding: 4rem 1.5rem;
+.masthead-mark {
+  color: var(--accent);
+  font-size: var(--text-md);
 }
 
-h1 {
-  font-family: Georgia, "Times New Roman", serif;
-  font-weight: 500;
+.scaffold h1 {
+  margin: 0 0 0.75rem;
+  font-size: clamp(2.6rem, 7vw, 3.8rem);
+  font-weight: 450;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
 }
 
-a {
-  color: inherit;
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
-  text-underline-offset: 0.18em;
+.lede {
+  margin: 0 0 3rem;
+  max-width: 34rem;
+  color: var(--muted);
+  font-size: var(--text-lg);
+  line-height: 1.55;
 }
 
-a:hover {
-  text-decoration-color: var(--accent);
+.demo {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 3.25rem;
 }
 
-button {
-  font: inherit;
-  padding: 0.4rem 1rem;
+.demo button {
+  font: 500 var(--text-md) var(--font-sans);
+  padding: 0.5rem 1.3rem;
   border: 1px solid var(--ink);
+  border-radius: 0.35rem;
   background: transparent;
   color: inherit;
-  border-radius: 4px;
   cursor: pointer;
+  transition: border-color 160ms ease, color 160ms ease;
+}
+
+.demo button:hover,
+.demo button:focus-visible {
+  border-color: var(--accent);
+  color: var(--accent);
 }
 
-output {
-  margin-left: 0.75rem;
+.demo output {
+  min-width: 2ch;
+  font-size: var(--text-lg);
   font-variant-numeric: tabular-nums;
 }
+
+.demo-hint {
+  color: var(--muted);
+  font-size: var(--text-sm);
+}
+
+.endpoints {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-top: 1px solid var(--line);
+}
+
+main .endpoints a {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 0.9rem 0.25rem;
+  border-bottom: 1px solid var(--line);
+  text-decoration: none;
+  text-decoration-color: transparent;
+  transition: background 160ms ease;
+}
+
+main .endpoints a:hover,
+main .endpoints a:focus-visible {
+  background: var(--faint);
+}
+
+.endpoint-path {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+/* Inline code as rounded chips on the faint layer. */
+.scaffold code {
+  padding: 0.12em 0.42em;
+  border-radius: 0.35rem;
+  background: var(--faint);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+
+
+main .endpoints a:hover .endpoint-path {
+  color: var(--accent);
+}
+
+.endpoints span {
+  color: var(--muted);
+  font-size: var(--text-sm);
+  text-align: right;
+}
+
+.colophon {
+  margin-top: 3.5rem;
+}
+
+.colophon p {
+  margin: 0 0 0.5rem;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.7;
+}
+
+.colophon code {
+  color: var(--ink);
+}
+
+.colophon-links {
+  font-size: var(--text-sm);
+}

package/src/templates/web/public/vendor/shibumi.css

@@ -0,0 +1,422 @@
+/* shibumi.css — canonical shared layer for shibumistack.dev, shibumi-server, shibumi-forms.
+   Source of truth: shibumistack.dev repo public/shibumi.css. Do not edit vendored copies. */
+
+/* shared.css: common styles for all pages */
+
+:root {
+    color-scheme: light dark;
+    /* palette copied from shibumi-server site/styles.css */
+    --paper: light-dark(#f5f0e4, #1b130f);
+    --ink: light-dark(#272016, #eee5d7);
+    --muted: light-dark(#746b5d, #aaa092);
+    --faint: light-dark(rgba(39, 32, 22, 0.055), rgba(238, 229, 215, 0.07));
+    --line: light-dark(rgba(39, 32, 22, 0.14), rgba(238, 229, 215, 0.16));
+    --orange: light-dark(#e95f19, #ff8648);
+    --orange-soft: light-dark(#f8dfcd, #3c2117);
+    --green: light-dark(#26723e, #75d58a);
+    --danger: light-dark(#a13b2c, #e36c59);
+    --code: light-dark(#201c16, #120e0b);
+    --code-ink: #e9e2d5;
+    /* aliases so existing components pick up the server palette */
+    --bg: var(--paper);
+    --text: var(--ink);
+    --quiet: var(--faint);
+    --accent: var(--orange);
+    --accent-soft: var(--orange-soft);
+    --accent-hover: light-dark(#d15515, #ff9a66);
+    --success: var(--green);
+    --success-text: var(--green);
+    --success-ink: #17331f;
+    --terminal-success: light-dark(#3d8f50, #78e88f);
+    --terminal-active: light-dark(#16839a, #62dff0);
+    --terminal-info: light-dark(#397fc0, #74b6ff);
+    --max: 72.5rem;
+    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-serif: ui-serif, Georgia, "Iowan Old Style", "Apple Garamond", Cambria, serif;
+    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    --text-xs: 0.75rem;   /* 12px tiny */
+    --text-sm: 0.875rem;  /* 14px small */
+    --text-md: 1rem;      /* 16px normal / UI */
+    --text-base: 1.125rem; /* 18px body */
+    --text-lg: 1.3125rem; /* 21px */
+    --text-xl: 1.563rem;  /* 25px */
+    --text-2xl: 1.953rem;
+}
+
+[data-theme="dark"] { color-scheme: dark; }
+[data-theme="light"] { color-scheme: light; }
+
+*, *::before, *::after { box-sizing: border-box; }
+html { min-height: 100%; }
+
+body {
+    margin: 0;
+    min-height: 100svh;
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    font-weight: 400;
+    line-height: 1.65;
+    color: var(--text);
+    background: var(--bg);
+}
+
+/* Kozo paper texture, light theme only; dark stays flat ink. The image lives
+   next to this stylesheet in every consumer, hence the relative URL. */
+body {
+    background-image: url("kozo.webp");
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+}
+@media (prefers-color-scheme: dark) {
+    body { background-image: none; }
+}
+[data-theme="light"] body { background-image: url("kozo.webp"); }
+[data-theme="dark"] body { background-image: none; }
+
+h1, h2, h3 {
+    font-family: var(--font-serif);
+}
+
+a { color: inherit; }
+
+main a:not(.btn):not(.button) {
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
+    text-underline-offset: 0.18em;
+    transition: text-decoration-color 160ms ease;
+}
+
+main a:not(.btn):not(.button):hover,
+main a:not(.btn):not(.button):focus-visible {
+    text-decoration-color: var(--accent);
+}
+
+.shell {
+    width: min(var(--max), calc(100% - 2rem));
+    margin: 0 auto;
+    padding: 5.5rem 0 0;
+    position: relative;
+}
+
+/* ---- header / nav ---- */
+
+.shell > header,
+.site-header {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    z-index: 20;
+    width: min(var(--max), calc(100% - 2rem));
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+    transform: translateX(-50%);
+}
+
+.shell > header::before,
+.site-header::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 50%;
+    z-index: -1;
+    width: 100vw;
+    height: 100%;
+    transform: translateX(-50%);
+    background: light-dark(rgb(245 240 228 / 0%), rgb(27 19 15 / 72%));
+    backdrop-filter: blur(1.25rem);
+    -webkit-backdrop-filter: blur(1.25rem);
+}
+
+.mark {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--muted);
+    text-decoration: none;
+    font-family: var(--font-sans);
+    font-size: 1.125rem;
+    font-weight: 400;
+    letter-spacing: 0.03rem;
+}
+
+.mark-tld {
+    color: light-dark(rgba(92, 88, 82, 0.5), rgba(189, 183, 173, 0.62));
+    font-weight: 300;
+}
+
+.mark img,
+img.mark-logo {
+    width: 2.125rem;
+    height: 2.125rem;
+    border-radius: 0.5rem;
+}
+
+[data-theme="dark"] .mark .logo-light,
+[data-theme="light"] .mark .logo-dark { display: none; }
+
+main, .page { min-width: 0; }
+
+.eyebrow {
+    margin: 0 0 1rem;
+    color: var(--accent);
+    font: 300 var(--text-md)/1.2 var(--font-mono);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-family: var(--font-sans);
+    font-size: var(--text-md);
+    color: var(--muted);
+}
+
+nav a {
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+}
+
+nav a:hover,
+nav a[aria-current="page"] {
+    border-bottom-color: var(--accent);
+    color: var(--text);
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.nav-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.nav-icons {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.github-link {
+    display: inline-flex;
+    align-items: center;
+    border-bottom: 0;
+    color: var(--muted);
+}
+
+.github-link svg {
+    width: 1.05rem;
+    height: 1.05rem;
+    fill: currentColor;
+}
+
+.github-link:hover {
+    color: var(--text);
+    border-bottom: 0;
+}
+
+.stack-menu { position: relative; }
+
+.stack-menu summary {
+    cursor: pointer;
+    list-style: none;
+    transition: color 160ms ease;
+}
+
+.stack-menu summary::-webkit-details-marker { display: none; }
+.stack-menu summary:hover,
+.stack-menu summary:focus-visible,
+.stack-menu[open] summary,
+.stack-menu:has(a[aria-current="page"]) summary { color: var(--text); }
+
+.stack-menu summary:focus-visible {
+    border-radius: 0.2rem;
+    outline: 2px solid var(--accent);
+    outline-offset: 4px;
+}
+
+.stack-popover {
+    position: absolute;
+    top: calc(100% + 0.75rem);
+    right: 0;
+    z-index: 30;
+    width: 14rem;
+    padding: 0.45rem;
+    border-radius: 0.5rem;
+    background: light-dark(rgb(255 250 240 / 78%), rgb(48 35 29 / 72%));
+    -webkit-backdrop-filter: blur(0.5rem);
+    backdrop-filter: blur(0.5rem);
+    box-shadow: 0 0.8rem 2.5rem light-dark(rgb(20 14 9 / 18%), rgb(0 0 0 / 58%));
+}
+
+.stack-popover a {
+    display: block;
+    padding: 0.65rem 0.75rem;
+    border: 0;
+    border-radius: 0.3rem;
+    color: var(--muted);
+}
+
+.stack-popover a:hover,
+.stack-popover a:focus-visible {
+    border: 0;
+    outline: none;
+    background: var(--quiet);
+    color: var(--text);
+}
+
+.stack-popover a[aria-current="page"] { color: var(--accent); }
+
+/* first menu in nav (About) opens aligned to its left edge */
+.nav-links > .stack-menu:first-child .stack-popover { left: 0; right: auto; }
+.stack-popover span,
+.stack-popover small { display: block; }
+.stack-popover span { color: inherit; font-weight: 700; }
+.stack-popover small { margin-top: 0.1rem; color: var(--muted); font-size: var(--text-xs); }
+
+/* ---- theme toggle ---- */
+
+.theme-toggle {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    width: 1.7rem;
+    height: 1.7rem;
+    border: 0;
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+    padding: 0;
+}
+
+.theme-toggle:hover { color: var(--text); }
+
+.theme-toggle svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+}
+
+[data-theme="dark"] .theme-toggle .icon-sun,
+[data-theme="light"] .theme-toggle .icon-moon { display: none; }
+[data-theme="dark"] .theme-toggle .icon-moon,
+[data-theme="light"] .theme-toggle .icon-sun { display: block; }
+/* alias var names used by server/forms stylesheets */
+:root {
+    --sans: var(--font-sans);
+    --serif: var(--font-serif);
+    --mono: var(--font-mono);
+    --fs-xs: var(--text-xs);
+    --fs-sm: var(--text-sm);
+    --fs-md: var(--text-md);
+    --fs-base: var(--text-base);
+    --fs-lg: var(--text-lg);
+}
+
+/* ---- footer ---- */
+
+.site-footer {
+    margin-top: clamp(4rem, 8vw, 6rem);
+    padding: 1.5rem 0;
+    border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    color: var(--muted);
+}
+
+.footer-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.footer-line nav {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    font: inherit;
+}
+
+.site-footer .stack-popover {
+    top: auto;
+    right: auto;
+    bottom: calc(100% + 0.75rem);
+    left: 0;
+}
+
+.footer-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin: 0.75rem 0 0;
+    font-size: var(--text-xs);
+    opacity: 0.75;
+}
+
+.site-footer a {
+    text-decoration: none;
+    color: var(--muted);
+}
+
+.site-footer a:hover {
+    color: var(--accent);
+}
+
+.footer-heart {
+    width: 0.875rem;
+    height: 0.875rem;
+    fill: currentColor;
+    color: var(--danger);
+    opacity: 0.5;
+    transition: opacity 150ms;
+}
+
+.footer-meta:hover .footer-heart {
+    opacity: 1;
+    animation: heart-pulse 1s ease-in-out infinite;
+}
+
+@keyframes heart-pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.3); }
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+
+/* green pulse on the box around a just-used copy button */
+@keyframes copy-glow {
+    0%, 100% { box-shadow: 0 0 0 0 transparent; }
+    35% {
+        box-shadow:
+            0 0 0 3px color-mix(in srgb, var(--success) 30%, transparent),
+            0 0 1.5rem color-mix(in srgb, var(--success) 40%, transparent);
+    }
+}
+
+:has(> .copied), :has(> .is-copied) {
+    animation: copy-glow 1.2s ease-in-out;
+}