@agent-native/toolkit 0.17.6 → 0.18.0-nightly-20260828160610

package/agent-native.eject.json

@@ -270,6 +270,7 @@
       "dependencies": [
         "@radix-ui/react-label",
         "@radix-ui/react-popover",
+        "@radix-ui/react-select",
         "@radix-ui/react-tooltip",
         "@tabler/icons-react",
         "class-variance-authority",

package/dist/design-tweaks/font-family.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { SelectContent } from "../ui/select.js";
+export declare const FONT_FAMILY_OPTIONS: readonly [{
+    readonly value: "inherit";
+    readonly key: "inherit";
+}, {
+    readonly value: "sans-serif";
+    readonly key: "sansSerif";
+}, {
+    readonly value: "serif";
+    readonly key: "serif";
+}, {
+    readonly value: "monospace";
+    readonly key: "monospace";
+}, {
+    readonly value: "'Inter', sans-serif";
+    readonly key: "inter";
+}, {
+    readonly value: "'Poppins', sans-serif";
+    readonly key: "poppins";
+}, {
+    readonly value: "'Playfair Display', serif";
+    readonly key: "playfairDisplay";
+}, {
+    readonly value: "'JetBrains Mono', monospace";
+    readonly key: "jetBrainsMono";
+}];
+export declare function splitFontFamilyList(value: string | undefined): string[];
+export declare function displayFontFamilyName(value: string | undefined): string;
+export declare function resolveFontFamilySelectValue(value: string | undefined): string;
+export interface FontFamilySelectOption {
+    value: string;
+    label: string;
+}
+export interface VisualFontFamilyPickerProps {
+    label: string;
+    value: string;
+    options: readonly FontFamilySelectOption[];
+    onChange: (value: string) => void;
+    className?: string;
+    contentProps?: Omit<ComponentPropsWithoutRef<typeof SelectContent>, "children"> & Partial<Record<`data-${string}`, string | undefined>>;
+    mixed?: boolean;
+    mixedLabel: string;
+}
+export declare function VisualFontFamilyPicker({ label, value, options, onChange, className, contentProps, mixed, mixedLabel, }: VisualFontFamilyPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=font-family.d.ts.map

package/dist/design-tweaks/font-family.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-family.d.ts","sourceRoot":"","sources":["../../src/design-tweaks/font-family.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAEL,aAAa,EAId,MAAM,iBAAiB,CAAC;AAGzB,eAAO,MAAM,mBAAmB;aAC5B,KAAK,EAAE,SAAS;aAAE,GAAG,EAAE,SAAS;;aAChC,KAAK,EAAE,YAAY;aAAE,GAAG,EAAE,WAAW;;aACrC,KAAK,EAAE,OAAO;aAAE,GAAG,EAAE,OAAO;;aAC5B,KAAK,EAAE,WAAW;aAAE,GAAG,EAAE,WAAW;;aACpC,KAAK,EAAE,qBAAqB;aAAE,GAAG,EAAE,OAAO;;aAC1C,KAAK,EAAE,uBAAuB;aAAE,GAAG,EAAE,SAAS;;aAC9C,KAAK,EAAE,2BAA2B;aAAE,GAAG,EAAE,iBAAiB;;aAC1D,KAAK,EAAE,6BAA6B;aAAE,GAAG,EAAE,eAAe;EACpD,CAAC;AAUX,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,EAAE,CAoBvE;AAUD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAiBvE;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,MAAM,GAAG,SAAS,GACxB,MAAM,CAgBR;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,IAAI,CACjB,wBAAwB,CAAC,OAAO,aAAa,CAAC,EAC9C,UAAU,CACX,GACC,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,KAAa,EACb,UAAU,GACX,EAAE,2BAA2B,+BAyC7B"}

package/dist/design-tweaks/font-family.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../ui/select.js";
+import { cn } from "../utils.js";
+export const FONT_FAMILY_OPTIONS = [
+    { value: "inherit", key: "inherit" },
+    { value: "sans-serif", key: "sansSerif" },
+    { value: "serif", key: "serif" },
+    { value: "monospace", key: "monospace" },
+    { value: "'Inter', sans-serif", key: "inter" },
+    { value: "'Poppins', sans-serif", key: "poppins" },
+    { value: "'Playfair Display', serif", key: "playfairDisplay" },
+    { value: "'JetBrains Mono', monospace", key: "jetBrainsMono" },
+];
+function cleanFontFamilyName(value) {
+    const trimmed = value.trim();
+    return (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+        (trimmed.startsWith("'") && trimmed.endsWith("'"))
+        ? trimmed.slice(1, -1).trim()
+        : trimmed;
+}
+export function splitFontFamilyList(value) {
+    if (!value?.trim())
+        return [];
+    const families = [];
+    let token = "";
+    let quote = null;
+    for (let index = 0; index < value.length; index += 1) {
+        const char = value[index];
+        if ((char === '"' || char === "'") && value[index - 1] !== "\\") {
+            if (quote === char)
+                quote = null;
+            else if (!quote)
+                quote = char;
+        }
+        if (char === "," && !quote) {
+            const family = cleanFontFamilyName(token);
+            if (family)
+                families.push(family);
+            token = "";
+        }
+        else
+            token += char;
+    }
+    const family = cleanFontFamilyName(token);
+    if (family)
+        families.push(family);
+    return families;
+}
+function normalizeFontFamilyName(value) {
+    return cleanFontFamilyName(value).replace(/\s+/g, " ").toLowerCase();
+}
+function normalizeFontFamilyStack(value) {
+    return splitFontFamilyList(value).map(normalizeFontFamilyName).join(",");
+}
+export function displayFontFamilyName(value) {
+    const first = splitFontFamilyList(value)[0];
+    if (!first)
+        return "Sans Serif"; // i18n-ignore shared generic font label
+    const normalized = normalizeFontFamilyName(first);
+    if (normalized === "sans-serif") {
+        return "Sans Serif"; // i18n-ignore shared generic font label
+    }
+    if (normalized === "serif")
+        return "Serif"; // i18n-ignore shared generic font label
+    if (normalized === "monospace") {
+        return "Monospace"; // i18n-ignore shared generic font label
+    }
+    if (normalized === "system-ui" || normalized === "-apple-system")
+        return "System UI"; // i18n-ignore shared generic font label
+    if (normalized === "blinkmacsystemfont") {
+        return "Apple System"; // i18n-ignore shared generic font label
+    }
+    return first;
+}
+export function resolveFontFamilySelectValue(value) {
+    const raw = value?.trim();
+    if (!raw)
+        return "sans-serif";
+    const normalizedStack = normalizeFontFamilyStack(raw);
+    const exact = FONT_FAMILY_OPTIONS.find((option) => normalizeFontFamilyStack(option.value) === normalizedStack);
+    if (exact)
+        return exact.value;
+    const first = normalizeFontFamilyName(splitFontFamilyList(raw)[0] ?? "");
+    return (FONT_FAMILY_OPTIONS.find((option) => normalizeFontFamilyName(splitFontFamilyList(option.value)[0] ?? "") ===
+        first)?.value ?? raw);
+}
+export function VisualFontFamilyPicker({ label, value, options, onChange, className, contentProps, mixed = false, mixedLabel, }) {
+    const selectValue = mixed ? "__mixed_font_family__" : value;
+    const unknown = !mixed && !options.some((option) => option.value === value)
+        ? { value, label: displayFontFamilyName(value) }
+        : null;
+    return (_jsxs(Select, { value: selectValue, onValueChange: onChange, children: [_jsx(SelectTrigger, { "aria-label": label, className: cn("h-6 w-full px-1.5 text-[11px]", className), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { ...contentProps, children: [mixed ? (_jsx(SelectItem, { value: "__mixed_font_family__", disabled: true, className: "!text-[11px] text-muted-foreground", children: mixedLabel })) : null, unknown ? (_jsx(SelectItem, { value: unknown.value, className: "!text-[11px]", children: unknown.label })) : null, options.map((option) => (_jsx(SelectItem, { value: option.value, className: "!text-[11px]", children: option.label }, option.value)))] })] }));
+}
+//# sourceMappingURL=font-family.js.map

package/dist/design-tweaks/font-family.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-family.js","sourceRoot":"","sources":["../../src/design-tweaks/font-family.tsx"],"names":[],"mappings":"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"}

package/dist/design-tweaks/font-family.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=font-family.spec.d.ts.map

package/dist/design-tweaks/font-family.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-family.spec.d.ts","sourceRoot":"","sources":["../../src/design-tweaks/font-family.spec.ts"],"names":[],"mappings":""}

package/dist/design-tweaks/font-family.spec.js

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { displayFontFamilyName, resolveFontFamilySelectValue, splitFontFamilyList, } from "./font-family.js";
+describe("font family design tweaks", () => {
+    it("parses quoted stacks and resolves known families", () => {
+        expect(splitFontFamilyList("'Playfair Display', serif")).toEqual([
+            "Playfair Display",
+            "serif",
+        ]);
+        expect(resolveFontFamilySelectValue('"Inter", sans-serif')).toBe("'Inter', sans-serif");
+    });
+    it("preserves unknown values while displaying their first family", () => {
+        expect(resolveFontFamilySelectValue("Brand Sans, sans-serif")).toBe("Brand Sans, sans-serif");
+        expect(displayFontFamilyName("Brand Sans, sans-serif")).toBe("Brand Sans");
+    });
+});
+//# sourceMappingURL=font-family.spec.js.map

package/dist/design-tweaks/font-family.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-family.spec.js","sourceRoot":"","sources":["../../src/design-tweaks/font-family.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EACL,qBAAqB,EACrB,4BAA4B,EAC5B,mBAAmB,GACpB,MAAM,kBAAkB,CAAC;AAE1B,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,CAAC,mBAAmB,CAAC,2BAA2B,CAAC,CAAC,CAAC,OAAO,CAAC;YAC/D,kBAAkB;YAClB,OAAO;SACR,CAAC,CAAC;QACH,MAAM,CAAC,4BAA4B,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAC9D,qBAAqB,CACtB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,GAAG,EAAE;QACtE,MAAM,CAAC,4BAA4B,CAAC,wBAAwB,CAAC,CAAC,CAAC,IAAI,CACjE,wBAAwB,CACzB,CAAC;QACF,MAAM,CAAC,qBAAqB,CAAC,wBAAwB,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/design-tweaks/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./visual-style-controls.js";
+export * from "./font-family.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/design-tweaks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-tweaks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-tweaks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC"}

package/dist/design-tweaks/index.js

@@ -1,2 +1,3 @@
 export * from "./visual-style-controls.js";
+export * from "./font-family.js";
 //# sourceMappingURL=index.js.map

package/dist/design-tweaks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/design-tweaks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/design-tweaks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.17.6",
+  "version": "0.18.0-nightly-20260828160610",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/src/design-tweaks/font-family.spec.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  displayFontFamilyName,
+  resolveFontFamilySelectValue,
+  splitFontFamilyList,
+} from "./font-family.js";
+
+describe("font family design tweaks", () => {
+  it("parses quoted stacks and resolves known families", () => {
+    expect(splitFontFamilyList("'Playfair Display', serif")).toEqual([
+      "Playfair Display",
+      "serif",
+    ]);
+    expect(resolveFontFamilySelectValue('"Inter", sans-serif')).toBe(
+      "'Inter', sans-serif",
+    );
+  });
+
+  it("preserves unknown values while displaying their first family", () => {
+    expect(resolveFontFamilySelectValue("Brand Sans, sans-serif")).toBe(
+      "Brand Sans, sans-serif",
+    );
+    expect(displayFontFamilyName("Brand Sans, sans-serif")).toBe("Brand Sans");
+  });
+});

package/src/design-tweaks/font-family.tsx

@@ -0,0 +1,170 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select.js";
+import { cn } from "../utils.js";
+
+export const FONT_FAMILY_OPTIONS = [
+  { value: "inherit", key: "inherit" },
+  { value: "sans-serif", key: "sansSerif" },
+  { value: "serif", key: "serif" },
+  { value: "monospace", key: "monospace" },
+  { value: "'Inter', sans-serif", key: "inter" },
+  { value: "'Poppins', sans-serif", key: "poppins" },
+  { value: "'Playfair Display', serif", key: "playfairDisplay" },
+  { value: "'JetBrains Mono', monospace", key: "jetBrainsMono" },
+] as const;
+
+function cleanFontFamilyName(value: string): string {
+  const trimmed = value.trim();
+  return (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+    (trimmed.startsWith("'") && trimmed.endsWith("'"))
+    ? trimmed.slice(1, -1).trim()
+    : trimmed;
+}
+
+export function splitFontFamilyList(value: string | undefined): string[] {
+  if (!value?.trim()) return [];
+  const families: string[] = [];
+  let token = "";
+  let quote: '"' | "'" | null = null;
+  for (let index = 0; index < value.length; index += 1) {
+    const char = value[index];
+    if ((char === '"' || char === "'") && value[index - 1] !== "\\") {
+      if (quote === char) quote = null;
+      else if (!quote) quote = char;
+    }
+    if (char === "," && !quote) {
+      const family = cleanFontFamilyName(token);
+      if (family) families.push(family);
+      token = "";
+    } else token += char;
+  }
+  const family = cleanFontFamilyName(token);
+  if (family) families.push(family);
+  return families;
+}
+
+function normalizeFontFamilyName(value: string): string {
+  return cleanFontFamilyName(value).replace(/\s+/g, " ").toLowerCase();
+}
+
+function normalizeFontFamilyStack(value: string): string {
+  return splitFontFamilyList(value).map(normalizeFontFamilyName).join(",");
+}
+
+export function displayFontFamilyName(value: string | undefined): string {
+  const first = splitFontFamilyList(value)[0];
+  if (!first) return "Sans Serif"; // i18n-ignore shared generic font label
+  const normalized = normalizeFontFamilyName(first);
+  if (normalized === "sans-serif") {
+    return "Sans Serif"; // i18n-ignore shared generic font label
+  }
+  if (normalized === "serif") return "Serif"; // i18n-ignore shared generic font label
+  if (normalized === "monospace") {
+    return "Monospace"; // i18n-ignore shared generic font label
+  }
+  if (normalized === "system-ui" || normalized === "-apple-system")
+    return "System UI"; // i18n-ignore shared generic font label
+  if (normalized === "blinkmacsystemfont") {
+    return "Apple System"; // i18n-ignore shared generic font label
+  }
+  return first;
+}
+
+export function resolveFontFamilySelectValue(
+  value: string | undefined,
+): string {
+  const raw = value?.trim();
+  if (!raw) return "sans-serif";
+  const normalizedStack = normalizeFontFamilyStack(raw);
+  const exact = FONT_FAMILY_OPTIONS.find(
+    (option) => normalizeFontFamilyStack(option.value) === normalizedStack,
+  );
+  if (exact) return exact.value;
+  const first = normalizeFontFamilyName(splitFontFamilyList(raw)[0] ?? "");
+  return (
+    FONT_FAMILY_OPTIONS.find(
+      (option) =>
+        normalizeFontFamilyName(splitFontFamilyList(option.value)[0] ?? "") ===
+        first,
+    )?.value ?? raw
+  );
+}
+
+export interface FontFamilySelectOption {
+  value: string;
+  label: string;
+}
+
+export interface VisualFontFamilyPickerProps {
+  label: string;
+  value: string;
+  options: readonly FontFamilySelectOption[];
+  onChange: (value: string) => void;
+  className?: string;
+  contentProps?: Omit<
+    ComponentPropsWithoutRef<typeof SelectContent>,
+    "children"
+  > &
+    Partial<Record<`data-${string}`, string | undefined>>;
+  mixed?: boolean;
+  mixedLabel: string;
+}
+
+export function VisualFontFamilyPicker({
+  label,
+  value,
+  options,
+  onChange,
+  className,
+  contentProps,
+  mixed = false,
+  mixedLabel,
+}: VisualFontFamilyPickerProps) {
+  const selectValue = mixed ? "__mixed_font_family__" : value;
+  const unknown =
+    !mixed && !options.some((option) => option.value === value)
+      ? { value, label: displayFontFamilyName(value) }
+      : null;
+  return (
+    <Select value={selectValue} onValueChange={onChange}>
+      <SelectTrigger
+        aria-label={label}
+        className={cn("h-6 w-full px-1.5 text-[11px]", className)}
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent {...contentProps}>
+        {mixed ? (
+          <SelectItem
+            value="__mixed_font_family__"
+            disabled
+            className="!text-[11px] text-muted-foreground"
+          >
+            {mixedLabel}
+          </SelectItem>
+        ) : null}
+        {unknown ? (
+          <SelectItem value={unknown.value} className="!text-[11px]">
+            {unknown.label}
+          </SelectItem>
+        ) : null}
+        {options.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            className="!text-[11px]"
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/design-tweaks/index.ts

@@ -1 +1,2 @@
 export * from "./visual-style-controls.js";
+export * from "./font-family.js";