@justai/cuts 0.39.0 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -22,7 +22,9 @@
     "./ConfirmSheet.astro": "./src/ConfirmSheet.astro",
     "./Sheet.astro": "./src/Sheet.astro",
     "./ground.css": "./src/ground.css",
-    "./FilePicker.astro": "./src/FilePicker.astro"
+    "./FilePicker.astro": "./src/FilePicker.astro",
+    "./ActionList.astro": "./src/ActionList.astro",
+    "./ActionRow.astro": "./src/ActionRow.astro"
   },
   "peerDependencies": {
     "astro": ">=5"

package/src/ActionList.astro

@@ -0,0 +1,68 @@
+---
+// THE GROUND rides with the list, same as every cut — law 1 is a file it imports, not a promise.
+import "./ground.css";
+/**
+ * <ActionList> — a group of verbs, in the shape a phone has taught everyone to read.
+ *
+ * The inset grouped list: one rounded card, hairline-separated rows, full width. It is what iOS
+ * uses for actions in Files, Photos, Mail and Settings, and it is here because a row of side-by-side
+ * buttons stops working at exactly the width this ecosystem designs for.
+ *
+ * ── USE ──────────────────────────────────────────────────────────────────────────────────────
+ *
+ *     <ActionList>
+ *       <ActionRow id="open" tone="accent" label="Open in qr"><svg slot="icon" …/></ActionRow>
+ *       <ActionRow id="rename" label="Rename"><svg slot="icon" …/></ActionRow>
+ *     </ActionList>
+ *     <ActionList>
+ *       <ActionRow id="delete" tone="danger" label="Delete"><svg slot="icon" …/></ActionRow>
+ *     </ActionList>
+ *
+ * TWO LISTS RATHER THAN ONE IS THE GRAMMAR, not a styling choice. A group break is what separates
+ * "things you might do" from "the door with no way back", and on a phone that gap is the only
+ * protection standing between a thumb and a delete.
+ *
+ * ── WHY IT IS A COMPONENT AND NOT A CLASS TO COPY ────────────────────────────────────────────
+ *
+ * The founder's framing, 2026-07-27: the ecosystem is being built as a mobile app that happens to
+ * live on the web, and reusable Apple-grade parts are how that survives contact with a hundred
+ * personas. A class name copied into each persona is the O(N) shape this fleet keeps ruling out —
+ * one bump here has to be able to reach every sheet that shows a verb.
+ */
+interface Props {
+  /** An optional group heading, as a phone's settings list has. Sentence case, no shouting. */
+  title?: string;
+  /** A line under the group, for the thing a person needs to know BEFORE choosing. */
+  note?: string;
+}
+const { title, note } = Astro.props;
+---
+
+<div class="jal-group">
+  {title && <h3 class="jal-title">{title}</h3>}
+  <div class="jal"><slot /></div>
+  {note && <p class="jal-note">{note}</p>}
+</div>
+
+<style>
+  .jal-group { display: flex; flex-direction: column; gap: 7px; }
+  /* Inset and grouped: the card is the group, and `overflow: hidden` is what lets a row's own
+     background reach the rounded corner instead of squaring it off on press. */
+  .jal {
+    display: flex;
+    flex-direction: column;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+  }
+  .jal-title {
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding-inline: 4px;
+  }
+  .jal-note { font-size: var(--fs-xs); color: var(--text-dim); padding-inline: 4px; line-height: 1.45; }
+</style>

package/src/ActionRow.astro

@@ -0,0 +1,123 @@
+---
+// THE GROUND rides with the row, same as every cut — law 1 is a file it imports, not a promise.
+import "./ground.css";
+/**
+ * <ActionRow> — one verb in an <ActionList>. A full-width row: icon, label, and room to be read.
+ *
+ * WHY IT IS A ROW AND NOT A BUTTON IN A LINE (founder, 2026-07-27). files' detail sheet put four
+ * buttons shoulder to shoulder and two of the four labels came out clipped — "Open i…", "Downl…".
+ * The founder named the feeling before the cause:
+ *
+ *     "kullanici mobile cozunurlukte calistigi icin ux deneyimini insanin icini daraltacak sekilde
+ *      tasarmamamiz gerekiyor … 4 adet butonu yan yana yaparak bu hissi bana verdin"
+ *
+ * The CSS was the confession: `text-overflow: ellipsis` on a control's own label means the layout
+ * had already lost the argument with the space it had. A phone column is ~480px; four equal
+ * controls with icons and words do not fit, and no amount of tightening makes them fit.
+ *
+ * iOS answers this the same way everywhere it matters — Files, Photos, Mail, Settings: verbs live
+ * in an INSET GROUPED LIST. Full width each, never truncated, and the list grows without a
+ * redesign, which is the property that actually decides it here: this sheet is about to gain
+ * Share, versions and restore.
+ *
+ * ── TONE, AND WHY DESTRUCTIVE IS NOT JUST A COLOUR ───────────────────────────────────────────
+ *
+ * `accent` is the reason the sheet is open. `danger` is a door you cannot walk back through, and it
+ * belongs in a group of its OWN — a row's-width of separation is the cheapest protection there is,
+ * and it is why Delete never sits shoulder to shoulder with Rename in a well-made sheet.
+ */
+interface Props {
+  /** DOM id, so a consumer wires it exactly as it wired a button. */
+  id?: string;
+  /** The verb. Written in full — this row has the width for it. */
+  label: string;
+  /** `plain` (default) · `accent` for the reason you came · `danger` for the door with no way back. */
+  tone?: "plain" | "accent" | "danger";
+  /** A value or hint shown at the trailing edge — a size, a count, a chosen option. */
+  detail?: string;
+  /** Start hidden; a consumer reveals it when it applies (files does this for "Open in …"). */
+  hidden?: boolean;
+  // queries: translate an action row · data-i on ActionRow · setting textContent wiped the icon
+  //
+  // THE LABEL IS ADDRESSABLE, and that is not a convenience.
+  //
+  // A route-less surface translates in the browser, which means something writes `textContent` onto
+  // the element that holds a word. Point that at the ROW and it erases the icon along with the
+  // label, because the icon is a child of the same button — a whole class of bug that ships looking
+  // like "the icons disappeared in Turkish".
+  //
+  // So the row exposes its label two ways: `i18n` puts the key on the label span for a dictionary
+  // sweep, and the span carries `<id>-label` so a consumer with one string to set can address it
+  // without knowing this component's internals.
+  /** Key for a runtime translator — lands on the LABEL, never on the row. */
+  i18n?: string;
+}
+const { id, label, tone = "plain", detail, hidden, i18n } = Astro.props;
+---
+
+<button class:list={["jal-row", tone !== "plain" && `is-${tone}`]} type="button" id={id} hidden={hidden}>
+  <span class="jal-ico" aria-hidden="true"><slot name="icon" /></span>
+  <span class="jal-label" id={id ? `${id}-label` : undefined} data-i={i18n}>{label}</span>
+  {detail && <span class="jal-detail">{detail}</span>}
+</button>
+
+<style>
+  /* A ROW, not a button in a line: it takes the full width it is given, so the label is never the
+     thing that has to shrink. The 44px floor is the one number iOS never moves — it is a fingertip,
+     and `min-height` rather than a fixed height so a reader who raised their text size gets a
+     taller row instead of a clipped one. */
+  .jal-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    min-height: 44px;
+    padding: 11px 14px;
+    border: 0;
+    background: none;
+    color: var(--text);
+    font: inherit;
+    font-size: var(--fs-sm);
+    font-weight: 500;
+    text-align: start;
+    cursor: pointer;
+    /* The separator lives on the row and is removed from the last one by the list — so a row can be
+       hidden or revealed without leaving a hairline hanging under nothing. */
+    border-block-end: 1px solid var(--border);
+    transition: background 0.15s;
+  }
+  .jal-row:last-child,
+  .jal-row[hidden] + .jal-row:last-child { border-block-end: 0; }
+  .jal-row:active { background: color-mix(in srgb, var(--text) 8%, transparent); }
+  @media (hover: hover) {
+    .jal-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
+  }
+  .jal-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+  .jal-ico {
+    display: inline-flex;
+    flex: none;
+    color: var(--text-dim);
+  }
+  /* The glyph is cut to a fixed box, so it is sized in px on purpose — it is a mark, not reading
+     text, and the box it sits in is a hand size rather than a type size. */
+  .jal-ico :global(svg) { width: 20px; height: 20px; display: block; }
+
+  /* The label takes the room. This is the whole point of the component: nothing here clips. */
+  .jal-label { flex: 1; min-width: 0; }
+  .jal-detail { color: var(--text-dim); font-size: var(--fs-xs); flex: none; }
+
+  .jal-row.is-accent { color: var(--accent); font-weight: 600; }
+  .jal-row.is-accent .jal-ico { color: var(--accent); }
+  .jal-row.is-danger { color: var(--danger); }
+  .jal-row.is-danger .jal-ico { color: var(--danger); }
+  .jal-row.is-danger:active { background: color-mix(in srgb, var(--danger) 12%, transparent); }
+  @media (hover: hover) {
+    .jal-row.is-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
+  }
+
+  .jal-row[disabled] { opacity: 0.4; cursor: default; }
+  /* A class-set display beats the user agent's `[hidden] { display: none }` — that has bitten this
+     ecosystem twice already, in this very sheet. Said again where the display is set. */
+  .jal-row[hidden] { display: none !important; }
+</style>

package/src/Toolbar.astro

@@ -32,13 +32,19 @@ interface Props {
   profileLabel: string;  // aria/title for the Profile nav icon
   kernelLabel: string;   // aria/title for the Kernel (app) nav icon
   postsLabel: string;    // aria/title for the Posts nav icon
+  // The persona's own files. ON by default — the edge mounts `/files` on every persona host, so a
+  // persona that had to opt in would be a persona whose files exist and cannot be found. The label
+  // has an ecosystem default because a component brings its own ground: a consumer that has not
+  // translated it yet gets a working, named control rather than an unlabelled icon.
+  files?: boolean;
+  filesLabel?: string;
   // The home affordance points at app.zone, so the two apexes suppress it: app.zone IS that
   // destination, and justai.pro is above it (sending the parent "home" to a child platform is
   // the wrong direction). Every other persona keeps it.
   home?: boolean;
 }
 import BackToZone from "./BackToZone.astro";
-const { sectionsLabel, profileLabel, kernelLabel, postsLabel, home = true } = Astro.props;
+const { sectionsLabel, profileLabel, kernelLabel, postsLabel, home = true, files = true, filesLabel = "Files" } = Astro.props;
 ---
 
 <header class="toolbar">
@@ -57,6 +63,29 @@ const { sectionsLabel, profileLabel, kernelLabel, postsLabel, home = true } = As
         </a>
         <slot name="navExtra" />
       </nav>
+      {files && (
+        // queries: files icon in the toolbar · how do I reach my files from a persona · the folder
+        //          in the toolbar · why is files not in the section nav
+        //
+        // THE PERSONA'S FILES, ONE TAP FROM ANYWHERE IN IT.
+        //
+        // Until this, the only way into `<persona>/files` was to be asked for a file — the room
+        // where your things live could be entered only by a persona's invitation, which is exactly
+        // backwards for a room that is yours.
+        //
+        // OUTSIDE the sections nav, and deliberately: profile, kernel and posts are parts of THIS
+        // page and their links are fragments. `/files` is a different document — a place, not a
+        // section — and putting a navigation to elsewhere inside `<nav aria-label="sections">`
+        // would tell a screen reader it is one of them. Same reasoning the `leftExtra` slot below
+        // already carries, which is why this sits beside it rather than in the group above.
+        //
+        // ON BY DEFAULT, because the edge mounts `/files` on EVERY persona host: a persona that had
+        // to opt in would be a persona whose files exist and cannot be found. One bump here reaches
+        // the whole fleet, which is the only shape that survives a thousand of them.
+        <a class="tb-nav tb-files" id="navFiles" href="/files" aria-label={filesLabel} title={filesLabel}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A1.5 1.5 0 0 1 4.5 6h4L11 8.5h8.5A1.5 1.5 0 0 1 21 10v7a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17z"/></svg>
+        </a>
+      )}
       <!-- beside the section nav, but deliberately OUTSIDE it: a link that is not a section of this
            page (justai.pro carries app.zone's mark here). Keeping it out of <nav aria-label=sections>
            is the a11y half of the reason it is its own slot. -->