@divlet/web 0.0.1 → 0.0.2

package/dist/board.css

@@ -630,7 +630,9 @@ body.bar-dragging { user-select: none; }
 /* Anchored to the top so a longer message or recovery box grows downward and never moves the controls above it. */
 #project { place-items: start center; padding-top: min(calc(var(--vh) * 0.14), 120px); }
 #project .dialog-foot { align-items: flex-start; padding-bottom: 0; }
-.project-go { height: 32px; min-width: 156px; padding: 0 14px; }
+.project-go { display: inline-grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 32px; min-width: min(156px, 100%); max-width: 100%; padding: 0 14px; }
+.project-go > span { grid-area: 1 / 1; min-width: 0; }
+.project-go-sizer { visibility: hidden; pointer-events: none; }
 .project-go:disabled { opacity: var(--disabled); cursor: default; }
 /* Read-only external-file recovery (picker, launcher and diagnostics). */
 .project-recovery:empty, .project-revision:empty { display: none; }

package/dist/lib/project.js

@@ -47,27 +47,29 @@ const clearRecovery = () => { failure = ''; recovery.replaceChildren(); };
 let input;
 let status;
 let primary;
+let primaryLabel;
+const actionLabels = { open: 'Open', save: 'Save here', project: 'Open project', collection: 'Open collection', create: 'Create project here', working: 'Working…' };
 
 export const isOpen = () => !scrim.hidden;
 export const canShowCopy = () => !!store.state?.project?.capabilities?.saveAs;
 
 function label() {
   const info = picker?.state.info;
-  if (!info) return { text: mode === 'open' ? 'Open' : 'Save here', ok: false, note: '' };
+  if (!info) return { text: mode === 'open' ? actionLabels.open : actionLabels.save, ok: false, note: '' };
   if (mode === 'open') {
-    if (info.kind === 'project') return { text: 'Open project', ok: true, note: 'A project is here.' };
-    if (info.kind === 'collection') return { text: 'Open collection', ok: true, note: `${info.projects} project${info.projects === 1 ? '' : 's'} here — pick one on the next page.` };
-    if (info.kind === 'new') return { text: 'Create project here', ok: true, note: 'No project in this folder yet.' };
-    return { text: 'Open project', ok: false, note: 'This folder does not exist.' };
+    if (info.kind === 'project') return { text: actionLabels.project, ok: true, note: 'A project is here.' };
+    if (info.kind === 'collection') return { text: actionLabels.collection, ok: true, note: `${info.projects} project${info.projects === 1 ? '' : 's'} here — pick one on the next page.` };
+    if (info.kind === 'new') return { text: actionLabels.create, ok: true, note: 'No project in this folder yet.' };
+    return { text: actionLabels.project, ok: false, note: 'This folder does not exist.' };
   }
-  if (info.kind === 'project' || info.kind === 'collection') return { text: 'Save here', ok: false, note: 'This folder already holds projects. Choose a new or empty folder.' };
-  if (info.kind === 'missing') return { text: 'Save here', ok: true, note: `Will create ${info.missing}.` };
-  return { text: 'Save here', ok: true, note: 'The folder must be empty.' };
+  if (info.kind === 'project' || info.kind === 'collection') return { text: actionLabels.save, ok: false, note: 'This folder already holds projects. Choose a new or empty folder.' };
+  if (info.kind === 'missing') return { text: actionLabels.save, ok: true, note: `Will create ${info.missing}.` };
+  return { text: actionLabels.save, ok: true, note: 'The folder must be empty.' };
 }
 
 function paintControls() {
   const state = label();
-  primary.textContent = busy ? 'Working…' : state.text;
+  primaryLabel.textContent = busy ? actionLabels.working : state.text;
   // Keep keyboard focus inside the modal when pending work disables a focused control.
   const focused = document.activeElement;
   if (focused === primary && (busy || !state.ok)) input.focus({ preventScroll: true });
@@ -127,6 +129,14 @@ function render() {
   status = el('span', 'caption project-status');
   status.setAttribute('role', 'status');
   primary = el('button', 'cta project-go');
+  primaryLabel = el('span', 'project-go-label');
+  primary.append(primaryLabel);
+  // All state labels share one grid cell, reserving real font-dependent width without another accessible control.
+  for (const text of Object.values(actionLabels)) {
+    const sizer = el('span', 'project-go-sizer', text);
+    sizer.setAttribute('aria-hidden', 'true');
+    primary.append(sizer);
+  }
   primary.type = 'button';
   primary.addEventListener('click', submit);
   const foot = el('div', 'dialog-foot');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divlet/web",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "The divlet browser board, static client assets and transport-free host ports",
   "type": "module",
   "license": "MIT",