@kuratchi/js 0.0.15 → 0.0.17

package/dist/compiler/parser.js

@@ -1,4 +1,5 @@
 import ts from 'typescript';
+import { collectReferencedIdentifiers, parseNamedImportBindings } from './import-linking.js';
 function getTopLevelImportStatements(source) {
     const sourceFile = ts.createSourceFile('kuratchi-script.ts', source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
     const imports = [];
@@ -29,6 +30,23 @@ export function stripTopLevelImports(source) {
 function hasReactiveLabel(scriptBody) {
     return /\$\s*:/.test(scriptBody);
 }
+const TEMPLATE_JS_CONTROL_PATTERNS = [
+    /^\s*for\s*\(/,
+    /^\s*if\s*\(/,
+    /^\s*switch\s*\(/,
+    /^\s*case\s+.+:\s*$/,
+    /^\s*default\s*:\s*$/,
+    /^\s*break\s*;\s*$/,
+    /^\s*continue\s*;\s*$/,
+    /^\s*\}\s*else\s*if\s*\(/,
+    /^\s*\}\s*else\s*\{?\s*$/,
+    /^\s*\}\s*$/,
+    /^\s*\w[\w.]*\s*(\+\+|--)\s*;\s*$/,
+    /^\s*(let|const|var)\s+/,
+];
+function isTemplateJsControlLine(line) {
+    return TEMPLATE_JS_CONTROL_PATTERNS.some((pattern) => pattern.test(line));
+}
 function splitTopLevel(input, delimiter) {
     const parts = [];
     let start = 0;
@@ -271,6 +289,286 @@ function extractReturnObjectKeys(body) {
     }
     return keys;
 }
+function findTemplateTagEnd(source, start) {
+    let quote = null;
+    let escaped = false;
+    let braceDepth = 0;
+    for (let i = start; i < source.length; i++) {
+        const ch = source[i];
+        if (quote) {
+            if (escaped) {
+                escaped = false;
+                continue;
+            }
+            if (ch === '\\') {
+                escaped = true;
+                continue;
+            }
+            if (ch === quote)
+                quote = null;
+            continue;
+        }
+        if (ch === '"' || ch === "'" || ch === '`') {
+            quote = ch;
+            continue;
+        }
+        if (ch === '{') {
+            braceDepth++;
+            continue;
+        }
+        if (ch === '}') {
+            braceDepth = Math.max(0, braceDepth - 1);
+            continue;
+        }
+        if (ch === '>' && braceDepth === 0)
+            return i;
+    }
+    return -1;
+}
+function parseTemplateTagAttributes(source) {
+    const attrs = new Map();
+    let i = 0;
+    while (i < source.length) {
+        while (i < source.length && /\s/.test(source[i]))
+            i++;
+        if (i >= source.length)
+            break;
+        const nameStart = i;
+        while (i < source.length && /[^\s=/>]/.test(source[i]))
+            i++;
+        const name = source.slice(nameStart, i);
+        if (!name)
+            break;
+        while (i < source.length && /\s/.test(source[i]))
+            i++;
+        if (source[i] !== '=') {
+            attrs.set(name, '');
+            continue;
+        }
+        i++;
+        while (i < source.length && /\s/.test(source[i]))
+            i++;
+        if (i >= source.length) {
+            attrs.set(name, '');
+            break;
+        }
+        if (source[i] === '"' || source[i] === "'") {
+            const quote = source[i];
+            const valueStart = i;
+            i++;
+            while (i < source.length) {
+                if (source[i] === '\\') {
+                    i += 2;
+                    continue;
+                }
+                if (source[i] === quote) {
+                    i++;
+                    break;
+                }
+                i++;
+            }
+            attrs.set(name, source.slice(valueStart, i));
+            continue;
+        }
+        if (source[i] === '{') {
+            const valueStart = i;
+            const closeIdx = findMatchingToken(source, i, '{', '}');
+            if (closeIdx === -1) {
+                attrs.set(name, source.slice(valueStart));
+                break;
+            }
+            i = closeIdx + 1;
+            attrs.set(name, source.slice(valueStart, i));
+            continue;
+        }
+        const valueStart = i;
+        while (i < source.length && /[^\s>]/.test(source[i]))
+            i++;
+        attrs.set(name, source.slice(valueStart, i));
+    }
+    return attrs;
+}
+function tokenizeTemplateTags(template) {
+    const tags = [];
+    let cursor = 0;
+    while (cursor < template.length) {
+        const lt = template.indexOf('<', cursor);
+        if (lt === -1)
+            break;
+        if (template.startsWith('<!--', lt)) {
+            const commentEnd = template.indexOf('-->', lt + 4);
+            if (commentEnd === -1)
+                break;
+            cursor = commentEnd + 3;
+            continue;
+        }
+        const tagEnd = findTemplateTagEnd(template, lt + 1);
+        if (tagEnd === -1)
+            break;
+        const raw = template.slice(lt + 1, tagEnd).trim();
+        cursor = tagEnd + 1;
+        if (!raw || raw.startsWith('!'))
+            continue;
+        const closing = raw.startsWith('/');
+        const normalized = closing ? raw.slice(1).trim() : raw;
+        const nameMatch = normalized.match(/^([A-Za-z][\w:-]*)/);
+        if (!nameMatch)
+            continue;
+        const name = nameMatch[1];
+        const attrSource = normalized.slice(name.length).replace(/\/\s*$/, '').trim();
+        tags.push({
+            name,
+            attrs: closing ? new Map() : parseTemplateTagAttributes(attrSource),
+            closing,
+        });
+    }
+    return tags;
+}
+function extractBracedAttributeExpression(value) {
+    if (!value)
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed.startsWith('{') || !trimmed.endsWith('}'))
+        return null;
+    return trimmed.slice(1, -1).trim();
+}
+function extractAttributeText(value) {
+    if (!value)
+        return null;
+    const trimmed = value.trim();
+    if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+        return trimmed.slice(1, -1);
+    }
+    const braced = extractBracedAttributeExpression(trimmed);
+    if (braced && /^[A-Za-z_$][\w$]*$/.test(braced))
+        return braced;
+    return trimmed || null;
+}
+function extractCallExpression(value) {
+    const expr = extractBracedAttributeExpression(value);
+    if (!expr)
+        return null;
+    const match = expr.match(/^([A-Za-z_$][\w$]*)\(([\s\S]*)\)$/);
+    if (!match)
+        return null;
+    return {
+        fnName: match[1],
+        argsExpr: (match[2] || '').trim(),
+    };
+}
+function extractTopLevelImportNames(source) {
+    const sourceFile = ts.createSourceFile('kuratchi-inline-client.ts', source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const names = [];
+    for (const statement of sourceFile.statements) {
+        if (!ts.isImportDeclaration(statement))
+            continue;
+        const clause = statement.importClause;
+        if (!clause)
+            continue;
+        if (clause.name)
+            pushIdentifier(clause.name.text, names);
+        if (!clause.namedBindings)
+            continue;
+        if (ts.isNamedImports(clause.namedBindings)) {
+            for (const element of clause.namedBindings.elements) {
+                pushIdentifier(element.name.text, names);
+            }
+        }
+        else if (ts.isNamespaceImport(clause.namedBindings)) {
+            pushIdentifier(clause.namedBindings.name.text, names);
+        }
+    }
+    return names;
+}
+function extractImportModuleSpecifier(source) {
+    const sourceFile = ts.createSourceFile('kuratchi-import-spec.ts', source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const statement = sourceFile.statements.find(ts.isImportDeclaration);
+    if (!statement || !ts.isStringLiteral(statement.moduleSpecifier))
+        return null;
+    return statement.moduleSpecifier.text;
+}
+function isExecutableTemplateScript(attrs) {
+    if (/\bsrc\s*=/i.test(attrs))
+        return false;
+    const typeMatch = attrs.match(/\btype\s*=\s*(['"])(.*?)\1/i);
+    const type = typeMatch?.[2]?.trim().toLowerCase();
+    if (!type)
+        return true;
+    return type === 'module' || type === 'text/javascript' || type === 'application/javascript';
+}
+function collectTemplateClientDeclaredNames(template) {
+    const declared = new Set();
+    const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+    let match;
+    while ((match = scriptRegex.exec(template)) !== null) {
+        const attrs = match[1] || '';
+        const body = match[2] || '';
+        if (!isExecutableTemplateScript(attrs))
+            continue;
+        // TypeScript source works directly for reference collection
+        for (const name of extractTopLevelImportNames(body))
+            declared.add(name);
+        for (const name of extractTopLevelDataVars(body))
+            declared.add(name);
+        for (const name of extractTopLevelFunctionNames(body))
+            declared.add(name);
+    }
+    return Array.from(declared);
+}
+function stripLeadingTopLevelScriptBlock(template) {
+    return template.replace(/^(\s*)<script(\s[^>]*)?\s*>[\s\S]*?<\/script>\s*/i, '');
+}
+function stripTemplateRawBlocks(template) {
+    return template
+        .replace(/<script\b[\s\S]*?<\/script>/gi, '')
+        .replace(/<style\b[\s\S]*?<\/style>/gi, '');
+}
+function extractBraceExpressions(line) {
+    const expressions = [];
+    let cursor = 0;
+    while (cursor < line.length) {
+        const openIdx = line.indexOf('{', cursor);
+        if (openIdx === -1)
+            break;
+        const closeIdx = findMatchingToken(line, openIdx, '{', '}');
+        if (closeIdx === -1)
+            break;
+        const expression = line.slice(openIdx + 1, closeIdx).trim();
+        const beforeBrace = line.slice(0, openIdx);
+        const charBefore = openIdx > 0 ? line[openIdx - 1] : '';
+        let attrName = null;
+        if (charBefore === '=') {
+            const attrMatch = beforeBrace.match(/([\w-]+)=$/);
+            attrName = attrMatch ? attrMatch[1] : null;
+        }
+        expressions.push({ expression, attrName });
+        cursor = closeIdx + 1;
+    }
+    return expressions;
+}
+function collectServerTemplateReferences(template) {
+    const refs = new Set();
+    const stripped = stripTemplateRawBlocks(template);
+    const lines = stripped.split('\n');
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed)
+            continue;
+        if (isTemplateJsControlLine(trimmed)) {
+            for (const ref of collectReferencedIdentifiers(trimmed))
+                refs.add(ref);
+        }
+        for (const entry of extractBraceExpressions(line)) {
+            if (!entry.expression)
+                continue;
+            if (entry.attrName && /^on[A-Za-z]+$/i.test(entry.attrName))
+                continue;
+            for (const ref of collectReferencedIdentifiers(entry.expression))
+                refs.add(ref);
+        }
+    }
+    return refs;
+}
 function extractExplicitLoad(scriptBody) {
     let i = 0;
     let depthParen = 0;
@@ -685,12 +983,15 @@ export function parseFile(source, options = {}) {
     // Extract all imports from script
     const serverImports = [];
     const clientImports = [];
+    const routeClientImports = [];
+    const routeClientImportBindings = [];
     const componentImports = {};
     const workerEnvAliases = [];
     const devAliases = [];
     if (script) {
         for (const statement of getTopLevelImportStatements(script)) {
             const line = statement.text.trim();
+            const moduleSpecifier = extractImportModuleSpecifier(line);
             // Check for component imports: import Name from '$lib/file.html' or '@kuratchi/ui/file.html'
             const libMatch = line.match(/import\s+([A-Za-z_$][\w$]*)\s+from\s+['"]\$lib\/([^'"]+\.html)['"]/s);
             const pkgMatch = !libMatch ? line.match(/import\s+([A-Za-z_$][\w$]*)\s+from\s+['"](@[^/'"]+\/[^/'"]+)\/([^'"]+\.html)['"]/s) : null;
@@ -714,6 +1015,14 @@ export function parseFile(source, options = {}) {
                     }
                     continue;
                 }
+                if (moduleSpecifier?.startsWith('$client/')) {
+                    routeClientImports.push(line);
+                    for (const binding of extractTopLevelImportNames(line)) {
+                        if (!routeClientImportBindings.includes(binding))
+                            routeClientImportBindings.push(binding);
+                    }
+                    continue;
+                }
                 serverImports.push(line);
             }
             for (const alias of extractCloudflareEnvAliases(line)) {
@@ -757,11 +1066,22 @@ export function parseFile(source, options = {}) {
         if (workerEnvAliases.length > 0 && kind !== 'route') {
             throw buildEnvAccessError(kind, options.filePath, `Imported env from cloudflare:workers in a ${kind} script.`);
         }
-        const transpiledScriptBody = transpileTypeScript(scriptBody, 'route-script.ts');
-        const topLevelVars = extractTopLevelDataVars(transpiledScriptBody);
+        // TypeScript source works directly for reference collection
+        const serverScriptRefs = new Set(collectReferencedIdentifiers(scriptBody));
+        if (loadFunction) {
+            for (const ref of collectReferencedIdentifiers(loadFunction))
+                serverScriptRefs.add(ref);
+        }
+        const leakedClientScriptBindings = routeClientImportBindings.filter((name) => serverScriptRefs.has(name));
+        if (leakedClientScriptBindings.length > 0) {
+            throw new Error(`[kuratchi compiler] ${options.filePath || kind}\n` +
+                `Top-level $client imports cannot be used in server route code: ${leakedClientScriptBindings.join(', ')}.\n` +
+                `Move this usage to a client event handler or client bridge code, or import from $shared instead.`);
+        }
+        const topLevelVars = extractTopLevelDataVars(scriptBody);
         for (const v of topLevelVars)
             dataVars.push(v);
-        const topLevelFns = extractTopLevelFunctionNames(transpiledScriptBody);
+        const topLevelFns = extractTopLevelFunctionNames(scriptBody);
         for (const fn of topLevelFns) {
             if (!dataVars.includes(fn))
                 dataVars.push(fn);
@@ -772,15 +1092,8 @@ export function parseFile(source, options = {}) {
         }
         // Server import named bindings are also data vars (available in templates)
         for (const line of serverImports) {
-            const namesMatch = line.match(/import\s*\{([^}]+)\}/);
-            if (!namesMatch)
-                continue;
-            for (const part of namesMatch[1].split(',')) {
-                const trimmed = part.trim();
-                if (!trimmed)
-                    continue;
-                const segments = trimmed.split(/\s+as\s+/);
-                const localName = (segments[1] || segments[0]).trim();
+            for (const binding of parseNamedImportBindings(line)) {
+                const localName = binding.local.trim();
                 if (localName && !dataVars.includes(localName))
                     dataVars.push(localName);
             }
@@ -791,74 +1104,140 @@ export function parseFile(source, options = {}) {
     // This prevents commented-out code (<!-- ... -->) from being parsed as live
     // action expressions, which would cause false "Invalid action expression" errors.
     const templateWithoutComments = template.replace(/<!--[\s\S]*?-->/g, '');
-    // Extract action functions referenced in template: action={fnName}
+    const templateTags = tokenizeTemplateTags(templateWithoutComments);
     const actionFunctions = [];
+    const pollFunctions = [];
+    const dataGetQueries = [];
+    for (const tag of templateTags) {
+        if (tag.closing)
+            continue;
+        const actionExpr = extractBracedAttributeExpression(tag.attrs.get('action'));
+        if (actionExpr && /^[A-Za-z_$][\w$]*$/.test(actionExpr) && !actionFunctions.includes(actionExpr)) {
+            actionFunctions.push(actionExpr);
+        }
+        for (const [attrName, attrValue] of tag.attrs.entries()) {
+            if (/^on[A-Za-z]+$/i.test(attrName)) {
+                const actionCall = extractCallExpression(attrValue);
+                if (actionCall && !actionFunctions.includes(actionCall.fnName))
+                    actionFunctions.push(actionCall.fnName);
+            }
+            if (/^data-(post|put|patch|delete)$/.test(attrName)) {
+                const methodCall = extractCallExpression(attrValue);
+                if (methodCall && !actionFunctions.includes(methodCall.fnName))
+                    actionFunctions.push(methodCall.fnName);
+            }
+        }
+        const pollCall = extractCallExpression(tag.attrs.get('data-poll'));
+        if (pollCall && !pollFunctions.includes(pollCall.fnName)) {
+            pollFunctions.push(pollCall.fnName);
+        }
+        const getCall = extractCallExpression(tag.attrs.get('data-get'));
+        const asName = extractAttributeText(tag.attrs.get('data-as'));
+        if (!getCall || !asName || !/^[A-Za-z_$][\w$]*$/.test(asName))
+            continue;
+        const key = (extractAttributeText(tag.attrs.get('data-key')) || asName).trim();
+        if (!pollFunctions.includes(getCall.fnName))
+            pollFunctions.push(getCall.fnName);
+        if (!dataVars.includes(asName))
+            dataVars.push(asName);
+        const exists = dataGetQueries.some((q) => q.asName === asName);
+        if (!exists)
+            dataGetQueries.push({ fnName: getCall.fnName, argsExpr: getCall.argsExpr, asName, key });
+    }
+    for (const clientBinding of routeClientImportBindings) {
+        const idx = actionFunctions.indexOf(clientBinding);
+        if (idx !== -1)
+            actionFunctions.splice(idx, 1);
+    }
+    const templateTemplateScriptSource = clientScript ? stripLeadingTopLevelScriptBlock(template) : template;
+    const templateClientDeclaredNames = collectTemplateClientDeclaredNames(templateTemplateScriptSource);
+    const serverTemplateRefs = collectServerTemplateReferences(template);
+    const leakedRouteClientTemplateBindings = routeClientImportBindings.filter((name) => serverTemplateRefs.has(name));
+    if (leakedRouteClientTemplateBindings.length > 0) {
+        throw new Error(`[kuratchi compiler] ${options.filePath || kind}\n` +
+            `Top-level $client imports cannot be used in server-rendered template output: ${leakedRouteClientTemplateBindings.join(', ')}.\n` +
+            `Use $shared for portable helpers or move this usage into a client event handler.`);
+    }
+    if (templateClientDeclaredNames.length > 0) {
+        const leakedNames = templateClientDeclaredNames.filter((name) => serverTemplateRefs.has(name));
+        if (leakedNames.length > 0) {
+            throw new Error(`[kuratchi compiler] ${options.filePath || kind}\n` +
+                `Client template <script> bindings cannot be used in server-rendered template output: ${leakedNames.join(', ')}.\n` +
+                `Move shared/pure helpers into the top route <script> or a $shared module.`);
+        }
+    }
+    /*
+    // Extract action functions referenced in template: action={fnName}
+    const actionFunctions: string[] = [];
     const actionRegex = /action=\{(\w+)\}/g;
     let am;
     while ((am = actionRegex.exec(templateWithoutComments)) !== null) {
-        if (!actionFunctions.includes(am[1])) {
-            actionFunctions.push(am[1]);
-        }
+      if (!actionFunctions.includes(am[1])) {
+        actionFunctions.push(am[1]);
+      }
     }
     // Also collect onX={fnName(...)} candidates (e.g. onclick, onClick, onChange)
     // — the compiler will filter these against actual imports to determine server actions.
     const eventActionRegex = /on[A-Za-z]+\s*=\{(\w+)\s*\(/g;
     let em;
     while ((em = eventActionRegex.exec(templateWithoutComments)) !== null) {
-        if (!actionFunctions.includes(em[1])) {
-            actionFunctions.push(em[1]);
-        }
+      if (!actionFunctions.includes(em[1])) {
+        actionFunctions.push(em[1]);
+      }
     }
     // Collect method-style action attributes: data-post/data-put/data-patch/data-delete
     const methodActionRegex = /data-(?:post|put|patch|delete)\s*=\{(\w+)\s*\(/g;
     let mm;
     while ((mm = methodActionRegex.exec(templateWithoutComments)) !== null) {
-        if (!actionFunctions.includes(mm[1])) {
-            actionFunctions.push(mm[1]);
-        }
+      if (!actionFunctions.includes(mm[1])) {
+        actionFunctions.push(mm[1]);
+      }
     }
+  
     // Extract poll functions referenced in template: data-poll={fnName(args)}
-    const pollFunctions = [];
+    const pollFunctions: string[] = [];
     const pollRegex = /data-poll=\{(\w+)\s*\(/g;
     let pm;
     while ((pm = pollRegex.exec(templateWithoutComments)) !== null) {
-        if (!pollFunctions.includes(pm[1])) {
-            pollFunctions.push(pm[1]);
-        }
+      if (!pollFunctions.includes(pm[1])) {
+        pollFunctions.push(pm[1]);
+      }
     }
+  
     // Extract query blocks: tags that include both data-get={fn(args)} and data-as=...
-    const dataGetQueries = [];
+    const dataGetQueries: Array<{ fnName: string; argsExpr: string; asName: string; key?: string }> = [];
     const tagRegex = /<[^>]+>/g;
     let tm;
     while ((tm = tagRegex.exec(templateWithoutComments)) !== null) {
-        const tag = tm[0];
-        const getMatch = tag.match(/\bdata-get=\{([\s\S]*?)\}/);
-        if (!getMatch)
-            continue;
-        const call = getMatch[1].trim();
-        const callMatch = call.match(/^([A-Za-z_$][\w$]*)\(([\s\S]*)\)$/);
-        if (!callMatch)
-            continue;
-        const fnName = callMatch[1];
-        const argsExpr = (callMatch[2] || '').trim();
-        const asMatch = tag.match(/\bdata-as="([A-Za-z_$][\w$]*)"/) ||
-            tag.match(/\bdata-as='([A-Za-z_$][\w$]*)'/) ||
-            tag.match(/\bdata-as=\{([A-Za-z_$][\w$]*)\}/);
-        if (!asMatch)
-            continue;
-        const asName = asMatch[1];
-        const keyMatch = tag.match(/\bdata-key="([^"]+)"/) ||
-            tag.match(/\bdata-key='([^']+)'/) ||
-            tag.match(/\bdata-key=\{([^}]+)\}/);
-        const key = keyMatch?.[1]?.trim() || asName;
-        if (!pollFunctions.includes(fnName))
-            pollFunctions.push(fnName);
-        if (!dataVars.includes(asName))
-            dataVars.push(asName);
-        const exists = dataGetQueries.some((q) => q.asName === asName);
-        if (!exists)
-            dataGetQueries.push({ fnName, argsExpr, asName, key });
+      const tag = tm[0];
+      const getMatch = tag.match(/\bdata-get=\{([\s\S]*?)\}/);
+      if (!getMatch) continue;
+      const call = getMatch[1].trim();
+      const callMatch = call.match(/^([A-Za-z_$][\w$]*)\(([\s\S]*)\)$/);
+      if (!callMatch) continue;
+      const fnName = callMatch[1];
+      const argsExpr = (callMatch[2] || '').trim();
+  
+      const asMatch =
+        tag.match(/\bdata-as="([A-Za-z_$][\w$]*)"/) ||
+        tag.match(/\bdata-as='([A-Za-z_$][\w$]*)'/) ||
+        tag.match(/\bdata-as=\{([A-Za-z_$][\w$]*)\}/);
+      if (!asMatch) continue;
+      const asName = asMatch[1];
+  
+      const keyMatch =
+        tag.match(/\bdata-key="([^"]+)"/) ||
+        tag.match(/\bdata-key='([^']+)'/) ||
+        tag.match(/\bdata-key=\{([^}]+)\}/);
+      const key = keyMatch?.[1]?.trim() || asName;
+  
+      if (!pollFunctions.includes(fnName)) pollFunctions.push(fnName);
+      if (!dataVars.includes(asName)) dataVars.push(asName);
+  
+      const exists = dataGetQueries.some((q) => q.asName === asName);
+      if (!exists) dataGetQueries.push({ fnName, argsExpr, asName, key });
     }
+    */
     return {
         script,
         loadFunction,
@@ -871,9 +1250,11 @@ export function parseFile(source, options = {}) {
         pollFunctions,
         dataGetQueries,
         clientImports,
+        routeClientImports,
+        routeClientImportBindings,
         loadReturnVars,
         workerEnvAliases,
         devAliases,
     };
 }
-import { transpileTypeScript } from './transpile.js';
+// TypeScript transpilation removed — wrangler's esbuild handles it

package/dist/compiler/root-layout-pipeline.d.ts

@@ -0,0 +1,10 @@
+export interface UiConfigValues {
+    theme: string;
+    radius: string;
+}
+export declare function prepareRootLayoutSource(opts: {
+    source: string;
+    isDev: boolean;
+    themeCss: string | null;
+    uiConfigValues: UiConfigValues | null;
+}): string;