@valancex/cli 0.12.0 → 0.14.0

package/templates/multi/src/desktop/layout.mprx

@@ -0,0 +1,21 @@
+<column>
+  <row>
+    <link href={home}>{site}</link>
+    <button on.click={toggleNavigation()}>{#if navigation}Hide pages{:else}Show pages{/if}</button>
+  </row>
+  {#if navigation}
+    {#each sections as s (s.id)}
+      <column>
+        {#if s.title != ""}<text>{s.title}</text>{/if}
+        <list ordered={false}>
+          {#each s.items as n (n.id)}<listitem><link href={n.href}>{n.label}</link></listitem>{/each}
+        </list>
+      </column>
+    {/each}
+  {/if}
+  <blocks items={blocks} />
+  <row>
+    {#if prev.href != ""}<link href={prev.href}>{prev.label}</link>{/if}
+    {#if next.href != ""}<link href={next.href}>{next.label}</link>{/if}
+  </row>
+</column>

package/templates/multi/src/main.ts

@@ -0,0 +1,23 @@
+import { component, defineApp, field } from "@valancex/common";
+import { Schema } from "effect";
+import desktopLayout from "./desktop/layout.mprx";
+import themeToggle from "./web/theme-toggle.js";
+import webLayout from "./web/layout.mprx";
+
+// One application, built for each target the project has. What is shared is written once, here: the state (each field is its type and its default, together) and the commands, and the content in
+// content/. What differs is the templates, because each target draws with its own vocabulary: `targets` gives each its layout and its components. Nothing under src/ is part of the application
+// unless it is imported here and listed.
+export default defineApp({
+  state: {
+    theme: field(Schema.Literal("light", "dark"), "light"), // the web layout's
+    navigation: field(Schema.Boolean, true), // the desktop layout's
+  },
+  commands: (command) => ({
+    toggleTheme: command((state) => ({ ...state, theme: state.theme === "light" ? "dark" : "light" })),
+    toggleNavigation: command((state) => ({ ...state, navigation: !state.navigation })),
+  }),
+  targets: {
+    web: { layout: component(webLayout), components: [themeToggle] },
+    desktop: { layout: component(desktopLayout) },
+  },
+});

package/templates/multi/src/web/layout.mprx

@@ -0,0 +1,27 @@
+<shell class="layout" theme={theme}>
+  <header class="bar">
+    <link class="brand" href={home} current="false">{site}</link>
+    <theme-toggle theme={theme} on.toggle={toggleTheme()} />
+  </header>
+  <div class="frame">
+    <nav class="sidebar" label="Pages">
+      {#each sections as s (s.id)}
+        <section>
+          {#if s.title != ""}<paragraph class="nav-title">{s.title}</paragraph>{/if}
+          <list class="nav-list">
+            {#each s.items as n (n.id)}
+              <listitem><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></listitem>
+            {/each}
+          </list>
+        </section>
+      {/each}
+    </nav>
+    <main id="content" tabindex="-1">
+      <blocks items={blocks} />
+      <nav class="pager" label="Previous and next page">
+        {#if prev.href != ""}<link class="pager-link" href={prev.href} current="false">{prev.label}</link>{/if}
+        {#if next.href != ""}<link class="pager-link" href={next.href} current="false">{next.label}</link>{/if}
+      </nav>
+    </main>
+  </div>
+</shell>

package/templates/multi/src/web/styles.css

@@ -0,0 +1,28 @@
+:root { --bg: #fff; --fg: #1d2330; --muted: #5c6578; --line: #e3e6ee; --accent: #5b3fd6; --code: #f4f5f9; }
+[data-theme="dark"] { --bg: #12141b; --fg: #e8eaf1; --muted: #9aa3b8; --line: #272b38; --accent: #a78bfa; --code: #1b1e29; }
+
+* { box-sizing: border-box; }
+body { margin: 0; font: 16px/1.6 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
+.layout { min-height: 100vh; background: var(--bg); color: var(--fg); }
+
+.bar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--line); }
+.brand { font-weight: 700; color: var(--fg); text-decoration: none; }
+.theme-toggle { font: inherit; padding: 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; }
+
+.frame { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
+.sidebar { font-size: 0.95rem; }
+.nav-title { margin: 1rem 0 0.25rem; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
+.nav-list { list-style: none; margin: 0; padding: 0; }
+.nav-link { display: block; padding: 0.15rem 0; color: var(--fg); text-decoration: none; }
+.nav-link[aria-current="page"] { color: var(--accent); font-weight: 600; }
+
+main { min-width: 0; }
+main h1 { margin-top: 0; }
+a { color: var(--accent); }
+.code { padding: 1rem; overflow-x: auto; background: var(--code); border-radius: 0.5rem; }
+code { font-family: ui-monospace, monospace; font-size: 0.9em; }
+.quote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
+.picture { max-width: 100%; }
+.pager { display: flex; justify-content: space-between; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
+
+@media (max-width: 40rem) { .frame { grid-template-columns: 1fr; } }

package/templates/multi/src/web/theme-toggle.mprx

@@ -0,0 +1 @@
+<button class="theme-toggle" pressed={theme == "dark" ? "true" : "false"} on.click={toggle()}>{theme == "dark" ? "Light" : "Dark"}</button>

package/templates/multi/src/web/theme-toggle.ts

@@ -0,0 +1,10 @@
+import { component } from "@valancex/common";
+import { Schema } from "effect";
+import template from "./theme-toggle.mprx";
+
+// The interface of `<theme-toggle>`, stated once, where it is defined: what the template reads (`theme`) and what it raises (`toggle`, which carries nothing). Whoever uses it names only that
+// they use it. `.valance/templates.d.ts` gives the template its keys as a type, so a contract that disagrees with the template is an error in the editor.
+export default component(template, {
+  props: { theme: Schema.Literal("light", "dark") },
+  events: { toggle: Schema.Void },
+});

package/templates/web/content/guide/getting-started.md

@@ -21,7 +21,7 @@ Open the address `vlx dev` prints. Edit this file and save: the page reloads wit
 pnpm build
 ```
 
-The finished site is in `dist/`. Anything that serves files can host it.
+The finished site is in `dist/web/`. Anything that serves files can host it.
 
 ## Where things are
 

package/templates/web/gitignore

@@ -1,4 +1,7 @@
 node_modules
 dist
 .valance
+# session recordings (vlx dev --record) hold what was typed: never commit them
+.valance/sessions/
+*.session.jsonl
 .work*

package/templates/web/src/layout.mprx

@@ -7,10 +7,10 @@
     <nav class="sidebar" label="Pages">
       {#each sections as s (s.id)}
         <section>
-          {#if s.title != ""}<para class="nav-title">{s.title}</para>{/if}
+          {#if s.title != ""}<paragraph class="nav-title">{s.title}</paragraph>{/if}
           <list class="nav-list">
             {#each s.items as n (n.id)}
-              <item><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></item>
+              <listitem><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></listitem>
             {/each}
           </list>
         </section>

package/views/block.mprx

@@ -1,3 +1,3 @@
 <mesh-fragment>
-  {#if b.kind == "heading"}<heading level={b.level} anchor={b.anchor} spans={b.spans} />{:else if b.kind == "list"}<list-block ordered={b.ordered} items={b.items} />{:else if b.kind == "code"}<pre class="code" tabindex="0"><code>{b.text}</code></pre>{:else if b.kind == "quote"}<quote class="quote"><runs spans={b.spans} /></quote>{:else if b.kind == "image"}<image class="picture" src={b.src} alt={b.alt} loading="lazy" />{:else}<para class="prose"><runs spans={b.spans} /></para>{/if}
+  {#if b.kind == "heading"}<heading-block level={b.level} anchor={b.anchor} spans={b.spans} />{:else if b.kind == "list"}<list-block ordered={b.ordered} items={b.items} />{:else if b.kind == "code"}<pre class="code" tabindex="0"><code>{b.text}</code></pre>{:else if b.kind == "quote"}<blockquote class="quote"><runs spans={b.spans} /></blockquote>{:else if b.kind == "image"}<image class="picture" src={b.src} alt={b.alt} loading="lazy" />{:else}<paragraph class="prose"><runs spans={b.spans} /></paragraph>{/if}
 </mesh-fragment>

package/views/layout.mprx

@@ -6,10 +6,10 @@
     <nav class="sidebar" label="Pages">
       {#each sections as s (s.id)}
         <section>
-          {#if s.title != ""}<para class="nav-title">{s.title}</para>{/if}
+          {#if s.title != ""}<paragraph class="nav-title">{s.title}</paragraph>{/if}
           <list class="nav-list">
             {#each s.items as n (n.id)}
-              <item><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></item>
+              <listitem><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></listitem>
             {/each}
           </list>
         </section>

package/views/list-items.mprx

@@ -1,3 +1,3 @@
 <mesh-fragment>
-  {#each items as i (i.id)}<item><runs spans={i.spans} /></item>{/each}
+  {#each items as i (i.id)}<listitem><runs spans={i.spans} /></listitem>{/each}
 </mesh-fragment>

package/views-desktop/block.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#if b.kind == "heading"}<heading level={b.level}><runs spans={b.spans} /></heading>{:else if b.kind == "list"}<list-block ordered={b.ordered} items={b.items} />{:else if b.kind == "code"}<code>{b.text}</code>{:else if b.kind == "quote"}<blockquote><runs spans={b.spans} /></blockquote>{:else if b.kind == "image"}<image src={b.src} label={b.alt} />{:else}<paragraph><runs spans={b.spans} /></paragraph>{/if}
+</mesh-fragment>

package/views-desktop/blocks.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#each items as b (b.id)}<block b={b} />{/each}
+</mesh-fragment>

package/views-desktop/inline.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#if kind == "strong"}<strong>{text}</strong>{:else if kind == "emphasis"}<emphasis>{text}</emphasis>{:else if kind == "code"}<code>{text}</code>{:else if kind == "link"}<link href={href}>{text}</link>{:else}<mesh-fragment>{text}</mesh-fragment>{/if}
+</mesh-fragment>

package/views-desktop/layout.mprx

@@ -0,0 +1,20 @@
+<column>
+  <row>
+    <button disabled={!canGoBack} on.click={back()}>Back</button>
+    <button disabled={!canGoForward} on.click={forward()}>Forward</button>
+    <link href={home}>{site}</link>
+  </row>
+  {#each sections as s (s.id)}
+    <column>
+      {#if s.title != ""}<text>{s.title}</text>{/if}
+      <list ordered={false}>
+        {#each s.items as n (n.id)}<listitem><link href={n.href}>{n.label}</link></listitem>{/each}
+      </list>
+    </column>
+  {/each}
+  <blocks items={blocks} />
+  <row>
+    {#if prev.href != ""}<link href={prev.href}>{prev.label}</link>{/if}
+    {#if next.href != ""}<link href={next.href}>{next.label}</link>{/if}
+  </row>
+</column>

package/views-desktop/list-block.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  <list ordered={ordered}><list-items items={items} /></list>
+</mesh-fragment>

package/views-desktop/list-items.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#each items as i (i.id)}<listitem><runs spans={i.spans} /></listitem>{/each}
+</mesh-fragment>

package/views-desktop/runs.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#each spans as s (s.id)}<inline kind={s.kind} text={s.text} href={s.href} />{/each}
+</mesh-fragment>