npm - synthesisui - Versions diffs - 0.1.8 → 0.1.10 - Mend

synthesisui 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/commands/advise.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { resolveRegistry } from "../config.js";
+import { postAdvisor } from "../registry.js";
+import { buildRepoContext } from "../repo-context.js";
+/**
+ * Asks the hosted advisor for engagement-pattern proposals, grounded in THIS
+ * project (the CLI gathers a compact repo summary) + the value proposition you
+ * pass. The advisor proposes only — it changes nothing in your project.
+ */
+export async function advise(valueProp, opts) {
+    const base = resolveRegistry(opts.registry);
+    const root = opts.dir ?? process.cwd();
+    const repo = await buildRepoContext(root);
+    const context = `Proposta de valor: ${valueProp}\n\n${repo}`;
+    console.log(`→ asking the advisor at ${base} …`);
+    const res = await postAdvisor(base, context);
+    if (res.proposals.length === 0) {
+        console.log("No proposals returned.");
+        return;
+    }
+    console.log(`\nEngagement proposals (${res.model}):\n`);
+    res.proposals.forEach((p, i) => {
+        console.log(`${i + 1}. ${p.pattern}`);
+        console.log(`   ${p.rationale}`);
+        if (p.suggestedBlocks.length) {
+            console.log(`   blocks: ${p.suggestedBlocks.join(", ")}`);
+        }
+        console.log("");
+    });
+    console.log(`(${res.usage.inputTokens} in / ${res.usage.outputTokens} out tokens — ` +
+        `proposals only; nothing in your project was changed)`);
+}

package/dist/guide.js CHANGED Viewed

@@ -1,6 +1,36 @@
 const kebab = (v) => v.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 const list = (items) => items.length ? items.map((i) => `\`${i}\``).join(", ") : "_(none)_";
 const dataAttrs = (variants) => Object.entries(variants).map(([axis, opts]) => `data-${kebab(axis)}="${Object.keys(opts).join("|")}"`);
+// Famílias genéricas do CSS — fallbacks, não webfonts a carregar.
+const GENERIC_FAMILIES = new Set([
+    "sans-serif",
+    "serif",
+    "monospace",
+    "system-ui",
+    "ui-sans-serif",
+    "ui-serif",
+    "ui-monospace",
+    "cursive",
+    "fantasy",
+    "inherit",
+    "initial",
+]);
+/** Famílias custom do documento (display/body/mono), deduplicadas, sem genéricos. */
+function customFontFamilies(families) {
+    const seen = new Set();
+    const out = [];
+    for (const family of [families.display, families.body, families.mono]) {
+        const name = family?.trim();
+        if (!name)
+            continue;
+        const key = name.toLowerCase();
+        if (GENERIC_FAMILIES.has(key) || seen.has(key))
+            continue;
+        seen.add(key);
+        out.push(name);
+    }
+    return out;
+}
 /** One entry per component: class, variant data-*, states, and multi-part anatomy. */
 function componentEntry(cname, recipe) {
     const cls = `.ds-${kebab(cname)}`;
@@ -31,6 +61,32 @@ export function buildGuide(payload) {
     const { meta, foundations, motion, components } = doc;
     const semanticRoles = Object.keys(foundations.color.semantic);
     const seriesKeys = Object.keys(foundations.color.series ?? {});
+    const fontFamilies = customFontFamilies(foundations.typography.families);
+    const fontsHref = fontFamilies.length > 0
+        ? `https://fonts.googleapis.com/css2?${fontFamilies
+            .map((n) => `family=${n.replace(/ /g, "+")}:wght@400;500;600;700`)
+            .join("&")}&display=swap`
+        : null;
+    const fontsSection = fontsHref
+        ? `
+## Fonts
+This system's type relies on ${list(fontFamilies)} — **the DS ships token names, not the
+fonts themselves.** If you don't load them they fall back to a generic family and the system loses
+its typographic identity. Load them once (any one approach):
+- **Google Fonts** — drop in your \`<head>\` (or root layout):
+  \`\`\`html
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="${fontsHref}" />
+  \`\`\`
+- **Next.js** (\`next/font/google\`), **Fontsource**, or self-hosted \`@font-face\` work too — just
+  register the families above. If a family isn't on Google Fonts, self-host it.
+---
+`
+        : "";
     const weights = Object.keys(foundations.typography.weights);
     const hasAlt = foundations.color.semanticAlt &&
         Object.keys(foundations.color.semanticAlt).length > 0;
@@ -82,7 +138,7 @@ ${hasAlt
    root.toggleAttribute("data-scheme"); // present = ${altScheme}, absent = ${meta.scheme}
    \`\`\`
 `
-        : ""}${hasTailwind
+        : ""}${fontsSection}${hasTailwind
         ? `
 ## Styling with Tailwind v4 (preferred in this project)
@@ -206,7 +262,10 @@ ${hasTailwind
   weights${hasTailwind ? " (utility: `font-<key>`)" : ""}: ${list(weights)};
   scale \`--ds-typography-scale-<key>-font-size\`${hasTailwind ? " (utility: `text-<key>`)" : ""}: ${list(Object.keys(foundations.typography.scale))}.
 - Motion: durations \`--ds-motion-durations-<key>\` (${list(Object.keys(motion.durations))}) and
-  easings \`--ds-motion-easings-<key>\` (${list(Object.keys(motion.easings))}).
+  easings \`--ds-motion-easings-<key>\` (${list(Object.keys(motion.easings))}). Use them on
+  \`transition\`/\`animation\` (e.g. \`transition: color var(--ds-motion-durations-fast) var(--ds-motion-easings-standard)\`)
+  so timing stays on-brand. The DS ships timing tokens, **not** a runtime — for entrance/reveal/stagger
+  pair them with a motion lib (e.g. \`motion\`/Framer) or CSS \`@keyframes\`.
 - When **creating a new component** the DS does not cover yet: compose it from these semantic
   tokens to inherit the system's identity; do not invent colors/measures outside the scale.

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import { add } from "./commands/add.js";
+import { advise } from "./commands/advise.js";
 import { list } from "./commands/list.js";
 import { login } from "./commands/login.js";
 import { RegistryError } from "./registry.js";
@@ -9,6 +10,7 @@ Usage:
   synthesisui login [options]          connect the CLI to your account (device-flow)
   synthesisui list [options]           list the published design systems
   synthesisui add <slug> [options]     materialize a DS into _synthesisui/ds/<slug>/
+  synthesisui advise "<value prop>"    engagement-pattern proposals for this project (login required)
 Options:
   --registry <url>   registry URL (or env SYNTHESISUI_REGISTRY_URL)
@@ -22,6 +24,7 @@ Examples:
   synthesisui add halogen
   synthesisui add halogen --version 3
   synthesisui add halogen --registry http://localhost:3737
+  synthesisui advise "habit-building app for tracking personal finances"
 `;
 /** Extracts simple `--flag value` pairs and the remaining positionals. */
 function parseFlags(argv) {
@@ -84,6 +87,16 @@ async function main() {
         case "login":
             await login({ registry });
             break;
+        case "advise": {
+            const valueProp = args.join(" ").trim();
+            if (!valueProp) {
+                console.error('error: describe your product — `synthesisui advise "<value proposition>"`');
+                process.exitCode = 1;
+                return;
+            }
+            await advise(valueProp, { registry, dir });
+            break;
+        }
         default:
             console.error(`unknown command: "${command}"\n`);
             console.log(HELP);

package/dist/registry.js CHANGED Viewed

@@ -42,3 +42,29 @@ export async function fetchDesignSystem(base, slug, version) {
     }
     return (await res.json());
 }
+/**
+ * Calls the hosted advisor (`POST /api/ai/advisor`). Gated + metered server-side:
+ * 401 = not logged in, 429 = daily quota reached. Sends the Bearer token if present.
+ */
+export async function postAdvisor(base, context) {
+    let res;
+    try {
+        res = await fetch(`${base}/api/ai/advisor`, {
+            method: "POST",
+            headers: { "content-type": "application/json", ...(await authHeaders()) },
+            body: JSON.stringify({ context }),
+        });
+    }
+    catch {
+        throw new RegistryError(`Could not reach the registry at ${base}. ` +
+            `Check the URL (--registry / SYNTHESISUI_REGISTRY_URL) and your connection.`);
+    }
+    if (res.status === 401) {
+        throw new RegistryError("Not authenticated. Run `synthesisui login` first.");
+    }
+    if (!res.ok) {
+        const body = (await res.json().catch(() => ({})));
+        throw new RegistryError(body.message ?? `Advisor responded ${res.status}.`);
+    }
+    return (await res.json());
+}

package/dist/repo-context.js ADDED Viewed

@@ -0,0 +1,96 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join } from "node:path";
+/**
+ * Monta um resumo COMPACTO e aterrado do projeto pro advisor — barato em tokens
+ * e suficiente pra propostas específicas: stack (package.json), forma do repo
+ * (árvore nível 1), DS SynthesisUI instalado(s) e o começo do README. Sem dump
+ * de código (custo/ruído): o advisor propõe padrões, não lê implementação.
+ */
+const SKIP_DIRS = new Set([
+    "node_modules",
+    "dist",
+    "build",
+    "out",
+    "coverage",
+    ".next",
+    ".nx",
+    ".turbo",
+    ".cache",
+    ".vercel",
+]);
+const MAX_README_LINES = 40;
+const MAX_DEPS = 40;
+async function readJson(path) {
+    try {
+        return JSON.parse(await readFile(path, "utf8"));
+    }
+    catch {
+        return null;
+    }
+}
+async function topLevelTree(root) {
+    try {
+        const entries = await readdir(root, { withFileTypes: true });
+        return entries
+            .filter((e) => !e.name.startsWith(".") && !SKIP_DIRS.has(e.name))
+            .map((e) => (e.isDirectory() ? `${e.name}/` : e.name))
+            .sort();
+    }
+    catch {
+        return [];
+    }
+}
+async function installedDesignSystems(root) {
+    const dsRoot = join(root, "_synthesisui", "ds");
+    const out = [];
+    try {
+        for (const e of await readdir(dsRoot, { withFileTypes: true })) {
+            if (!e.isDirectory())
+                continue;
+            const lock = await readJson(join(dsRoot, e.name, ".lock"));
+            out.push(`${lock?.name ?? e.name} (v${lock?.version ?? "?"})`);
+        }
+    }
+    catch {
+        // nenhum DS instalado — tudo bem
+    }
+    return out;
+}
+async function readmeHead(root) {
+    for (const name of ["README.md", "readme.md", "Readme.md"]) {
+        try {
+            const txt = await readFile(join(root, name), "utf8");
+            return txt.split("\n").slice(0, MAX_README_LINES).join("\n").trim();
+        }
+        catch {
+            // tenta o próximo
+        }
+    }
+    return null;
+}
+export async function buildRepoContext(root) {
+    const pkg = await readJson(join(root, "package.json"));
+    const parts = [];
+    if (pkg) {
+        parts.push(`Projeto: ${pkg.name ?? "(sem nome)"}${pkg.description ? ` — ${pkg.description}` : ""}`);
+        const deps = [
+            ...Object.keys(pkg.dependencies ?? {}),
+            ...Object.keys(pkg.devDependencies ?? {}),
+        ].slice(0, MAX_DEPS);
+        if (deps.length)
+            parts.push(`Dependências: ${deps.join(", ")}`);
+        const scripts = Object.keys(pkg.scripts ?? {});
+        if (scripts.length)
+            parts.push(`Scripts: ${scripts.join(", ")}`);
+    }
+    const tree = await topLevelTree(root);
+    if (tree.length)
+        parts.push(`Estrutura (nível 1): ${tree.join(", ")}`);
+    const ds = await installedDesignSystems(root);
+    if (ds.length)
+        parts.push(`Design systems SynthesisUI instalados: ${ds.join(", ")}`);
+    const rd = await readmeHead(root);
+    if (rd)
+        parts.push(`README (início):\n${rd}`);
+    return parts.join("\n\n");
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Traz design systems do SynthesisUI para qualquer projeto (materializa em _local/ds/).",
   "type": "module",
   "bin": {