@brickflow/ui 0.0.34 → 0.0.36

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -3,7 +3,7 @@ import tailwindcss from '@tailwindcss/vite';
 import { createJiti } from 'jiti';
 import { readdir, mkdir, readFile, writeFile } from 'node:fs/promises';
 import { join, basename, extname, dirname, resolve, relative } from 'node:path';
-import { isBrickflowUiStyleReference, getBrickflowUiStyleReferencePath, defineBrickflowUiConfig } from '../dist/runtime/tailwind.js';
+import { isBrickflowUiStyleReference, getBrickflowUiStyleReferencePath, defineBrickflowUi } from '../dist/runtime/tailwind.js';
 import { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon';
 
 const ICON_FILE_PATTERN = /\.svg$/i;
@@ -157,25 +157,23 @@ const replaceUiConfigMacros = (code, config, styles, id, error) => {
       return result + code.slice(cursor);
     }
     const genericStart = start + UI_CONFIG_MACRO.length;
-    if (code[genericStart] !== "<") {
-      result += code.slice(cursor, genericStart);
-      cursor = genericStart;
-      continue;
-    }
-    let depth = 0;
-    let index = genericStart;
-    for (; index < code.length; index += 1) {
-      if (code[index] === "<") {
-        depth += 1;
-      }
-      if (code[index] === ">") {
-        depth -= 1;
-      }
-      if (depth === 0) {
-        break;
+    let callStart = genericStart;
+    if (code[genericStart] === "<") {
+      let depth = 0;
+      let index = genericStart;
+      for (; index < code.length; index += 1) {
+        if (code[index] === "<") {
+          depth += 1;
+        }
+        if (code[index] === ">") {
+          depth -= 1;
+        }
+        if (depth === 0) {
+          break;
+        }
       }
+      callStart = index + 1;
     }
-    let callStart = index + 1;
     while (/\s/u.test(code[callStart] ?? "")) {
       callStart += 1;
     }
@@ -396,14 +394,17 @@ const brickflowUiStylePlugin = (options) => ({
   },
   name: "brickflow-ui-style",
   async transform(code, id) {
-    if (!SCRIPT_FILE_PATTERN.test(id) || !code.includes("UI_STYLE.") && !code.includes("UI_CONFIG.") && !code.includes(UI_CONFIG_MACRO)) {
+    const cleanId = id.split("?")[0] ?? id;
+    const isVirtualModule = cleanId.startsWith("\0") || cleanId.startsWith("virtual:");
+    const isVueSubmodule = cleanId.endsWith(".vue") && id.includes("?vue");
+    if (isVirtualModule || isVueSubmodule && !code.includes(UI_CONFIG_MACRO) || !SCRIPT_FILE_PATTERN.test(id) || !code.includes("UI_STYLE.") && !code.includes("UI_CONFIG.") && !code.includes(UI_CONFIG_MACRO)) {
       return null;
     }
     this.addWatchFile?.(options.configPath);
     const styles = await options.getStyles();
     const config = await options.getConfig();
-    const isConfigFile = normalizePath(id.split("?")[0] ?? id) === normalizePath(options.configPath);
-    const hasUiConfigMacro = code.includes(UI_CONFIG_MACRO);
+    const isConfigFile = normalizePath(cleanId) === normalizePath(options.configPath);
+    const hasUiConfigMacro = cleanId.endsWith(".vue") && code.includes(UI_CONFIG_MACRO);
     let changed = false;
     const codeWithUiConfigMacros = hasUiConfigMacro ? replaceUiConfigMacros(code, config, styles, id, this.error.bind(this)) : code;
     if (codeWithUiConfigMacros !== code) {
@@ -678,7 +679,7 @@ const module$1 = defineNuxtModule({
       );
     };
     const loadUiConfig = async () => {
-      const validateConfig = defineBrickflowUiConfig;
+      const validateConfig = defineBrickflowUi;
       return validateConfig(
         await loadConfig.import(resolvedConfigPath).catch(() => ({}))
       );
@@ -755,10 +756,10 @@ const module$1 = defineNuxtModule({
     const uiConfigTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-config.mjs",
       getContents: () => [
-        `import { defineBrickflowUiConfig } from ${JSON.stringify(resolver.resolve("./runtime/tailwind").replaceAll("\\", "/"))}`,
+        `import { defineBrickflowUi } from ${JSON.stringify(resolver.resolve("./runtime/tailwind").replaceAll("\\", "/"))}`,
         `import rawConfig from ${JSON.stringify(resolvedConfigPath.replaceAll("\\", "/"))}`,
         "",
-        "const config = defineBrickflowUiConfig(rawConfig)",
+        "const config = defineBrickflowUi(rawConfig)",
         "",
         "export const UI_STYLE = config.uiStyles",
         "export const UI_CONFIG = config.uiConfig",

package/dist/runtime/components/Button/variants.demo.vue

@@ -1,5 +1,4 @@
 <script>
-const UI_CONFIG = defineUiConfig();
 export const uiDemo = {
   title: "Color & Variants"
 };
@@ -7,6 +6,7 @@ export const uiDemo = {
 
 <script setup>
 import Button from "./index.vue";
+const UI_CONFIG = defineUiConfig();
 const colors = Object.entries(UI_CONFIG.colorClasses).map(([name, classes]) => ({
   name,
   variants: Object.keys(classes)

package/dist/runtime/pages/ui.vue

@@ -721,6 +721,10 @@ watch(
   </main>
 </template>
 
+<style src="../ui-page.css">
+
+</style>
+
 <style module>
 :global(.ui-code-comment){color:var(--color-zinc-500)}:global(.ui-code-string){color:var(--color-emerald-400)}:global(.ui-code-keyword){color:var(--color-blue-400)}:global(.ui-code-number){color:var(--color-amber-300)}:global(.ui-code-tag){color:var(--color-cyan-500)}:global(.ui-code-attribute){color:var(--color-violet-300)}:global(.ui-code-punctuation){color:var(--color-zinc-400)}:global(.ui-color-swatch){background:var(--ui-color-swatch);border:1px solid hsla(0,0%,100%,.1);border-radius:.2rem;display:inline-block;height:.65rem;margin-right:.25rem;opacity:.85;vertical-align:-.1rem;width:.65rem}.mobileNavigation{width:min(18rem,calc(100vw - 3rem))}@media (width >= 40rem){.styleGrid{grid-template-columns:minmax(12rem,.8fr) minmax(0,1.8fr)}}.styleValue :global(.ui-code-keyword){color:var(--color-zinc-500)}.styleValue :global(.ui-code-attribute){color:var(--color-zinc-200)}.styleValue :global(.ui-code-string){color:var(--color-zinc-300)}.styleValue :global(.ui-code-number){color:var(--color-zinc-400)}.styleValue :global(.ui-code-punctuation){color:var(--color-zinc-500)}
 </style>

package/dist/runtime/tailwind.d.ts

@@ -10,6 +10,10 @@ export type BrickflowUiConfigValue = BrickflowUiConfigObject | BrickflowUiStyleR
 export interface BrickflowUiStyleReference {
     readonly [UI_STYLE_REFERENCE]: readonly string[];
 }
+/** A chainable compile-time reference to a string in `uiStyles`. */
+export type BrickflowUiStyleReferenceValue = string & {
+    readonly [key: string]: any;
+};
 declare global {
     interface BrickflowUiConfigSchema {
     }
@@ -41,12 +45,12 @@ type BrickflowUiConfigValidation<TConfig extends BrickflowUiConfigObject> = keyo
 export declare const emptyUiStyles: {};
 export declare const emptyUiConfig: {};
 export declare const emptyBrickflowUiConfig: BrickflowUiConfig<typeof emptyUiStyles, typeof emptyUiConfig>;
-export declare function defineBrickflowUiConfig(): BrickflowUiConfig<typeof emptyUiStyles, typeof emptyUiConfig>;
-export declare function defineBrickflowUiConfig<const TStyles extends BrickflowUiConfigStylePaths, const TConfig extends BrickflowUiConfigObject>(config: BrickflowUiConfigContext & BrickflowUiConfigInput<BrickflowUiStrictStyles<TStyles>, TConfig> & BrickflowUiConfigValidation<TConfig>): BrickflowUiConfig<TStyles, TConfig>;
+export declare function defineBrickflowUi(): BrickflowUiConfig<typeof emptyUiStyles, typeof emptyUiConfig>;
+export declare function defineBrickflowUi<const TStyles extends BrickflowUiConfigStylePaths, const TConfig extends BrickflowUiConfigObject>(config: BrickflowUiConfigContext & BrickflowUiConfigInput<BrickflowUiStrictStyles<TStyles>, TConfig> & BrickflowUiConfigValidation<TConfig>): BrickflowUiConfig<TStyles, TConfig>;
 export declare const uiStyles: {};
 export declare const uiConfig: {};
 /** A compile-time reference to a value in `uiStyles`, for use inside `uiConfig`. */
-export declare const UI_STYLE: BrickflowUiStyleReference;
+export declare const UI_STYLE: BrickflowUiStyleReferenceValue;
 export declare const isBrickflowUiStyleReference: (value: unknown) => value is BrickflowUiStyleReference;
 export declare const getBrickflowUiStyleReferencePath: (value: BrickflowUiStyleReference) => readonly string[];
 export default emptyBrickflowUiConfig;

package/dist/runtime/tailwind.js

@@ -5,7 +5,7 @@ export const emptyBrickflowUiConfig = {
   uiConfig: emptyUiConfig,
   uiStyles: emptyUiStyles
 };
-export function defineBrickflowUiConfig(config = {}) {
+export function defineBrickflowUi(config = {}) {
   const uiConfig2 = config.uiConfig ?? emptyUiConfig;
   const uiStyles2 = config.uiStyles ?? emptyUiStyles;
   validateUiConfig(uiConfig2);

package/dist/runtime/ui-page.css

@@ -0,0 +1 @@
+@import "tailwindcss";@source "./pages";@source "./components";

package/dist/runtime/ui.css

@@ -1 +1 @@
-@theme{--breakpoint-*:initial}@custom-variant dk (@media (width >= 1440px));@custom-variant lp (@media (width < 1440px));@custom-variant tb (@media (width < 1024px));@custom-variant mb (@media (width < 768px));@custom-variant ms (@media (width < 480px));@media (width < 1440px){.dkHidden{display:none!important}}@media (width < 1024px),(width >= 1440px){.lpHidden{display:none!important}}@media (width < 768px),(width >= 1024px){.tbHidden{display:none!important}}@media (width < 480px),(width >= 768px){.mbHidden{display:none!important}}@media (width >= 480px){.msHidden{display:none!important}}@source "./";
+@theme{--breakpoint-*:initial}@custom-variant dk (@media (width >= 1440px));@custom-variant lp (@media (width < 1440px));@custom-variant tb (@media (width < 1024px));@custom-variant mb (@media (width < 768px));@custom-variant ms (@media (width < 480px));@media (width < 1440px){.dkHidden{display:none!important}}@media (width < 1024px),(width >= 1440px){.lpHidden{display:none!important}}@media (width < 768px),(width >= 1024px){.tbHidden{display:none!important}}@media (width < 480px),(width >= 768px){.mbHidden{display:none!important}}@media (width >= 480px){.msHidden{display:none!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [