@ideare/kit 0.1.0-next.1 → 0.1.0-next.3

package/dist/draft/draft.d.ts

@@ -20,12 +20,15 @@ export type DraftInput = {
     name: string;
     /** What the business does, in the owner's words. It becomes the tagline. */
     idea: string;
+    /** A tagline the owner picked (an AI suggestion). It replaces the idea as the tagline only:
+     *  the idea still says what the business does, and the look never moves with it. */
+    tagline?: string;
     locale: Locale;
     seed: number;
     picks: DraftPicks;
 };
 /** The longest name (the wordmark's limit) and line (the copy check's tagline limit) a draft
- *  takes: every file the kit makes has room for them. */
+ *  takes: every file the kit makes has room for them. A picked tagline has the line's limit. */
 export declare const DRAFT_LIMITS: {
     readonly name: 40;
     readonly idea: 60;
@@ -55,7 +58,8 @@ export declare function newDraftSeed(): number;
 export declare function draftBrand(input: DraftInput, ctx: {
     fonts: FontResolver;
 }): Promise<Brand>;
-/** The draft as link parameters: name, idea, locale, seed, colors, fonts and logo. */
+/** The draft as link parameters: name, idea, a picked tagline, locale, seed, colors, fonts and
+ *  logo. */
 export declare function draftParams(input: DraftInput): URLSearchParams;
 /** A draft read back from link parameters, or null when any part is missing or out of range. */
 export declare function readDraftParams(params: URLSearchParams): DraftInput | null;

package/dist/draft/draft.js

@@ -4,7 +4,7 @@ import { catalogFont } from "../fonts/pick.js";
 import { iconMark, initials, matchIcons, monogramMark } from "../marks/draw.js";
 import { engineFor } from "../scene/render.js";
 /** The longest name (the wordmark's limit) and line (the copy check's tagline limit) a draft
- *  takes: every file the kit makes has room for them. */
+ *  takes: every file the kit makes has room for them. A picked tagline has the line's limit. */
 export const DRAFT_LIMITS = { name: 40, idea: 60 };
 /**
  * The font pairs a draft picks from. Few on purpose: a browser carries every file
@@ -199,6 +199,106 @@ function lineMood(idea) {
     const haystack = plain(idea);
     return MOOD_WORDS.find((row) => row.words.some((word) => haystack.includes(` ${word}`)));
 }
+/**
+ * Colors a name or an idea can say, in pt-BR, en and es, as OKLCH hue ranges: "Salão Ametista"
+ * starts purple, "Loja Rubi" red. A trailing space means the whole word. Short words that are also
+ * everyday words (mar, sol, céu) are left out, so colors don't jump while a name is typed.
+ */
+const COLOR_WORDS = [
+    {
+        hues: [18, 34],
+        words: [
+            "vermelh",
+            "rubi",
+            "ruby",
+            "rojo ",
+            "roja ",
+            "carmim",
+            "carmin",
+            "cereja",
+            "cherry",
+        ],
+    },
+    { hues: [24, 40], words: ["coral", "terracota", "terracotta"] },
+    { hues: [48, 64], words: ["laranj", "orange", "naranj", "tangerin", "damasco", "apricot"] },
+    {
+        hues: [50, 66],
+        words: ["marrom", "brown", "chocolat", "cacau", "cacao", "canela", "cinnamon"],
+    },
+    {
+        hues: [86, 104],
+        words: [
+            "amarel",
+            "yellow",
+            "amarill",
+            "dourad",
+            "dorad",
+            "golden",
+            "ouro ",
+            "girassol",
+            "sunflower",
+            "girasol",
+        ],
+    },
+    {
+        hues: [132, 156],
+        words: [
+            "verde",
+            "green",
+            "esmerald",
+            "emerald",
+            "menta",
+            "mint ",
+            "oliva",
+            "olive",
+            "jade",
+            "salvia",
+            "sage ",
+        ],
+    },
+    { hues: [180, 200], words: ["turques", "turquoise", "turquesa", "aqua "] },
+    {
+        hues: [244, 266],
+        words: [
+            "azul",
+            "blue",
+            "safira",
+            "sapphire",
+            "zafiro",
+            "celeste",
+            "anil",
+            "indigo",
+            "marinho",
+            "navy",
+        ],
+    },
+    {
+        hues: [296, 316],
+        words: [
+            "roxo",
+            "roxa",
+            "purple",
+            "morad",
+            "lilas",
+            "lilac",
+            "lila ",
+            "violet",
+            "ametist",
+            "amethyst",
+            "amatist",
+            "lavand",
+            "lavender",
+        ],
+    },
+    {
+        hues: [338, 356],
+        words: ["rosa ", "pink", "magenta", "fucsia", "fuchsia", "rubor", "blush"],
+    },
+];
+function colorHues(text) {
+    const haystack = plain(text);
+    return COLOR_WORDS.find((row) => row.words.some((word) => haystack.includes(` ${word}`)))?.hues;
+}
 /** FNV-1a, 32 bits: a stable number for a string. */
 function hash(text) {
     let h = 0x811c9dc5;
@@ -229,7 +329,8 @@ function draftColors(input) {
     const fromLine = lineMood(`${input.name} ${input.idea}`);
     const base = fromLine?.mood ?? MOODS[Math.floor(roll(input.seed, "mood") * MOODS.length)];
     const mood = base ?? "calm";
-    const [from, to] = fromLine?.hues ?? [0, 360];
+    // A color the name says comes first, then one the idea says, then the business's own range.
+    const [from, to] = colorHues(input.name) ?? colorHues(input.idea) ?? fromLine?.hues ?? [0, 360];
     const firstHue = from + roll(input.seed, "hue") * (to - from);
     const k = input.picks.colors;
     // The business's own mood holds for two presses, then the moods take turns.
@@ -307,7 +408,9 @@ export async function draftBrand(input, ctx) {
             ink: light.onPrimary,
         });
     }
-    const tagline = idea || name;
+    const picked = (input.tagline ?? "").trim().slice(0, DRAFT_LIMITS.idea);
+    const tagline = picked || idea || name;
+    const subtitle = picked || idea;
     const draft = {
         $schema: BRAND_SCHEMA_URL,
         schemaVersion: 1,
@@ -318,8 +421,9 @@ export async function draftBrand(input, ctx) {
         copy: {
             [input.locale]: {
                 tagline,
-                description: tagline,
-                card: { title: name, ...(idea ? { subtitle: idea } : {}) },
+                // What the business does, which a picked tagline doesn't replace.
+                description: idea || tagline,
+                card: { title: name, ...(subtitle ? { subtitle } : {}) },
             },
         },
         mark: {
@@ -344,14 +448,18 @@ export async function draftBrand(input, ctx) {
     return parsed.brand;
 }
 const PICK_KEYS = ["colors", "fonts", "logo"];
-/** The draft as link parameters: name, idea, locale, seed, colors, fonts and logo. */
+/** The draft as link parameters: name, idea, a picked tagline, locale, seed, colors, fonts and
+ *  logo. */
 export function draftParams(input) {
     const params = new URLSearchParams({
         name: input.name.trim().slice(0, DRAFT_LIMITS.name),
         idea: input.idea.trim().slice(0, DRAFT_LIMITS.idea),
-        locale: input.locale,
-        seed: String(input.seed),
     });
+    const tagline = input.tagline?.trim().slice(0, DRAFT_LIMITS.idea);
+    if (tagline)
+        params.set("tagline", tagline);
+    params.set("locale", input.locale);
+    params.set("seed", String(input.seed));
     for (const key of PICK_KEYS)
         params.set(key, String(input.picks[key]));
     return params;
@@ -366,11 +474,12 @@ function count(value, max) {
 export function readDraftParams(params) {
     const name = params.get("name")?.trim() ?? "";
     const idea = params.get("idea")?.trim() ?? "";
+    const tagline = params.get("tagline")?.trim() ?? "";
     const locale = LOCALES.find((code) => code === params.get("locale"));
     const seed = count(params.get("seed"), 2147483647);
     if (!name || name.length > DRAFT_LIMITS.name || idea.length > DRAFT_LIMITS.idea)
         return null;
-    if (!locale || !seed)
+    if (tagline.length > DRAFT_LIMITS.idea || !locale || !seed)
         return null;
     const picks = { colors: 0, fonts: 0, logo: 0 };
     for (const key of PICK_KEYS) {
@@ -379,5 +488,5 @@ export function readDraftParams(params) {
             return null;
         picks[key] = value;
     }
-    return { name, idea, locale, seed, picks };
+    return { name, idea, ...(tagline ? { tagline } : {}), locale, seed, picks };
 }

package/dist/files/docs.d.ts

@@ -23,6 +23,8 @@ export type HeadOptions = {
     base?: string;
     /** The absolute URL of the share card, like https://acme.com/og.png. */
     ogImage?: string;
+    /** The card's alt text when the card is a page's own (generate's `pages`), not the brand's. */
+    imageAlt?: string;
     locale?: Locale;
     /** The page title, when it is not the brand's name. */
     title?: string;

package/dist/files/docs.js

@@ -247,7 +247,7 @@ export function headTags(brand, options = {}) {
         `<meta property="og:description" content="${escapeHtml(copy.description)}">`,
     ];
     if (options.ogImage) {
-        tags.push(`<meta property="og:image" content="${escapeHtml(options.ogImage)}">`, '<meta property="og:image:width" content="1200">', '<meta property="og:image:height" content="630">', `<meta property="og:image:alt" content="${escapeHtml(ogAlt(brand, options.locale))}">`, '<meta name="twitter:card" content="summary_large_image">');
+        tags.push(`<meta property="og:image" content="${escapeHtml(options.ogImage)}">`, '<meta property="og:image:width" content="1200">', '<meta property="og:image:height" content="630">', `<meta property="og:image:alt" content="${escapeHtml(options.imageAlt ?? ogAlt(brand, options.locale))}">`, '<meta name="twitter:card" content="summary_large_image">');
     }
     return tags;
 }

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The kit's version, kept equal to package.json's (src/brand/schema.test.ts checks it). */
-export declare const VERSION = "0.1.0-next.1";
+export declare const VERSION = "0.1.0-next.3";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The kit's version, kept equal to package.json's (src/brand/schema.test.ts checks it). */
-export const VERSION = "0.1.0-next.1";
+export const VERSION = "0.1.0-next.3";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ideare/kit",
-    "version": "0.1.0-next.1",
+    "version": "0.1.0-next.3",
     "description": "The brand kit engine behind ideare: brand.json, file generation, checks and the scene renderer.",
     "license": "MIT",
     "homepage": "https://ideare.app",