@askewly/design 0.5.1 → 0.6.1

package/dist/assets.js

@@ -0,0 +1,83 @@
+// step-11 (M141): 자산별 md 조회 — `assets search` · `assets show` · `prompt`.
+// 데이터 = build-data.mjs 가 번들한 data/assets.json (public/llms/assets/*.md 를 그대로 실음).
+import { readFileSync } from "node:fs";
+export const ASSET_BASE_URL = "https://ui.askewly.com/llms/assets";
+export function loadAssets() {
+    return JSON.parse(readFileSync(new URL("../data/assets.json", import.meta.url), "utf8"));
+}
+/** Case-insensitive substring search over id, title (high), keywords (mid), definition (low). */
+export function searchAssets(assets, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return [];
+    const scored = [];
+    for (const asset of assets) {
+        const id = asset.id.toLowerCase();
+        const title = asset.title.toLowerCase();
+        const keywords = asset.keywords.map((k) => String(k).toLowerCase());
+        let score = 0;
+        if (id === needle || title === needle)
+            score = 100;
+        else if (id.includes(needle) || title.includes(needle))
+            score = 60;
+        else if (keywords.some((k) => k === needle || k.includes(needle)))
+            score = 40;
+        else if (asset.definition.toLowerCase().includes(needle))
+            score = 20;
+        if (score > 0)
+            scored.push({ asset, score });
+    }
+    return scored.sort((a, b) => b.score - a.score || a.asset.id.localeCompare(b.asset.id)).map((s) => s.asset);
+}
+function editDistance(a, b) {
+    const row = Array.from({ length: b.length + 1 }, (_, j) => j);
+    for (let i = 1; i <= a.length; i++) {
+        let prev = row[0];
+        row[0] = i;
+        for (let j = 1; j <= b.length; j++) {
+            const tmp = row[j];
+            row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+            prev = tmp;
+        }
+    }
+    return row[b.length];
+}
+/** 없는 id 에 대한 근접 후보 — 부분 문자열 일치 우선, 그다음 편집 거리. 항상 최대 n 개. */
+export function suggestAssets(assets, id, n = 3) {
+    const needle = id.toLowerCase();
+    return assets
+        .map((asset) => {
+        const a = asset.id.toLowerCase();
+        const sub = a.includes(needle) || needle.includes(a) ? 0 : 1;
+        return { asset, key: sub * 1000 + editDistance(a, needle) };
+    })
+        .sort((x, y) => x.key - y.key || x.asset.id.localeCompare(y.asset.id))
+        .slice(0, n)
+        .map((s) => s.asset);
+}
+export function assetUrl(asset) {
+    return `${ASSET_BASE_URL}/${asset.id}.md`;
+}
+export function usageRules(asset) {
+    const match = asset.md.match(/^## 사용 규칙\n([\s\S]*?)(?=^## |(?![\s\S]))/m);
+    return match ? match[1].trim() : null;
+}
+/** 에이전트에 그대로 붙여넣는 프롬프트. 설치 명령이 없는 자산은 recipe 를 읽고 짓게 한다. */
+export function buildPrompt(asset) {
+    const lines = [`Use the Askewly Design asset "${asset.title}" (${asset.id}).`, "", `Definition: ${asset.definition}`, `Asset page (read first): ${assetUrl(asset)}`];
+    if (asset.install) {
+        lines.push(`Install: ${asset.install}`);
+    }
+    else {
+        lines.push(`Install: none (not in the registry). Build it from the recipe: ${asset.recipe_url ?? assetUrl(asset)}`);
+    }
+    const rules = usageRules(asset);
+    if (rules) {
+        lines.push("", "Usage rules:", rules);
+    }
+    const respect = rules ? ", and respect the usage rules above" : "";
+    lines.push("", asset.install
+        ? `Instruction: read the asset page, run the install command and wire it to the project's tokens${respect}. Then run \`npx @askewly/design verify\`.`
+        : `Instruction: read the asset page and the recipe and build it with the project's tokens${respect}. Then run \`npx @askewly/design verify\`.`);
+    return lines.join("\n");
+}

package/dist/index.js

@@ -9,6 +9,8 @@ import { MASCOT_POSES, renderMascot } from "./mascot.js";
 import { verifyDir } from "./verify.js";
 import { loadKnowledge, loadRecipes, loadTerms, loadTokens, loadTokensCss, searchKnowledge, searchTerms, tokensForTier, } from "./load.js";
 import { recall, RECALL_AXES } from "./data.js";
+import { assetUrl, buildPrompt, loadAssets, searchAssets, suggestAssets } from "./assets.js";
+import { getSite, listSites, SiteError } from "./site.js";
 const pkg = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8"));
 const program = new Command();
 program
@@ -363,4 +365,91 @@ data
         console.log(`    ${hit.summary}`);
     }
 });
+// step-11 (M141): 자산별 md(공개 URL https://ui.askewly.com/llms/assets/<id>.md) 를 번들에서 오프라인으로 읽는다.
+const assetsCmd = program.command("assets").description("registry + recipe assets (one md per asset: definition, usage rules, install command)");
+assetsCmd
+    .command("search")
+    .argument("<query>", "text to match against id, name, pattern group, term refs, definition")
+    .option("--json", "machine-readable output")
+    .option("--limit <n>", "max results", "10")
+    .description("search assets — each line: id, one-line definition, installable or recipe only")
+    .action((query, options) => {
+    const results = searchAssets(loadAssets(), query).slice(0, Number(options.limit) || 10);
+    if (results.length === 0)
+        fail(`no assets match "${query}"`);
+    if (options.json) {
+        console.log(JSON.stringify(results.map((a) => ({ id: a.id, definition: a.definition, installable: a.install !== null, install: a.install, url: assetUrl(a) })), null, 2));
+        return;
+    }
+    for (const asset of results) {
+        console.log(`${asset.id}  ${asset.definition}  [${asset.install ? "installable" : "recipe only"}]`);
+    }
+});
+function assetOrFail(id) {
+    const all = loadAssets();
+    const asset = all.find((a) => a.id === id);
+    if (!asset) {
+        const near = suggestAssets(all, id).map((a) => `  - ${a.id}`);
+        fail(`unknown asset "${id}" — closest:\n${near.join("\n")}\nor: askewly-design assets search <query>`);
+    }
+    return asset;
+}
+assetsCmd
+    .command("show")
+    .argument("<id>", "asset id, e.g. split-tone-hero")
+    .option("--json", "machine-readable output (metadata + md)")
+    .description("print the asset md (definition, usage rules, install command, recipe link)")
+    .action((id, options) => {
+    const asset = assetOrFail(id);
+    if (options.json) {
+        console.log(JSON.stringify(asset, null, 2));
+        return;
+    }
+    process.stdout.write(asset.md.endsWith("\n") ? asset.md : `${asset.md}\n`);
+});
+program
+    .command("prompt")
+    .argument("<id>", "asset id, e.g. split-tone-hero")
+    .description("print a paste-ready agent prompt: asset md URL + install command + usage rules + one-line instruction")
+    .action((id) => {
+    console.log(buildPrompt(assetOrFail(id)));
+});
+// M141 Ruling 11: 재현 사이트 구조 묶음(코드·텍스트 그대로, 이미지는 단색 빈 자리, 영상·폰트 제외)을 받는다.
+const siteCmd = program.command("site").description("reproduced-site bundles: structure only (code, layout, motion, text); images are blank placeholders, no video or fonts");
+siteCmd
+    .command("list")
+    .option("--json", "machine-readable output")
+    .description("list downloadable site bundles")
+    .action(async (options) => {
+    try {
+        const index = await listSites();
+        if (options.json)
+            return void console.log(JSON.stringify(index, null, 2));
+        for (const e of index)
+            console.log(`${e.slug}  ${(e.bytes / 1024).toFixed(0)} KB  ${e.files} files`);
+    }
+    catch (error) {
+        if (error instanceof SiteError)
+            fail(error.message);
+        throw error;
+    }
+});
+siteCmd
+    .command("get")
+    .argument("<slug>", "site slug, e.g. stripe-home")
+    .argument("[dir]", "target dir (default ./<slug>); must be empty or missing")
+    .description("download a site bundle, verify sha256, extract into [dir] (never overwrites)")
+    .action(async (slug, dir) => {
+    try {
+        const target = dir ?? slug;
+        const n = await getSite(slug, target);
+        console.log(`${n} files -> ${target}
+read ${path.join(target, "ASKEWLY-BUNDLE.md")} for what was left out and how to run it`);
+    }
+    catch (error) {
+        if (error instanceof SiteError)
+            fail(error.message);
+        throw error;
+    }
+});
 program.parse();

package/dist/site.js

@@ -0,0 +1,113 @@
+// M141 Ruling 11: 재현 사이트 구조 묶음 — `site list` · `site get <slug> [dir]`.
+// 묶음 = scripts/recreate/pack-site-bundles.mjs 산출물(코드·텍스트 그대로, 이미지는 단색 빈 자리, 영상·폰트 제외).
+// 압축 해제는 node 내장 zlib 만 쓴다(새 의존성 없음).
+import { createHash } from "node:crypto";
+import { existsSync, mkdirSync, readdirSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { inflateRawSync } from "node:zlib";
+export const SITE_BUNDLE_BASE_URL = "https://bundles.askewly.com";
+export class SiteError extends Error {
+}
+export function bundleBaseUrl() {
+    return (process.env.ASKEWLY_SITE_BUNDLE_URL || SITE_BUNDLE_BASE_URL).replace(/\/+$/, "");
+}
+async function fetchBuffer(url) {
+    let res;
+    try {
+        res = await fetch(url);
+    }
+    catch (error) {
+        throw new SiteError(`cannot reach ${url}: ${error.message}`);
+    }
+    if (!res.ok)
+        throw new SiteError(`GET ${url} -> HTTP ${res.status}`);
+    return Buffer.from(await res.arrayBuffer());
+}
+// 목록은 엣지 캐시를 건너뛴다 — zip 은 이름에 해시가 있어 캐시돼도 된다
+export async function fetchSiteIndex(base = bundleBaseUrl()) {
+    return JSON.parse((await fetchBuffer(`${base}/index.json?v=${Date.now()}`)).toString("utf8"));
+}
+function editDistance(a, b) {
+    const row = Array.from({ length: b.length + 1 }, (_, j) => j);
+    for (let i = 1; i <= a.length; i++) {
+        let prev = row[0];
+        row[0] = i;
+        for (let j = 1; j <= b.length; j++) {
+            const tmp = row[j];
+            row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+            prev = tmp;
+        }
+    }
+    return row[b.length];
+}
+/** 없는 slug 에 대한 근접 후보 — assets.ts suggestAssets 와 같은 규칙(부분 문자열 우선, 편집 거리). */
+export function suggestSites(index, slug, n = 3) {
+    const needle = slug.toLowerCase();
+    return index
+        .map((e) => {
+        const a = e.slug.toLowerCase();
+        return { slug: e.slug, key: (a.includes(needle) || needle.includes(a) ? 0 : 1000) + editDistance(a, needle) };
+    })
+        .sort((x, y) => x.key - y.key || x.slug.localeCompare(y.slug))
+        .slice(0, n)
+        .map((s) => s.slug);
+}
+/** zip(중앙 디렉터리) → [{name, data}]. store(0)·deflate(8)만 지원. 경로 탈출 이름은 거부. */
+export function readZip(buf) {
+    const eocd = buf.lastIndexOf(Buffer.from([0x50, 0x4b, 0x05, 0x06]));
+    if (eocd < 0)
+        throw new SiteError("not a zip file");
+    let count = buf.readUInt16LE(eocd + 10);
+    let p = buf.readUInt32LE(eocd + 16);
+    const out = [];
+    while (count--) {
+        if (buf.readUInt32LE(p) !== 0x02014b50)
+            throw new SiteError("corrupt zip directory");
+        const method = buf.readUInt16LE(p + 10);
+        const csize = buf.readUInt32LE(p + 20);
+        const nl = buf.readUInt16LE(p + 28);
+        const el = buf.readUInt16LE(p + 30);
+        const cl = buf.readUInt16LE(p + 32);
+        const off = buf.readUInt32LE(p + 42);
+        const name = buf.toString("utf8", p + 46, p + 46 + nl);
+        const start = off + 30 + buf.readUInt16LE(off + 26) + buf.readUInt16LE(off + 28);
+        const raw = buf.subarray(start, start + csize);
+        if (method !== 0 && method !== 8)
+            throw new SiteError(`unsupported zip method ${method} for ${name}`);
+        out.push({ name, data: method === 8 ? inflateRawSync(raw) : Buffer.from(raw) });
+        p += 46 + nl + el + cl;
+    }
+    return out;
+}
+export async function listSites(base = bundleBaseUrl()) {
+    return fetchSiteIndex(base);
+}
+/** 묶음을 받아 sha256 대조 후 dir 에 푼다. 비어 있지 않은 폴더·해시 불일치·없는 slug 는 SiteError. 반환 = 푼 파일 수. */
+export async function getSite(slug, dir, base = bundleBaseUrl()) {
+    const index = await fetchSiteIndex(base);
+    const entry = index.find((e) => e.slug === slug);
+    if (!entry) {
+        const near = suggestSites(index, slug).map((s) => `  - ${s}`);
+        throw new SiteError(`unknown site "${slug}" — closest:\n${near.join("\n")}\nor: askewly-design site list`);
+    }
+    if (existsSync(dir) && readdirSync(dir).length > 0)
+        throw new SiteError(`${dir} is not empty — refusing to overwrite`);
+    const file = entry.file ?? `${slug}.zip`;
+    const zip = await fetchBuffer(`${base}/${file}`);
+    const sha = createHash("sha256").update(zip).digest("hex");
+    if (sha !== entry.sha256)
+        throw new SiteError(`sha256 mismatch for ${file} (expected ${entry.sha256}, got ${sha})`);
+    const files = readZip(zip);
+    const root = path.resolve(dir);
+    for (const f of files) {
+        const dest = path.resolve(root, f.name);
+        if (!dest.startsWith(root + path.sep))
+            throw new SiteError(`unsafe path in zip: ${f.name}`);
+    }
+    for (const f of files) {
+        const dest = path.resolve(root, f.name);
+        mkdirSync(path.dirname(dest), { recursive: true });
+        writeFileSync(dest, f.data);
+    }
+    return files.length;
+}

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@askewly/design",
-  "version": "0.5.1",
-  "description": "Query, inject, and verify the Askewly Design system (tokens, UI vocabulary, recipes) from your terminal or coding agent.",
-  "license": "MIT",
-  "homepage": "https://ui.askewly.com",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/lumatic2/ui-dictionary.git",
-    "directory": "packages/cli"
-  },
-  "keywords": [
-    "design-system",
-    "design-tokens",
-    "linter",
-    "ui",
-    "coding-agent"
-  ],
-  "type": "module",
-  "bin": {
-    "askewly-design": "./dist/index.js"
-  },
-  "files": [
-    "dist",
-    "data",
-    "README.md",
-    "LICENSE"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "build:data": "node scripts/build-data.mjs",
-    "build": "npm run build:data && tsc",
-    "test": "vitest run",
-    "prepack": "npm run build"
-  },
-  "dependencies": {
-    "commander": "^13.1.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.0",
-    "typescript": "^5.7.0",
-    "vitest": "^3.0.0",
-    "yaml": "^2.6.0"
-  }
-}
+{
+  "name": "@askewly/design",
+  "version": "0.6.1",
+  "description": "Query, inject, and verify the Askewly Design system (tokens, UI vocabulary, recipes) from your terminal or coding agent.",
+  "license": "MIT",
+  "homepage": "https://ui.askewly.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lumatic2/ui-dictionary.git",
+    "directory": "packages/cli"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "linter",
+    "ui",
+    "coding-agent"
+  ],
+  "type": "module",
+  "bin": {
+    "askewly-design": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "data",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build:data": "node scripts/build-data.mjs",
+    "build": "npm run build:data && tsc",
+    "test": "vitest run",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "commander": "^13.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0",
+    "yaml": "^2.6.0"
+  }
+}