@brickflow/ui 0.0.23 → 0.0.24

package/dist/module.d.mts

@@ -2,6 +2,7 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
     componentPrefix?: string;
+    configPath?: string;
     target?: string;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,9 +1,164 @@
-import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, resolvePath, addTemplate, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
+import { createJiti } from 'jiti';
+import { readFile, mkdir, writeFile, readdir } from 'node:fs/promises';
+import { resolve, basename, extname, relative, join } from 'node:path';
+import { defineBrickflowUiConfig } from '../dist/runtime/tailwind.js';
 
+const UI_STYLE_PATTERN = /\bUI_STYLE((?:\.[A-Za-z_$][\w$]*)+)/g;
+const SCRIPT_FILE_PATTERN = /\.(?:[cm]?[jt]sx?|vue)(?:\?.*)?$/;
+const TYPE_INDENT = "  ";
+const refreshUiStyleModules = (server) => {
+  server.moduleGraph.invalidateAll();
+  server.ws.send({ type: "full-reload" });
+};
+const normalizePath = (path) => resolve(path).replaceAll("\\", "/");
+const toCamelCase = (value) => {
+  const normalized = value.replace(/^[^a-z_$]+/iu, "").replace(/[^\w$]+([\w$])/gu, (_, letter) => letter.toUpperCase());
+  return normalized ? `${normalized[0]?.toLowerCase()}${normalized.slice(1)}` : "";
+};
+const toStringLiteral = (value) => `'${value.replaceAll("\\", "\\\\").replaceAll("'", "\\'").replaceAll("\r", "\\r").replaceAll("\n", "\\n").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029")}'`;
+const readPath = (source, path) => path.reduce((value, key) => {
+  if (!value || typeof value !== "object") {
+    return void 0;
+  }
+  return value[key];
+}, source);
+const resolveUiStyleConfigPath = (id, path) => {
+  const cleanId = id.split("?")[0] ?? id;
+  if (!cleanId.endsWith(".vue")) {
+    return path;
+  }
+  return [toCamelCase(basename(cleanId, extname(cleanId))), ...path];
+};
+const resolveStyleValue = (styles, id, path) => {
+  const configPathValue = readPath(styles, resolveUiStyleConfigPath(id, path));
+  if (typeof configPathValue === "string") {
+    return configPathValue;
+  }
+  const globalValue = readPath(styles, path);
+  if (typeof globalValue === "string") {
+    return globalValue;
+  }
+  return configPathValue ?? globalValue;
+};
+const createUiStylePathTree = () => ({
+  children: /* @__PURE__ */ new Map()
+});
+const addPathToTree = (tree, path) => {
+  let currentTree = tree;
+  for (const segment of path) {
+    const childTree = currentTree.children.get(segment) ?? createUiStylePathTree();
+    currentTree.children.set(segment, childTree);
+    currentTree = childTree;
+  }
+};
+const renderTypeTree = (tree, level, objectType) => {
+  const lines = [];
+  const indent = TYPE_INDENT.repeat(level);
+  for (const [key, childTree] of [...tree.children.entries()].sort(([a], [b]) => a.localeCompare(b))) {
+    if (childTree.children.size === 0) {
+      lines.push(`${indent}readonly ${key}: string`);
+      continue;
+    }
+    lines.push(objectType ? `${indent}readonly ${key}: ${objectType} & {` : `${indent}readonly ${key}: {`);
+    lines.push(...renderTypeTree(childTree, level + 1, objectType));
+    lines.push(`${indent}}`);
+  }
+  return lines;
+};
+const collectUiStylePathsFromCode = (code) => {
+  const paths = [];
+  for (const match of code.matchAll(UI_STYLE_PATTERN)) {
+    paths.push(match[1]?.slice(1).split(".") ?? []);
+  }
+  return paths.filter((path) => path.length > 0);
+};
+const collectUiStyleConfigPathsFromCode = (code, id) => collectUiStylePathsFromCode(code).map((path) => resolveUiStyleConfigPath(id, path));
+const renderInterfaceDeclaration = (name, paths, objectType) => {
+  const tree = createUiStylePathTree();
+  for (const path of paths) {
+    addPathToTree(tree, path);
+  }
+  return [`  interface ${name} {`, ...renderTypeTree(tree, 2, objectType), "  }"];
+};
+const createUiStyleTypeDeclaration = (options) => {
+  return [
+    "declare global {",
+    ...renderInterfaceDeclaration("BrickflowUiConfigStylePaths", options.configPaths),
+    "",
+    ...renderInterfaceDeclaration("BrickflowUiStylePaths", options.paths, "BrickflowUiStyleValue"),
+    "}",
+    "",
+    "export {}",
+    ""
+  ].join("\n");
+};
+const brickflowUiStylePlugin = (options) => ({
+  buildStart: {
+    handler() {
+      this.addWatchFile?.(options.configPath);
+    }
+  },
+  configureServer(server) {
+    server.watcher.add(options.configPath);
+    server.httpServer?.once("listening", () => {
+      setTimeout(() => refreshUiStyleModules(server), 0);
+    });
+  },
+  enforce: "pre",
+  handleHotUpdate(context) {
+    if (normalizePath(context.file) !== normalizePath(options.configPath)) {
+      return;
+    }
+    refreshUiStyleModules(context.server);
+    return [];
+  },
+  name: "brickflow-ui-style",
+  async transform(code, id) {
+    if (!SCRIPT_FILE_PATTERN.test(id) || !code.includes("UI_STYLE.")) {
+      return null;
+    }
+    this.addWatchFile?.(options.configPath);
+    const styles = await options.getStyles();
+    let changed = false;
+    const transformedCode = code.replace(UI_STYLE_PATTERN, (match, rawPath) => {
+      const path = rawPath.slice(1).split(".");
+      const value = resolveStyleValue(styles, id, path);
+      if (typeof value === "string") {
+        changed = true;
+        return toStringLiteral(value);
+      }
+      if (value === void 0) {
+        changed = true;
+        return "''";
+      }
+      this.error(`UI_STYLE path "${match}" in ${id} points to an object. Use a full string path.`);
+    });
+    return changed ? { code: transformedCode, map: null } : null;
+  }
+});
+
+const UI_STYLE_FILE_PATTERN = /\.(?:[cm]?[jt]sx?|vue)$/;
+const scanUiStyleFiles = async (directory) => {
+  const entries = await readdir(directory, { withFileTypes: true }).catch(() => []);
+  const files = [];
+  for (const entry of entries) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...await scanUiStyleFiles(path));
+      continue;
+    }
+    if (UI_STYLE_FILE_PATTERN.test(entry.name)) {
+      files.push(path);
+    }
+  }
+  return files;
+};
 const module$1 = defineNuxtModule({
   defaults: {
     componentPrefix: "Brick",
+    configPath: "~/ui.config.ts",
     target: "world"
   },
   meta: {
@@ -13,18 +168,88 @@ const module$1 = defineNuxtModule({
     configKey: "brickflowUi",
     name: "@brickflow/ui"
   },
-  setup(options, nuxt) {
+  async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     const currentConfig = nuxt.options.runtimeConfig.public.brickflowUi ?? {};
+    const defaultConfigPath = resolver.resolve("./runtime/tailwind");
+    const runtimePath = resolver.resolve("./runtime");
+    const resolvedConfigPath = await resolvePath(options.configPath ?? defaultConfigPath).catch(
+      () => defaultConfigPath
+    );
+    const loadConfig = createJiti(import.meta.url, {
+      interopDefault: true,
+      moduleCache: false
+    });
+    const loadUiConfig = async () => {
+      const validateConfig = defineBrickflowUiConfig;
+      return validateConfig(
+        await loadConfig.import(resolvedConfigPath).catch(() => ({}))
+      );
+    };
+    await loadUiConfig();
+    const uiStyleTypePath = resolve(nuxt.options.buildDir, "types/brickflow-ui-style.d.ts");
+    const generateUiStyleTypes = async () => {
+      const files = await scanUiStyleFiles(runtimePath);
+      const fileContents = await Promise.all(
+        files.map(async (file) => ({
+          content: await readFile(file, "utf8"),
+          file
+        }))
+      );
+      const paths = fileContents.flatMap(({ content }) => collectUiStylePathsFromCode(content));
+      const configPaths = fileContents.flatMap(
+        ({ content, file }) => collectUiStyleConfigPathsFromCode(content, file)
+      );
+      await mkdir(resolve(nuxt.options.buildDir, "types"), { recursive: true });
+      await writeFile(
+        uiStyleTypePath,
+        createUiStyleTypeDeclaration({
+          configPaths,
+          paths
+        })
+      );
+    };
+    const uiConfigTemplate = addTemplate({
+      filename: "brickflow/brickflow-ui-config.mjs",
+      getContents: () => [
+        `import rawConfig from ${JSON.stringify(resolvedConfigPath.replaceAll("\\", "/"))}`,
+        `import { defineBrickflowUiConfig } from ${JSON.stringify(resolver.resolve("./runtime/tailwind").replaceAll("\\", "/"))}`,
+        "",
+        "const config = defineBrickflowUiConfig(rawConfig)",
+        "",
+        "export const UI_STYLE = config.uiStyles",
+        "export const uiStyles = config.uiStyles",
+        "export default config",
+        ""
+      ].join("\n")
+    });
     nuxt.options.runtimeConfig.public.brickflowUi = {
       ...currentConfig,
       message: "world",
       target: options.target ?? "world"
     };
-    nuxt.options.css.push(resolver.resolve("./runtime/assets/css/main.css"));
+    nuxt.options.alias["#brickflow-ui-config"] = uiConfigTemplate.dst;
+    await generateUiStyleTypes();
+    nuxt.hook("prepare:types", async ({ references }) => {
+      await generateUiStyleTypes();
+      references.push({ path: uiStyleTypePath });
+    });
+    nuxt.hook("builder:watch", async (_event, path) => {
+      const absolutePath = resolve(nuxt.options.srcDir, path);
+      if (relative(runtimePath, absolutePath).startsWith("..") || !UI_STYLE_FILE_PATTERN.test(path)) {
+        return;
+      }
+      await generateUiStyleTypes();
+    });
     nuxt.hook("vite:extendConfig", (config) => {
       const viteConfig = config;
       viteConfig.plugins ??= [];
+      viteConfig.plugins.push(
+        brickflowUiStylePlugin({
+          configPath: resolvedConfigPath,
+          getStyles: async () => (await loadUiConfig()).uiStyles
+        })
+      );
       viteConfig.plugins.push(tailwindcss());
     });
     addImportsDir(resolver.resolve("./runtime/composables"));

package/dist/runtime/assets/css/main.css

@@ -1 +0,0 @@
-@import "tailwindcss";@source "../../components";@theme{--font-sans:"Manrope","Inter",ui-sans-serif,system-ui,sans-serif;--color-brick-50:oklch(0.98 0.01 30);--color-brick-100:oklch(0.95 0.02 30);--color-brick-200:oklch(0.9 0.04 30);--color-brick-400:oklch(0.72 0.15 28);--color-brick-500:oklch(0.64 0.18 28);--color-brick-600:oklch(0.57 0.17 28);--color-ink-950:oklch(0.18 0.02 260);--shadow-brick:0 18px 40px -24px rgba(145,63,43,.55)}

package/dist/runtime/components/Button.vue

@@ -5,19 +5,25 @@ const props = defineProps({
   type: { type: String, required: false, default: "button" },
   variant: { type: String, required: false, default: "primary" }
 });
-const sizeClass = computed(() => props.size === "sm" ? "min-h-10 px-4 text-sm" : "min-h-12 px-5 text-sm/6");
-const variantClass = computed(
-  () => props.variant === "secondary" ? "border border-brick-200/80 bg-white/70 text-ink-950 shadow-[inset_0_1px_0_rgba(255,255,255,0.85)] hover:border-brick-400/50 hover:bg-brick-50" : "border border-brick-500/80 bg-linear-to-r from-brick-500 to-brick-600 text-white shadow-brick hover:from-brick-400 hover:to-brick-500"
-);
+const sizeClasses = {
+  md: UI_STYLE.size.md,
+  sm: UI_STYLE.size.lol
+};
+const variantClasses = {
+  primary: UI_STYLE.variant.primary,
+  secondary: UI_STYLE.variant.secondary
+};
+const sizeClass = computed(() => sizeClasses[props.size]);
+const variantClass = computed(() => variantClasses[props.variant]);
 </script>
 
 <template>
   <button
     :type="props.type"
-    class="inline-flex items-center justify-center gap-2 rounded-full font-semibold tracking-[-0.01em] transition-all duration-200 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brick-500 disabled:pointer-events-none disabled:opacity-50"
-    :class="[sizeClass, variantClass]"
+    :class="[UI_STYLE.base, sizeClass, variantClass]"
     data-testid="brick-button"
   >
+    <span :class="UI_STYLE.size.kio">LOL</span>
     <slot />
   </button>
 </template>

package/dist/runtime/composables/useBrickme.js

@@ -5,7 +5,7 @@ export const usebrickflow = () => {
   const brickflowConfig = computed(() => config.public.brickflowUi ?? {});
   const target = computed(() => brickflowConfig.value.target ?? "world");
   const message = computed(() => brickflowConfig.value.message ?? `Hello ${target.value}`);
-  const className = computed(() => target.value === "world" ? "ring-1 ring-brick-100/70" : "");
+  const className = computed(() => target.value === "world" ? UI_STYLE.state.world : "");
   return {
     className,
     message,

package/dist/runtime/config.d.ts

@@ -0,0 +1,30 @@
+export {}
+
+declare module '#brickflow-ui-config' {
+  import type { BrickflowUiConfig } from './tailwind'
+
+  export const UI_STYLE: BrickflowUiConfig['uiStyles']
+  export const uiStyles: BrickflowUiConfig['uiStyles']
+
+  const config: BrickflowUiConfig
+
+  export default config
+}
+
+declare global {
+  interface BrickflowUiStylePaths {}
+
+  type BrickflowUiStyleType = BrickflowUiStylePaths & BrickflowUiStyleValue
+
+  type BrickflowUiStyleValue = string & {
+    readonly [key: string]: BrickflowUiStyleValue
+  }
+
+  const UI_STYLE: BrickflowUiStyleType
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    readonly UI_STYLE: BrickflowUiStyleType
+  }
+}

package/dist/runtime/tailwind.d.ts

@@ -0,0 +1,25 @@
+export interface BrickflowUiConfig<TStyles = BrickflowUiStyles> {
+    uiStyles: TStyles;
+}
+declare global {
+    interface BrickflowUiConfigStylePaths {
+    }
+    type BrickflowUiStyleObject = {
+        readonly [key: string]: BrickflowUiStyleObject | string;
+    };
+}
+export type BrickflowUiConfigInput<TStyles extends BrickflowUiStyleObject = BrickflowUiStyles> = {
+    readonly uiStyles?: TStyles;
+};
+export type BrickflowUiNoExtraKeys<TValue, TShape> = TValue extends string ? TShape extends string ? TValue : never : TShape extends string ? never : {
+    readonly [K in keyof TValue]: K extends keyof TShape ? BrickflowUiNoExtraKeys<TValue[K], TShape[K]> : never;
+};
+export type BrickflowUiStrictStyles<TStyles extends BrickflowUiConfigStylePaths> = BrickflowUiNoExtraKeys<TStyles, BrickflowUiConfigStylePaths> & TStyles;
+export type BrickflowUiStyles = BrickflowUiStyleObject;
+export declare const emptyUiStyles: {};
+export declare const emptyBrickflowUiConfig: BrickflowUiConfig<typeof emptyUiStyles>;
+export declare function defineBrickflowUiConfig(): BrickflowUiConfig<typeof emptyUiStyles>;
+export declare function defineBrickflowUiConfig<const TStyles extends BrickflowUiConfigStylePaths>(config: BrickflowUiConfigInput<BrickflowUiStrictStyles<TStyles>>): BrickflowUiConfig<TStyles>;
+export declare const uiStyles: {};
+export default emptyBrickflowUiConfig;
+//# sourceMappingURL=tailwind.d.ts.map

package/dist/runtime/tailwind.js

@@ -0,0 +1,30 @@
+export const emptyUiStyles = {};
+export const emptyBrickflowUiConfig = {
+  uiStyles: emptyUiStyles
+};
+export function defineBrickflowUiConfig(config = {}) {
+  const uiStyles2 = config.uiStyles ?? emptyUiStyles;
+  validateUiStyles(uiStyles2);
+  return {
+    uiStyles: uiStyles2
+  };
+}
+export const uiStyles = emptyBrickflowUiConfig.uiStyles;
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function validateUiStyles(value, path = "uiStyles") {
+  if (!isRecord(value)) {
+    throw new TypeError(`${path} must be an object.`);
+  }
+  for (const [key, childValue] of Object.entries(value)) {
+    const childPath = `${path}.${key}`;
+    if (typeof childValue === "string") {
+      continue;
+    }
+    if (isRecord(childValue)) {
+      validateUiStyles(childValue, childPath);
+      continue;
+    }
+    throw new TypeError(`${childPath} must be a string or an object.`);
+  }
+}
+export default emptyBrickflowUiConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -11,10 +11,14 @@
     ".": {
       "types": "./dist/module.d.mts",
       "import": "./dist/module.mjs"
+    },
+    "./tailwind": {
+      "types": "./dist/runtime/tailwind.d.ts",
+      "import": "./dist/runtime/tailwind.js"
     }
   },
   "scripts": {
-    "build": "nuxt-module-build",
+    "build": "nuxt-module-build build",
     "typecheck": "vue-tsc --project tsconfig.json --noEmit",
     "lint": "pnpm typecheck && eslint -v && NODE_ENV=deploy eslint --cache .",
     "lint:fix": "pnpm exec eslint . --fix",
@@ -27,6 +31,7 @@
   "dependencies": {
     "@brickflow/utils": "workspace:*",
     "@tailwindcss/vite": "4.3.2",
+    "jiti": "^2.7.0",
     "tailwindcss": "4.3.2"
   },
   "devDependencies": {

package/dist/runtime/components/Demo.d.vue.ts

@@ -1,4 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
-//# sourceMappingURL=Demo.vue.d.ts.map

package/dist/runtime/components/Demo.vue

@@ -1,24 +0,0 @@
-<script setup>
-import { usebrickflow } from "../composables/useBrickme";
-import Button from "./Button.vue";
-const brickflow = usebrickflow();
-</script>
-
-<template>
-  <section
-    class="grid gap-4 rounded-3xl border border-brick-200/70 bg-white/75 p-6 shadow-brick backdrop-blur"
-    :class="brickflow.className"
-    data-testid="brick-demo"
-  >
-    <div class="grid gap-1">
-      <strong class="text-base font-semibold tracking-[-0.02em] text-ink-950">
-        {{ brickflow.message }}
-      </strong>
-      <span class="text-sm text-zinc-600">Component from @brickflow/ui</span>
-    </div>
-    <div class="flex flex-wrap gap-3">
-      <Button>Primary action</Button>
-      <Button variant="secondary">Secondary action</Button>
-    </div>
-  </section>
-</template>

package/dist/runtime/components/Demo.vue.d.ts

@@ -1,4 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
-//# sourceMappingURL=Demo.vue.d.ts.map