create-shibumi 0.2.9 → 0.3.2

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

@@ -1,422 +0,0 @@
-/* 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;
-}

package/src/templates/web/src/app.ts

@@ -1,108 +0,0 @@
-import { Hono } from "hono";
-import { HTTPException } from "hono/http-exception";
-import { serveStatic } from "hono/bun";
-import { z } from "zod";
-
-// The exact response header set; test/app.test.ts asserts every entry on
-// success, error, API, and static responses. Change both together.
-export const SECURITY_HEADERS: Record<string, string> = {
-  "Content-Security-Policy":
-    "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'",
-  "X-Content-Type-Options": "nosniff",
-  "X-Frame-Options": "DENY",
-  "Referrer-Policy": "strict-origin-when-cross-origin",
-  "Permissions-Policy": "camera=(), geolocation=(), microphone=()",
-  "Cross-Origin-Opener-Policy": "same-origin",
-  "Cross-Origin-Resource-Policy": "same-origin",
-};
-
-function applyHeaders(res: Response): Response {
-  for (const [name, value] of Object.entries(SECURITY_HEADERS)) {
-    res.headers.set(name, value);
-  }
-  return res;
-}
-
-// Factory so tests can build an instance and add probe routes before the
-// router freezes on first dispatch.
-export function createApp(): Hono {
-  const app = new Hono();
-
-  app.use("*", async (c, next) => {
-    await next();
-    applyHeaders(c.res);
-  });
-
-  // Thrown errors bypass the middleware above (the exception unwinds past
-  // its post-next line), so the error handler applies the same set.
-  // Deliberate HTTP errors (framework middleware like CSRF throws
-  // HTTPException) keep their status; everything else is a logged 500.
-  app.onError((err, c) => {
-    if (err instanceof HTTPException) return applyHeaders(err.getResponse());
-    console.error(err);
-    return applyHeaders(c.text("Internal error", 500));
-  });
-
-  app.get("/healthz", (c) => c.json({ ok: true }));
-
-  const helloQuery = z.object({
-    name: z.string().min(1).max(100).optional(),
-  });
-
-  app.get("/api/hello", (c) => {
-    const parsed = helloQuery.safeParse(c.req.query());
-    if (!parsed.success) {
-      return c.json({ error: "Invalid query" }, 400);
-    }
-    return c.json({ hello: parsed.data.name ?? "world" });
-  });
-
-const page = `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Web app · shibumi</title>
-    <link rel="icon" type="image/svg+xml" href="/public/favicon.svg" />
-    <meta name="generator" content="create-shibumi (shibumistack.dev)" />
-    <link rel="stylesheet" href="/public/vendor/shibumi.css" />
-    <link rel="stylesheet" href="/public/style.css" />
-    <!-- app.js must load before Alpine so the alpine:init listener exists
-         when Alpine starts; both defer, so document order is execution order. -->
-    <script src="/public/app.js" defer></script>
-    <script src="/public/vendor/alpine-csp-3.16.2.min.js" defer></script>
-  </head>
-  <body>
-    <main class="scaffold">
-      <p class="masthead"><span class="masthead-mark">渋み</span> shibumi web</p>
-      <h1>Web app</h1>
-      <p class="lede">Hono serves the routes, Zod validates every input, and Alpine runs the client behavior. Deploy to your own server with one command.</p>
-      <section class="demo" x-data="counter" aria-label="Alpine counter demo">
-        <button x-on:click="inc" type="button">Count</button>
-        <output x-text="count">0</output>
-        <span class="demo-hint">client state without a build step</span>
-      </section>
-      <ul class="endpoints">
-        <li><a href="/api/hello?name=you"><code>GET /api/hello</code><span>query validated with Zod</span></a></li>
-        <li><a href="/healthz"><code>GET /healthz</code><span>the check every deploy waits for</span></a></li>
-      </ul>
-      <footer class="colophon">
-        <p>This page lives in <code>src/app.ts</code>. House rules for coding agents are in <code>agents.md</code>. Add features with <code>bun shi add email</code>.</p>
-        <p class="colophon-links"><a href="https://shibumistack.dev/docs" rel="noreferrer">shibumi docs</a> · <a href="https://server.shibumistack.dev/docs" rel="noreferrer">server docs</a> · <a href="https://shibumistack.dev/docs/cli/extensions" rel="noreferrer">extensions</a></p>
-      </footer>
-    </main>
-  </body>
-</html>
-`;
-
-  app.get("/", (c) => c.html(page));
-
-  // GET-only: static files must not answer mutation verbs.
-  app.get("/public/*", serveStatic({ root: "./" }));
-
-  app.notFound((c) => c.text("Not found", 404));
-
-  return app;
-}
-
-export const app = createApp();

package/src/templates/web/src/env.ts

@@ -1,21 +0,0 @@
-import { z } from "zod";
-
-// Validate the environment at the boundary; the app never reads process.env
-// directly. Add new variables here so misconfiguration fails at startup.
-const schema = z.object({
-  PORT: z.coerce.number().int().min(1).max(65535).default(3000),
-});
-
-export type Env = z.infer<typeof schema>;
-
-export function loadEnv(source: Record<string, string | undefined> = process.env): Env {
-  const parsed = schema.safeParse(source);
-  if (!parsed.success) {
-    console.error("Invalid environment:");
-    for (const issue of parsed.error.issues) {
-      console.error(`  ${issue.path.join(".")}: ${issue.message}`);
-    }
-    process.exit(1);
-  }
-  return parsed.data;
-}

package/src/templates/web/src/server.ts

@@ -1,23 +0,0 @@
-import { app } from "./app";
-import { loadEnv } from "./env";
-
-const env = loadEnv();
-
-const server = Bun.serve({
-  port: env.PORT,
-  // Cap request bodies so an unauthenticated client cannot exhaust memory
-  // before a route (or its rate limiter) runs. Raise it for large uploads.
-  maxRequestBodySize: 1024 * 1024,
-  fetch: app.fetch,
-});
-
-console.log(`Listening on http://localhost:${server.port}`);
-
-// Graceful shutdown: stop accepting connections, let in-flight requests
-// finish, then exit. The container runtime sends SIGTERM on replacement.
-async function shutdown(code: number): Promise<void> {
-  await server.stop();
-  process.exit(code);
-}
-process.on("SIGTERM", () => void shutdown(0));
-process.on("SIGINT", () => void shutdown(0));