@askewly/design 0.5.0 → 0.6.0

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/data.js

@@ -0,0 +1,90 @@
+// M110 앞단 — 레포 자산 조회 통합 (`data recall`).
+// design-intake.md §5단계와 askewly-design SKILL §2.7 이 약속해 온 `askewly data recall`
+// 이 유령 명령이었다(이 기기 어디에도 `data` 커맨드가 없었다) — 그 약속을 실재하게 만든다.
+//
+// 번들된 두 축(terms · recipes) + knowledge 축을 한 번에 훑는다. methodology/ 는
+// build-data.mjs 가 애초에 번들하지 않으므로(knowledge/*.md 만 읽는다) 여기서도 다루지
+// 않는다 — 새 데이터 로더를 만들지 않고 기존 load.ts 만 재사용한다는 이 step 의 원칙.
+// methodology 를 포함한 5축 통합 회수가 필요하면 `python ~/projects/second-brain/bin/data.py recall`
+// 로 보완한다(design-intake.md 가 그 경계를 함께 적는다).
+import { loadKnowledge, loadRecipes, loadTerms, searchKnowledge, searchTerms, } from "./load.js";
+export const RECALL_AXES = ["terms", "recipes", "knowledge"];
+function summarize(text, max = 120) {
+    if (!text)
+        return "";
+    const oneLine = text.replace(/\s+/g, " ").trim();
+    return oneLine.length > max ? `${oneLine.slice(0, max - 1)}…` : oneLine;
+}
+/** Case-insensitive substring search over id, name, pattern_group, body (low weight). */
+function searchRecipes(recipes, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return [];
+    const scored = [];
+    for (const recipe of recipes) {
+        const id = recipe.id.toLowerCase();
+        const name = (recipe.name ?? "").toLowerCase();
+        const group = (recipe.pattern_group ?? "").toLowerCase();
+        const body = recipe.body?.toLowerCase() ?? "";
+        let score = 0;
+        if (id === needle || name === needle)
+            score = 100;
+        else if (id.includes(needle) || name.includes(needle))
+            score = 60;
+        else if (group.includes(needle))
+            score = 40;
+        else if (body.includes(needle))
+            score = 20;
+        if (score > 0)
+            scored.push({ recipe, score });
+    }
+    return scored.sort((a, b) => b.score - a.score || a.recipe.id.localeCompare(b.recipe.id)).map((s) => s.recipe);
+}
+function termHit(term) {
+    return {
+        axis: "terms",
+        id: term.id,
+        path: `docs/ui-vocabulary/terms.yml#${term.id}`,
+        summary: summarize(term.one_liner ?? term.en?.name ?? term.id),
+    };
+}
+function recipeHit(recipe) {
+    return {
+        axis: "recipes",
+        id: recipe.id,
+        path: recipe.source_path,
+        summary: summarize(`${recipe.name ? `${recipe.name} (${recipe.pattern_group ?? "-"})` : recipe.id}${recipe.status ? ` [${recipe.status}]` : ""}`),
+        status: recipe.status,
+    };
+}
+function knowledgeHit(doc) {
+    return {
+        axis: "knowledge",
+        id: doc.id,
+        path: doc.source_path,
+        summary: summarize(doc.description),
+    };
+}
+/**
+ * Search terms + recipes + knowledge in one pass and return path + one-line
+ * summary per hit. This is an index, not the source text — the caller must
+ * still open `path` and read the body before judging.
+ */
+export function recall(query, limit) {
+    const terms = searchTerms(loadTerms(), query).map(termHit);
+    const recipes = searchRecipes(loadRecipes(), query).map(recipeHit);
+    const knowledge = searchKnowledge(loadKnowledge(), query).map(knowledgeHit);
+    // Interleave by axis (round-robin) so a query that happens to match many
+    // terms doesn't crowd recipes/knowledge out of a small --limit window.
+    const merged = [];
+    const maxLen = Math.max(terms.length, recipes.length, knowledge.length);
+    for (let i = 0; i < maxLen; i++) {
+        if (terms[i])
+            merged.push(terms[i]);
+        if (recipes[i])
+            merged.push(recipes[i]);
+        if (knowledge[i])
+            merged.push(knowledge[i]);
+    }
+    return merged.slice(0, Math.max(0, limit));
+}

package/dist/index.js

@@ -8,6 +8,9 @@ import { DEFAULT_TYPOGRAPHY_THRESHOLD } from "./typography.js";
 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
@@ -331,4 +334,122 @@ program
     const color = options.color && Boolean(process.stdout.isTTY);
     console.log(renderMascot(pose, { color }));
 });
+const data = program
+    .command("data")
+    .description("query bundled repo assets across axes (terms, recipes, knowledge) in one pass");
+data
+    .command("recall")
+    .argument("<query>", "text to match across terms / recipes / knowledge")
+    .option("--limit <n>", "max results", "5")
+    .option("--json", "machine-readable output")
+    .description("search terms + recipes + knowledge in one pass — an index of paths, not the source text")
+    .action((query, options) => {
+    const limit = Number(options.limit) || 5;
+    const hits = recall(query, limit);
+    if (options.json) {
+        console.log(JSON.stringify({
+            note: "index only — read `path` before judging",
+            axes: RECALL_AXES,
+            query,
+            hits,
+        }, null, 2));
+        return;
+    }
+    console.log("색인이지 본문이 아니다 — 후보 경로를 받은 뒤 판단은 본문을 읽고 한다.");
+    if (hits.length === 0) {
+        console.log(`no matches for "${query}" across axes: ${RECALL_AXES.join(", ")} (methodology/ is not bundled here — try: python ~/projects/second-brain/bin/data.py recall "${query}")`);
+        return;
+    }
+    for (const hit of hits) {
+        console.log(`[${hit.axis}] ${hit.id}  —  ${hit.path}`);
+        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/inject.js

@@ -45,6 +45,19 @@ export function extractCodeSnippet(recipe) {
     if (recipe.code_source) {
         return recipe.code_source.trimEnd() + "\n";
     }
+    // 영상 자산은 코드가 **있는데도** 배급하지 않는다 — Remotion 런타임 위에서만 돌아서,
+    // 여기서 써 주면 remotion 없는 프로젝트가 설치 직후 깨진다. 「없다」가 아니라 「여기로
+    // 가라」로 답한다 (M95 step-8 · docs/design-system/video-contract.md §6).
+    if (recipe.surface_refs?.includes("video")) {
+        throw new InjectError([
+            `recipe "${recipe.id}" is a video asset — not distributed through add.`,
+            "  It runs only inside Remotion (useCurrentFrame), so writing it here would break this project.",
+            "  Read the recipe and the element source, then rebuild it in your own Remotion project:",
+            `    https://ui.askewly.com/llms/${recipe.source_path}`,
+            ...(recipe.code_asset ? [`    https://ui.askewly.com/llms/${recipe.code_asset}`] : []),
+            "  Medium contract: https://ui.askewly.com/llms/docs/design-system/video-contract.md",
+        ].join("\n"));
+    }
     throw new InjectError(`recipe "${recipe.id}" has no fenced code block under ## Code`);
 }
 /** Extracts list items of a `## <title>` section (used for Checks / Anti-patterns notes). */

package/dist/mascot.js

@@ -4,34 +4,34 @@
 // 사용 규칙(정본 §3): 라벤더 #B298DC 단색 고정 · 등폭 전제 · 기계 소비 출력 금지.
 export const MASCOT_POSES = ["lying", "standing", "sleepy", "mini"];
 const ART = {
-    lying: `         ▄██▄   ▄██▄
-         █ ██   █ ██
-       ▄██████████████████▄
-█▄    █████████████████████
- ▀█▄  ████  ████  █████████
-  ▀██▄████  ████  █████████
-      ▀███████████████████▀
+    lying: `         ▄██▄   ▄██▄
+         █ ██   █ ██
+       ▄██████████████████▄
+█▄    █████████████████████
+ ▀█▄  ████  ████  █████████
+  ▀██▄████  ████  █████████
+      ▀███████████████████▀
         ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀`,
-    standing: `    ▄██▄   ▄██▄
-    █ ██   █ ██
-  ▄██████████████▄
-  ███  ████  █████
-  ███  ████  █████
-  ████████████████
-  ████████████████
-  ▀████▀▀▀████▀▀██
+    standing: `    ▄██▄   ▄██▄
+    █ ██   █ ██
+  ▄██████████████▄
+  ███  ████  █████
+  ███  ████  █████
+  ████████████████
+  ████████████████
+  ▀████▀▀▀████▀▀██
    ████   ████  ▀███▄▄▄`,
-    sleepy: `         ▄██▄   ▄██▄
-         █ ██   █ ██
-       ▄██████████████████▄
-█▄    █████████████████████
- ▀█▄  █████████████████████
-  ▀██▄███    ██    ████████
-      ▀███████████████████▀
+    sleepy: `         ▄██▄   ▄██▄
+         █ ██   █ ██
+       ▄██████████████████▄
+█▄    █████████████████████
+ ▀█▄  █████████████████████
+  ▀██▄███    ██    ████████
+      ▀███████████████████▀
         ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀`,
-    mini: `  ▄██▄▄▄▄██▄
-  ██████████
-  ██  ██  ██
+    mini: `  ▄██▄▄▄▄██▄
+  ██████████
+  ██  ██  ██
   ▀████████▀`,
 };
 /** askewly.lavender #B298DC — ANSI 24-bit. */

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,6 +1,6 @@
 {
   "name": "@askewly/design",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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",