vintage-frames 0.18.0 → 0.19.0

package/README.md

@@ -25,7 +25,7 @@ There is no need to import a stylesheet. The components carry their styles with
 
 ## The shell
 
-`vintage-frames/shell` is an experimental second entry point that runs applications over one desktop: a window manager, a menu bar that shows the front application's menus, and a Finder with folders, filing, Clean Up and the Trash.
+`vintage-frames/shell` is an experimental second entry point that runs applications over one desktop: a window manager, a menu bar that shows the front application's menus, and a Finder with folders, aliases, filing, Clean Up and the Trash. A System Folder's contents set the Apple menu and what opens at startup.
 
 ```ts
 import 'vintage-frames'

package/custom-elements.json

@@ -5681,6 +5681,17 @@
               "attribute": "open",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "alias",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The icon is an alias, an item standing for another: its name is set in\nitalics, the body face's own, and the plate widens to the slant's last\npixel.",
+              "attribute": "alias",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "movable",
@@ -6272,6 +6283,25 @@
               },
               "description": "Size the plate to a whole, EVEN number of system pixels.\n\nThis is the whole alignment argument, so it is worth stating plainly. The\nframe centers two things over one axis — the art cell and the name — and a\ncentered child's offset is `(box − child) / 2`. That is a whole number\nexactly when the box and the child have the SAME PARITY. The cell is 32 or\n16 and a declared `width` is required even, so if the plate is even too,\nevery offset in the component is whole by construction: no correction, no\nsnapping, nothing for the compositor to round.\n\nThe text is measured rather than the plate, with a Range over its own\ncontents — the plate already carries the width this computed last time, so\nreading the element back would just return it. The measurement is in\nsystem px and so is scale-invariant: the same name is the same number of\nart pixels wide at every display density, which is why nothing here\nre-runs when the scale changes.\n\nRounding UP to even (never down) means the plate never clips the run it\nwas measured from; the leftover is at most one system pixel of extra plate\nafter the text, since the embedded faces advance in whole pixels and only\na fallback face measures fractionally."
             },
+            {
+              "kind": "method",
+              "name": "#lean",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "plate",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "How far an alias's italic name runs past its advance, in whole system px:\nthe slant leans the tops of the last letters right, by up to 5. Read off\nthe glyphs' ink, in a canvas set in the plate's own font."
+            },
             {
               "kind": "field",
               "name": "#plateWidthCss",
@@ -6769,6 +6799,15 @@
               "description": "The icon's window is on screen, so the art paints as the Finder's open\nghost — outline held, interior re-filled with the kit's loose dither —\nderived in the client from the slotted art itself (see the class doc).\nSet it when handling `vf-open`, clear it when the window goes away.\nSelection inverts the ghost exactly as it inverts the art.",
               "fieldName": "open"
             },
+            {
+              "name": "alias",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The icon is an alias, an item standing for another: its name is set in\nitalics, the body face's own, and the plate widens to the slant's last\npixel.",
+              "fieldName": "alias"
+            },
             {
               "name": "movable",
               "type": {

package/dist/build/app-file.d.ts

@@ -6,8 +6,8 @@
 import type { AppManifest } from '../shell/app-file.js';
 /** What {@link packApp} packs. */
 export interface PackAppInput {
-    /** The manifest's fields but its format and icon, which the packer fills in. */
-    manifest: Omit<AppManifest, 'format' | 'icon'>;
+    /** The manifest's fields but its format, app API and icon, which the packer fills in. */
+    manifest: Omit<AppManifest, 'format' | 'api' | 'icon'>;
     /** The icon's PNG, 32 × 32. */
     icon: Uint8Array;
     /** The application's code: one ES module whose default export is its factory. */

package/dist/build/app-file.js

@@ -24,6 +24,7 @@ async function p({ manifest: e, icon: t, code: n, artwork: r }) {
 	let i = {
 		...e,
 		format: 1,
+		api: 2,
 		icon: `data:image/png;base64,${m(t)}`
 	};
 	return f(await l({

package/dist/build/plugins.d.ts

@@ -32,8 +32,8 @@ export interface AppFileOptions {
 export declare function appFile(options: AppFileOptions): Plugin;
 /**
  * Builds app files into a site. An import of `*.png?app` reads the file and
- * refuses one that isn't an app file, or whose `requires` this kit's
- * version doesn't meet. Its default export is the application's factory,
+ * refuses one that isn't an app file, or one this kit doesn't run
+ * (`appRuns`). Its default export is the application's factory,
  * its definition given the manifest's icon, and `manifest` is the manifest.
  * The code imports the kit by name, so the page keeps one copy of it. A new
  * file reloads the dev server's page.

package/dist/build/plugins.js

@@ -1,41 +1,41 @@
-import { inspectAppFile as e, isVersion as t, satisfies as n } from "../shell/app-file.js";
-import { VERSION as r } from "../shell/version.js";
-import { packApp as i } from "./app-file.js";
-import { mkdir as a, readFile as o, writeFile as s } from "node:fs/promises";
-import { join as c, relative as l, resolve as u } from "node:path";
+import { VERSION as e } from "../shell/version.js";
+import { appRuns as t, inspectAppFile as n, isVersion as r, satisfies as i } from "../shell/app-file.js";
+import { packApp as a } from "./app-file.js";
+import { mkdir as o, readFile as s, writeFile as c } from "node:fs/promises";
+import { join as l, relative as u, resolve as d } from "node:path";
 //#region src/build/plugins.ts
-var d = [
+var f = [
 	"vintage-frames",
 	"vintage-frames/shell",
 	"vintage-frames/shell/pure"
-], f = "app-code";
-function p(e) {
+], p = "app-code";
+function m(e) {
 	let t = e.match(/(?<=[\\/]node_modules[\\/])(?:@[^\\/]+[\\/])?[^\\/]+/g)?.at(-1)?.replace("\\", "/");
 	return t === "vintage-frames" ? "a copy of vintage-frames" : t && /^(?:lit|lit-html|lit-element|@lit\/.+|@lit-labs\/.+)$/.test(t) ? `Lit (${t})` : null;
 }
-async function m(e) {
-	let n = JSON.parse(await o(c(e, "package.json"), "utf8")), i = n.devDependencies?.["vintage-frames"] ?? n.dependencies?.["vintage-frames"];
+async function h(t) {
+	let n = JSON.parse(await s(l(t, "package.json"), "utf8")), i = n.devDependencies?.["vintage-frames"] ?? n.dependencies?.["vintage-frames"];
 	if (typeof i != "string") throw Error("package.json has no vintage-frames dev dependency");
-	if (!i.startsWith("^") || !t(i.slice(1))) throw Error(`package.json's vintage-frames range is "${i}", and an app file requires a caret range: ^${r}`);
+	if (!i.startsWith("^") || !r(i.slice(1))) throw Error(`package.json's vintage-frames range is "${i}", and an app file requires a caret range: ^${e}`);
 	return i;
 }
-function h(e) {
-	let { app: l, entry: f, icon: h, artwork: g, copyTo: _ } = e;
+function g(t) {
+	let { app: n, entry: u, icon: p, artwork: g, copyTo: _ } = t;
 	for (let e of [
 		"id",
 		"name",
 		"version",
 		"author"
-	]) if (typeof l?.[e] != "string" || !l[e]) throw Error(`vintage-frames appFile(): app.${e} is missing`);
-	if (!t(l.version)) throw Error(`vintage-frames appFile(): app.version, ${l.version}, is not a version`);
-	if (!f || !h) throw Error(`vintage-frames appFile(): ${f ? "icon" : "entry"} is missing`);
-	let v = `${l.name.replace(/[\\/:*?"<>|]/g, "-")}.png`, y = "", b = null;
+	]) if (typeof n?.[e] != "string" || !n[e]) throw Error(`vintage-frames appFile(): app.${e} is missing`);
+	if (!r(n.version)) throw Error(`vintage-frames appFile(): app.version, ${n.version}, is not a version`);
+	if (!u || !p) throw Error(`vintage-frames appFile(): ${u ? "icon" : "entry"} is missing`);
+	let v = `${n.name.replace(/[\\/:*?"<>|]/g, "-")}.png`, y = "", b = null;
 	return {
 		name: "vintage-frames:app-file",
 		apply: "build",
 		config: () => ({ build: {
 			lib: {
-				entry: f,
+				entry: u,
 				formats: ["es"],
 				fileName: "app"
 			},
@@ -50,44 +50,44 @@ function h(e) {
 		},
 		buildStart() {
 			for (let e of [
-				h,
+				p,
 				g,
 				"package.json"
-			]) e && this.addWatchFile(u(y, e));
+			]) e && this.addWatchFile(d(y, e));
 		},
 		generateBundle: {
 			order: "post",
-			async handler(e, t) {
-				let a = Object.values(t), s = a.filter((e) => e.type === "chunk"), c = a.filter((e) => e.type === "asset").map((e) => e.fileName);
-				c.length && this.error(`${l.name} emits ${c.join(", ")} beside its code, and an app file holds one module: no CSS import, no source map file, its art inlined.`);
-				let [f] = s;
-				(!f || s.length > 1) && this.error(`${l.name} builds to ${s.length} modules, and an app file holds one.`);
-				for (let e of Object.keys(f.modules)) {
-					let t = p(e);
-					t && this.error(`${l.name} bundles ${t}. It composes the page's kit and brings none of its own.`);
+			async handler(t, r) {
+				let o = Object.values(r), c = o.filter((e) => e.type === "chunk"), l = o.filter((e) => e.type === "asset").map((e) => e.fileName);
+				l.length && this.error(`${n.name} emits ${l.join(", ")} beside its code, and an app file holds one module: no CSS import, no source map file, its art inlined.`);
+				let [u] = c;
+				(!u || c.length > 1) && this.error(`${n.name} builds to ${c.length} modules, and an app file holds one.`);
+				for (let e of Object.keys(u.modules)) {
+					let t = m(e);
+					t && this.error(`${n.name} bundles ${t}. It composes the page's kit and brings none of its own.`);
 				}
-				let _ = [...f.imports, ...f.dynamicImports].filter((e) => !d.includes(e));
-				_.length && this.error(`${l.name} imports ${_.join(", ")}. An application imports ${d.join(", ")} and its own files.`);
+				let _ = [...u.imports, ...u.dynamicImports].filter((e) => !f.includes(e));
+				_.length && this.error(`${n.name} imports ${_.join(", ")}. An application imports ${f.join(", ")} and its own files.`);
 				try {
-					let e = await m(y);
-					if (!n("0.18.0", e)) throw Error(`package.json requires vintage-frames ${e}, and the build is on ${r}: move the range`);
-					b = await i({
+					let t = await h(y);
+					if (!i("0.19.0", t)) throw Error(`package.json requires vintage-frames ${t}, and the build is on ${e}: move the range`);
+					b = await a({
 						manifest: {
-							id: l.id,
-							name: l.name,
-							version: l.version,
-							requires: e,
-							author: l.author,
-							description: l.description
+							id: n.id,
+							name: n.name,
+							version: n.version,
+							requires: t,
+							author: n.author,
+							description: n.description
 						},
-						icon: new Uint8Array(await o(u(y, h))),
-						code: f.code,
-						artwork: g ? new Uint8Array(await o(u(y, g))) : void 0
+						icon: new Uint8Array(await s(d(y, p))),
+						code: u.code,
+						artwork: g ? new Uint8Array(await s(d(y, g))) : void 0
 					});
 				} catch (e) {
-					this.error(`${l.name}: ${e.message}`);
+					this.error(`${n.name}: ${e.message}`);
 				}
-				delete t[f.fileName], this.emitFile({
+				delete r[u.fileName], this.emitFile({
 					type: "asset",
 					fileName: v,
 					source: b
@@ -96,31 +96,34 @@ function h(e) {
 		},
 		async writeBundle() {
 			if (!_ || !b) return;
-			let e = u(y, _);
-			await a(e, { recursive: !0 }), await s(c(e, v), b);
+			let e = d(y, _);
+			await o(e, { recursive: !0 }), await c(l(e, v), b);
 		}
 	};
 }
-function g() {
-	let t = "";
+function _(t) {
+	return t.api === void 0 ? `requires vintage-frames ${t.requires}, and this site has ${e}` : `is built for app API ${t.api}, and this site's kit runs app API 2`;
+}
+function v() {
+	let r = "";
 	return {
 		name: "vintage-frames:app-files",
 		enforce: "pre",
 		configResolved(e) {
-			t = e.root;
+			r = e.root;
 		},
 		async load(i) {
 			let a = i.indexOf("?");
 			if (a < 0) return null;
-			let s = i.slice(0, a), c = new URLSearchParams(i.slice(a + 1));
-			if (!s.endsWith(".png") || !(c.has("app") || c.has(f))) return null;
-			this.addWatchFile(s);
-			let u = l(t, s), d = await e(new Uint8Array(await o(s)));
-			typeof d == "string" && this.error(`${u} is not an app file: ${d}.`);
-			let { manifest: p, code: m } = d;
-			return c.has(f) ? m : (n("0.18.0", p.requires) || this.error(`${u}: ${p.name} ${p.version} requires vintage-frames ${p.requires}, and this site has ${r}. Build ${p.name} on ${r} and copy its app file in.`), [
-				`import factory from ${JSON.stringify(`${s}?${f}`)}`,
-				`export const manifest = ${JSON.stringify(p)}`,
+			let o = i.slice(0, a), c = new URLSearchParams(i.slice(a + 1));
+			if (!o.endsWith(".png") || !(c.has("app") || c.has(p))) return null;
+			this.addWatchFile(o);
+			let l = u(r, o), d = await n(new Uint8Array(await s(o)));
+			typeof d == "string" && this.error(`${l} is not an app file: ${d}.`);
+			let { manifest: f, code: m } = d;
+			return c.has(p) ? m : (t(f) || this.error(`${l}: ${f.name} ${f.version} ${_(f)}. Build ${f.name} on ${e} and copy its app file in.`), [
+				`import factory from ${JSON.stringify(`${o}?${p}`)}`,
+				`export const manifest = ${JSON.stringify(f)}`,
 				"export default (...args) => ({ ...factory(...args), icon: manifest.icon })",
 				""
 			].join("\n"));
@@ -128,4 +131,4 @@ function g() {
 	};
 }
 //#endregion
-export { h as appFile, g as appFiles };
+export { g as appFile, v as appFiles };

package/dist/components/vf-icon.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import '../styles/body-italic-font.js';
 /** Which member of the icon family paints — the two System 7 resource sizes. */
 export type VfIconSize = 'large' | 'small';
 /**
@@ -523,6 +524,12 @@ export declare class VfIcon extends VfIcon_base {
      * Selection inverts the ghost exactly as it inverts the art.
      */
     open: boolean;
+    /**
+     * The icon is an alias, an item standing for another: its name is set in
+     * italics, the body face's own, and the plate widens to the slant's last
+     * pixel.
+     */
+    alias: boolean;
     /**
      * Drag to move — `movable`, never `draggable`, which is a platform attribute
      * and accessor (see the class doc). Arrow keys move a focused icon too, which