@ozsarman/clarityjs 0.6.0

package/src/ts-plugin.js

@@ -0,0 +1,613 @@
+/**
+ * Clarity.js — TypeScript Language Service Plugin
+ *
+ * Provides deep TypeScript integration for .clarity files:
+ *   • Component prop type inference (from defaults + type annotations)
+ *   • Signal<T> type narrowing (.get() / .set() / .peek())
+ *   • Template expression type checking
+ *   • Virtual .d.ts generation for each .clarity file
+ *   • "Go to definition" across .clarity ↔ .ts boundaries
+ *
+ * ─── Setup in tsconfig.json ───────────────────────────────────────────────────
+ *
+ *   {
+ *     "compilerOptions": {
+ *       "plugins": [{ "name": "@ozsarman/clarityjs/ts-plugin" }]
+ *     }
+ *   }
+ *
+ * ─── VS Code / Volar setup ────────────────────────────────────────────────────
+ *
+ *   // .vscode/settings.json
+ *   {
+ *     "typescript.tsserver.pluginPaths": ["node_modules/@ozsarman/clarityjs"]
+ *   }
+ *
+ * ─── Programmatic use ─────────────────────────────────────────────────────────
+ *
+ *   import { createClarityTypeChecker } from '@ozsarman/clarityjs/ts-plugin';
+ *
+ *   const checker = createClarityTypeChecker({ rootDir: './src' });
+ *   const errors  = await checker.check('MyComponent.clarity');
+ *
+ * Author: Claude (Anthropic) + Özdemir Sarman
+ */
+
+import { parse }          from './parser.js';
+import { tokenize }       from './lexer.js';
+import { generateTypes }  from './typegen.js';
+
+// ─── TypeScript plugin entry point ────────────────────────────────────────────
+
+/**
+ * TypeScript Language Service plugin factory.
+ * TypeScript calls this when it finds the plugin in tsconfig.json.
+ *
+ * @param {{ typescript: typeof import('typescript') }} modules
+ * @returns {{ create(info: ts.server.PluginCreateInfo): ts.LanguageService }}
+ */
+export function init(modules) {
+  const ts = modules.typescript;
+
+  function create(info) {
+    const proxy = Object.create(null);
+    const ls    = info.languageService;
+
+    // Proxy all existing language service methods
+    for (const k of Object.keys(ls)) {
+      const x = ls[k];
+      proxy[k] = typeof x === 'function' ? (...args) => x.apply(ls, args) : x;
+    }
+
+    // ── Intercept getSemanticDiagnostics ─────────────────────────────────
+    proxy.getSemanticDiagnostics = (fileName) => {
+      const prior = ls.getSemanticDiagnostics(fileName);
+
+      if (!fileName.endsWith('.clarity')) return prior;
+
+      const source = _readFile(info, fileName);
+      if (!source) return prior;
+
+      const clarityDiags = _checkClarityFile(ts, fileName, source);
+      return [...prior, ...clarityDiags];
+    };
+
+    // ── Intercept getCompletionsAtPosition ───────────────────────────────
+    proxy.getCompletionsAtPosition = (fileName, position, options) => {
+      const prior = ls.getCompletionsAtPosition(fileName, position, options);
+
+      if (!fileName.endsWith('.clarity')) return prior;
+
+      const source  = _readFile(info, fileName);
+      if (!source) return prior;
+
+      const extra = _getClarityCompletions(ts, fileName, source, position);
+      if (!extra.length) return prior;
+
+      return {
+        ...(prior ?? { isGlobalCompletion: false, isMemberCompletion: false, isNewIdentifierLocation: false }),
+        entries: [...(prior?.entries ?? []), ...extra],
+      };
+    };
+
+    // ── Intercept getQuickInfoAtPosition ─────────────────────────────────
+    proxy.getQuickInfoAtPosition = (fileName, position) => {
+      const prior = ls.getQuickInfoAtPosition(fileName, position);
+      if (!fileName.endsWith('.clarity')) return prior;
+
+      const source = _readFile(info, fileName);
+      if (!source) return prior;
+
+      return _getClarityHover(ts, fileName, source, position) ?? prior;
+    };
+
+    return proxy;
+  }
+
+  return { create };
+}
+
+// ─── Internal: read file from TS host ─────────────────────────────────────────
+
+function _readFile(info, fileName) {
+  try {
+    const snap = info.languageServiceHost.getScriptSnapshot(fileName);
+    if (!snap) return null;
+    return snap.getText(0, snap.getLength());
+  } catch {
+    return null;
+  }
+}
+
+// ─── Internal: check a .clarity file ─────────────────────────────────────────
+
+function _checkClarityFile(ts, fileName, source) {
+  const diags = [];
+
+  try {
+    const tokens = tokenize(source, fileName);
+    const ast    = parse(tokens, source);
+
+    for (const comp of ast.components ?? []) {
+      // Rule: every component must have a render block
+      const hasRender = comp.body.some(n => n.type === 'RenderBlock');
+      if (!hasRender) {
+        diags.push({
+          file:        undefined,
+          start:       comp.loc?.start?.offset ?? 0,
+          length:      comp.name?.length ?? 1,
+          messageText: `Component "${comp.name}" is missing a render block.`,
+          category:    ts.DiagnosticCategory.Warning,
+          code:        9001,
+          source:      'clarity',
+        });
+      }
+
+      // Rule: component name must be PascalCase
+      if (comp.name && !/^[A-Z]/.test(comp.name)) {
+        diags.push({
+          file:        undefined,
+          start:       comp.loc?.start?.offset ?? 0,
+          length:      comp.name.length,
+          messageText: `Component name "${comp.name}" should start with an uppercase letter (PascalCase).`,
+          category:    ts.DiagnosticCategory.Warning,
+          code:        9002,
+          source:      'clarity',
+        });
+      }
+
+      // Rule: detect duplicate signal names
+      const signalNames = new Set();
+      for (const node of comp.body) {
+        if (node.type !== 'StateDecl') continue;
+        if (signalNames.has(node.name)) {
+          diags.push({
+            file:        undefined,
+            start:       node.loc?.start?.offset ?? 0,
+            length:      node.name.length,
+            messageText: `Duplicate signal "${node.name}" in component "${comp.name}".`,
+            category:    ts.DiagnosticCategory.Error,
+            code:        9003,
+            source:      'clarity',
+          });
+        }
+        signalNames.add(node.name);
+      }
+    }
+  } catch (err) {
+    diags.push({
+      file:        undefined,
+      start:       0,
+      length:      1,
+      messageText: `Clarity parse error: ${err.message}`,
+      category:    ts.DiagnosticCategory.Error,
+      code:        9000,
+      source:      'clarity',
+    });
+  }
+
+  return diags;
+}
+
+// ─── Internal: completions for .clarity files ─────────────────────────────────
+
+const CLARITY_BUILTINS = [
+  { name: 'signal',   kind: 'function', detail: 'signal<T>(value: T): Signal<T>',   doc: 'Create a reactive signal.' },
+  { name: 'computed', kind: 'function', detail: 'computed<T>(fn: () => T): Signal<T>', doc: 'Derived reactive value.' },
+  { name: 'effect',   kind: 'function', detail: 'effect(fn: () => void): () => void', doc: 'Run a side effect on signal change.' },
+  { name: 'batch',    kind: 'function', detail: 'batch(fn: () => void): void',       doc: 'Batch multiple signal updates.' },
+  { name: 'onMount',  kind: 'function', detail: 'onMount(fn: () => void): void',     doc: 'Run after component mounts.' },
+  { name: 'onCleanup',kind: 'function', detail: 'onCleanup(fn: () => void): void',   doc: 'Run on component unmount.' },
+  { name: 'onUpdate', kind: 'function', detail: 'onUpdate(fn: () => void): void',    doc: 'Run after each reactive update.' },
+  { name: 'createRef',kind: 'function', detail: 'createRef<T>(init?: T): Ref<T>',   doc: 'Create an imperative ref.' },
+  { name: 'createContext', kind: 'function', detail: 'createContext<T>(defaultValue?: T): Context<T>', doc: 'Create a context object.' },
+  { name: 'useContext',    kind: 'function', detail: 'useContext<T>(ctx: Context<T>): T', doc: 'Read a context value.' },
+  { name: 'navigate', kind: 'function', detail: 'navigate(path: string, opts?: NavigateOptions): Promise<boolean>', doc: 'Client-side navigation.' },
+  { name: 'useHead',  kind: 'function', detail: 'useHead(meta: HeadConfig): void',   doc: 'Set page title/meta tags.' },
+  { name: 'createStore', kind: 'function', detail: 'createStore<S>(config: StoreConfig<S>): Store<S>', doc: 'Global reactive store.' },
+  { name: 'defineServerAction', kind: 'function', detail: 'defineServerAction<I,O>(name: string, handler: (input: I) => Promise<O>): ServerAction<I,O>', doc: 'Register a server action.' },
+  { name: 'useServerAction', kind: 'function', detail: 'useServerAction<I,O>(client, name: string, opts?): UseServerActionResult<I,O>', doc: 'Reactive server action hook.' },
+  { name: 'h',        kind: 'function', detail: 'h(tag: string, attrs?: object, ...children): Element', doc: 'Create a DOM element (hyperscript).' },
+  { name: 'mount',    kind: 'function', detail: 'mount(component: Function, target: Element, props?: object): void', doc: 'Mount a component into the DOM.' },
+  { name: 'when',     kind: 'function', detail: 'when(cond: () => boolean, then: () => Node, else?: () => Node): Node', doc: 'Conditional rendering.' },
+  { name: 'list',     kind: 'function', detail: 'list<T>(items: () => T[], render: (item: T, i: number) => Node, key?: (item: T) => string): Node', doc: 'Keyed list rendering.' },
+];
+
+function _getClarityCompletions(ts, fileName, source, position) {
+  // Find the word being typed at position
+  const before = source.slice(0, position);
+  const match  = before.match(/(\w+)$/);
+  const prefix = match?.[1] ?? '';
+
+  return CLARITY_BUILTINS
+    .filter(b => b.name.startsWith(prefix))
+    .map(b => ({
+      name:             b.name,
+      kind:             ts.ScriptElementKind.functionElement,
+      kindModifiers:    '',
+      sortText:         '0_' + b.name,
+      insertText:       b.name,
+      hasAction:        false,
+      isRecommended:    true,
+      labelDetails:     { detail: ` — ${b.detail}` },
+    }));
+}
+
+// ─── Internal: hover for .clarity files ──────────────────────────────────────
+
+function _getClarityHover(ts, fileName, source, position) {
+  const before  = source.slice(0, position);
+  const after   = source.slice(position);
+  const wordMatch = source.slice(Math.max(0, position - 30), position + 30).match(/\b(\w+)\b/g);
+  if (!wordMatch) return null;
+
+  // Find which word is at the cursor
+  let cursor = Math.max(0, position - 30);
+  let word = null;
+  for (const w of wordMatch) {
+    const idx = source.indexOf(w, cursor);
+    if (idx <= position && position <= idx + w.length) { word = w; break; }
+    cursor = idx + w.length;
+  }
+
+  const builtin = CLARITY_BUILTINS.find(b => b.name === word);
+  if (!builtin) return null;
+
+  return {
+    kind:    ts.ScriptElementKind.functionElement,
+    kindModifiers: '',
+    textSpan: { start: position, length: word.length },
+    displayParts: [
+      { text: builtin.detail, kind: 'text' },
+    ],
+    documentation: [
+      { text: builtin.doc, kind: 'text' },
+    ],
+  };
+}
+
+// ─── Programmatic type checker ────────────────────────────────────────────────
+
+/**
+ * Standalone Clarity type checker — no TypeScript server required.
+ *
+ * Parses .clarity files, generates virtual .d.ts, and reports type-level errors.
+ *
+ * @param {object} opts
+ * @param {string} [opts.rootDir='./src']
+ * @param {boolean}[opts.strict=false]
+ * @returns {ClarityTypeChecker}
+ */
+export function createClarityTypeChecker({ rootDir = './src', strict = false } = {}) {
+  const _cache = new Map(); // fileName → { ast, dts, errors, mtime }
+
+  /**
+   * Parse + type-check a single .clarity file.
+   * @param {string} source  — raw source code
+   * @param {string} [fileName]
+   * @returns {{ dts: string, errors: TypeDiagnostic[] }}
+   */
+  function checkSource(source, fileName = '<unknown>') {
+    const errors = [];
+    let dts = '';
+
+    try {
+      const tokens = tokenize(source, fileName);
+      const ast    = parse(tokens, source);
+      dts          = generateTypes(ast, { filename: fileName });
+
+      // Validate props: detect unknown prop types when strict=true
+      if (strict) {
+        for (const comp of ast.components ?? []) {
+          for (const param of comp.params ?? []) {
+            if (!param.typeAnnotation && !param.defaultValue) {
+              errors.push({
+                file:    fileName,
+                line:    param.loc?.start?.line ?? 0,
+                col:     param.loc?.start?.col  ?? 0,
+                message: `Prop "${param.name}" in component "${comp.name}" has no type annotation or default value. Add a default or annotate the type.`,
+                severity:'warning',
+                code:    9010,
+              });
+            }
+          }
+        }
+      }
+
+      // Signal mutation check: detect direct .value = ... (use .set() instead)
+      const directMutationRe = /\b(\w+)\.value\s*=/g;
+      let m;
+      while ((m = directMutationRe.exec(source)) !== null) {
+        const line = source.slice(0, m.index).split('\n').length;
+        errors.push({
+          file:    fileName,
+          line,
+          col:     0,
+          message: `Direct signal mutation detected: "${m[0]}". Use "${m[1]}.set(value)" instead.`,
+          severity:'error',
+          code:    9011,
+        });
+      }
+
+    } catch (err) {
+      errors.push({
+        file:    fileName,
+        line:    err.line ?? 1,
+        col:     err.col  ?? 0,
+        message: `Parse error: ${err.message}`,
+        severity:'error',
+        code:    9000,
+      });
+    }
+
+    return { dts, errors };
+  }
+
+  /**
+   * Generate a virtual TypeScript declaration for a .clarity component.
+   *
+   * @param {string} source
+   * @param {string} [fileName]
+   * @returns {string}  .d.ts content
+   */
+  function generateDts(source, fileName) {
+    try {
+      const tokens = tokenize(source, fileName ?? '<unknown>');
+      const ast    = parse(tokens, source);
+      return generateTypes(ast, { filename: fileName });
+    } catch {
+      return '// Could not generate types (parse error)\n';
+    }
+  }
+
+  /**
+   * Infer prop types from a component's parameter list.
+   *
+   * @param {string} source
+   * @param {string} componentName
+   * @returns {PropTypeMap}  { propName: typeString }
+   */
+  function inferProps(source, componentName) {
+    try {
+      const tokens = tokenize(source, '<prop-inference>');
+      const ast    = parse(tokens, source);
+      const comp   = ast.components?.find(c => c.name === componentName);
+      if (!comp) return {};
+
+      const result = {};
+      for (const param of comp.params ?? []) {
+        result[param.name] = param.typeAnnotation ??
+          _inferTypeFromDefault(param.defaultValue) ??
+          'unknown';
+      }
+      return result;
+    } catch {
+      return {};
+    }
+  }
+
+  return { checkSource, generateDts, inferProps };
+}
+
+// ─── Internal: infer type from AST default value ──────────────────────────────
+
+function _inferTypeFromDefault(node) {
+  if (!node) return null;
+  switch (node.type) {
+    case 'Literal':
+      if (typeof node.value === 'number')  return 'number';
+      if (typeof node.value === 'string')  return 'string';
+      if (typeof node.value === 'boolean') return 'boolean';
+      if (node.value === null)             return 'null';
+      return null;
+    case 'ArrayExpr':  return 'unknown[]';
+    case 'ObjectExpr': return 'Record<string, unknown>';
+    default:           return null;
+  }
+}
+
+// ─── tsconfig preset ─────────────────────────────────────────────────────────
+
+/**
+ * Recommended tsconfig settings for Clarity projects.
+ * Write to tsconfig.clarity.json and extend it in tsconfig.json.
+ */
+export const TSCONFIG_PRESET = {
+  compilerOptions: {
+    target:            'ES2022',
+    module:            'ESNext',
+    moduleResolution:  'Bundler',
+    jsx:               'preserve',
+    strict:            true,
+    noUnusedLocals:    true,
+    noUnusedParameters:true,
+    exactOptionalPropertyTypes: true,
+    lib:               ['ES2022', 'DOM', 'DOM.Iterable'],
+    types:             ['@ozsarman/clarityjs'],
+    paths: {
+      '@ozsarman/clarityjs':           ['./node_modules/@ozsarman/clarityjs/src/index.js'],
+      '@ozsarman/clarityjs/*':         ['./node_modules/@ozsarman/clarityjs/src/*.js'],
+    },
+    plugins: [{ name: '@ozsarman/clarityjs/ts-plugin' }],
+  },
+  include: ['src/**/*.ts', 'src/**/*.clarity', 'types/**/*.d.ts'],
+  exclude: ['node_modules', 'dist'],
+};
+
+// ─── Volar plugin (Vue Language Tools compatible) ────────────────────────────
+
+/**
+ * Volar / Vue Language Tools plugin factory for .clarity files.
+ *
+ * Register this in volar.config.js (or .volarrc.js):
+ *
+ *   import { createClarityVolarPlugin } from '@ozsarman/clarityjs/ts-plugin';
+ *   export default { plugins: [createClarityVolarPlugin()] };
+ *
+ * @returns {VolarPlugin}
+ */
+export function createClarityVolarPlugin() {
+  return {
+    name: '@ozsarman/clarityjs',
+
+    /** Volar calls this to determine if this plugin handles a given file. */
+    resolveEmbeddedFile(fileName, sfc, embeddedFile) {
+      if (!fileName.endsWith('.clarity')) return;
+      // Tell Volar to treat the .clarity file as a virtual TS module
+      embeddedFile.kind = 1 /* TypeScript */;
+      embeddedFile.capabilities = {
+        diagnostic:      true,
+        foldingRange:    true,
+        documentFormatting: true,
+        documentSymbol:  true,
+        completion:      { triggerCharacters: ['.', ':', '<', '"', "'", '/'] },
+        referencesCodeLens: true,
+      };
+    },
+
+    /** Transform .clarity source to virtual TypeScript for type checking. */
+    resolveVirtualFile(fileName, source) {
+      if (!fileName.endsWith('.clarity')) return;
+
+      try {
+        const tokens = tokenize(source, fileName);
+        const ast    = parse(tokens, source);
+        const dts    = generateTypes(ast, { filename: fileName });
+
+        // Return a virtual .ts that TS can check
+        return {
+          fileName: fileName + '.ts',
+          content:  dts,
+          kind:     'typescript',
+        };
+      } catch (err) {
+        return {
+          fileName: fileName + '.ts',
+          content:  `// Clarity parse error: ${err.message}\nexport {};\n`,
+          kind:     'typescript',
+        };
+      }
+    },
+  };
+}
+
+// ─── Ambient type declarations (written to types/clarity.d.ts) ────────────────
+
+/**
+ * Ambient TypeScript declarations for Clarity's runtime types.
+ * These are automatically included when users add "@ozsarman/clarityjs" to types[].
+ */
+export const AMBIENT_DECLARATIONS = `
+// Clarity.js — Ambient Type Declarations
+// Auto-generated — do not edit manually.
+
+declare module '@ozsarman/clarityjs' {
+  // ── Reactive primitives ────────────────────────────────────────────────────
+  export interface Signal<T> {
+    get(): T;
+    set(value: T): void;
+    peek(): T;
+    subscribe(fn: (value: T) => void): () => void;
+  }
+
+  export function signal<T>(value: T): Signal<T>;
+  export function computed<T>(fn: () => T): Signal<T>;
+  export function effect(fn: () => void | (() => void)): () => void;
+  export function batch(fn: () => void): void;
+
+  // ── Ref ───────────────────────────────────────────────────────────────────
+  export interface Ref<T = unknown> {
+    current: T | null;
+    readonly __isRef: true;
+  }
+  export function createRef<T = unknown>(initialValue?: T): Ref<T>;
+
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+  export function onMount(fn: () => void | (() => void)): void;
+  export function onCleanup(fn: () => void): void;
+  export function onUpdate(fn: () => void): void;
+
+  // ── Context ───────────────────────────────────────────────────────────────
+  export interface Context<T> { readonly __contextId: symbol; defaultValue: T | undefined; }
+  export function createContext<T>(defaultValue?: T): Context<T>;
+  export function useContext<T>(ctx: Context<T>): T;
+
+  // ── DOM helpers ───────────────────────────────────────────────────────────
+  export function h(tag: string, attrs?: Record<string, unknown> | null, ...children: (Node | string | number | boolean | null | undefined)[]): Element;
+  export function mount(componentFn: (...args: unknown[]) => Node, target: Element | string, props?: Record<string, unknown>): void;
+  export function when(condition: () => boolean, then: () => Node, otherwise?: () => Node): Node;
+  export function list<T>(items: () => T[], render: (item: T, index: number) => Node, key?: (item: T, index: number) => string | number): Node;
+
+  // ── Router ────────────────────────────────────────────────────────────────
+  export interface NavigateOptions { state?: unknown; scroll?: boolean; viewTransition?: boolean; }
+  export function navigate(path: string, opts?: NavigateOptions): Promise<boolean>;
+  export function navigateReplace(path: string, opts?: NavigateOptions): Promise<boolean>;
+  export function back(): void;
+  export function forward(): void;
+  export const currentPath:  Signal<string> & (() => string);
+  export const currentQuery: Signal<Record<string, string>> & (() => Record<string, string>);
+  export const routeParams:  Signal<Record<string, string>> & (() => Record<string, string>);
+  export function matchRoute(pattern: string, path: string): Record<string, string> | null;
+  export function useViewTransition(): { isTransitioning: Signal<boolean>; startTransition(cb: () => void): void };
+
+  // ── Store ─────────────────────────────────────────────────────────────────
+  export interface StoreConfig<S> {
+    state:    () => S;
+    getters?: Record<string, (state: S) => unknown>;
+    actions?: Record<string, (this: Store<S>, ...args: unknown[]) => unknown>;
+  }
+  export interface Store<S> {
+    state: S;
+    $patch(partial: Partial<S>): void;
+    $reset(): void;
+    $subscribe(fn: (state: S) => void): () => void;
+    [key: string]: unknown;
+  }
+  export function createStore<S>(config: StoreConfig<S>): Store<S>;
+
+  // ── Server Actions ────────────────────────────────────────────────────────
+  export interface ServerClient { call<O>(name: string, input?: unknown): Promise<O>; }
+  export function createServerClient(opts?: { baseUrl?: string; prefix?: string; headers?: Record<string, string> }): ServerClient;
+  export interface UseServerActionResult<I, O> {
+    execute(input?: I): Promise<O>;
+    loading: Signal<boolean>;
+    error:   Signal<Error | null>;
+    data:    Signal<O | null>;
+    reset(): void;
+  }
+  export function useServerAction<I = unknown, O = unknown>(
+    client: ServerClient,
+    name: string,
+    opts?: { initialData?: O; optimistic?: (input: I, current: O | null) => O; onSuccess?: (data: O) => void; onError?: (err: Error) => void }
+  ): UseServerActionResult<I, O>;
+
+  // ── Head management ───────────────────────────────────────────────────────
+  export interface HeadConfig {
+    title?:       string;
+    titleTemplate?: string;
+    meta?:        Array<Record<string, string>>;
+    link?:        Array<Record<string, string>>;
+    script?:      Array<Record<string, string>>;
+  }
+  export function useHead(config: HeadConfig): void;
+
+  // ── SSR ───────────────────────────────────────────────────────────────────
+  export function renderToString(componentFn: (...args: unknown[]) => Node, props?: Record<string, unknown>): { html: string; state: Record<string, unknown> };
+  export function renderToStringAsync(componentFn: (...args: unknown[]) => Node, props?: Record<string, unknown>): Promise<{ html: string; state: Record<string, unknown> }>;
+  export function hydrateRoot(componentFn: (...args: unknown[]) => Node, target?: Element, props?: Record<string, unknown>): void;
+
+  // ── Edge ─────────────────────────────────────────────────────────────────
+  export function createEdgeHandler(opts: { render: (req: unknown) => unknown; actions?: () => Promise<unknown>; }): { fetch: (req: Request, env?: unknown, ctx?: unknown) => Promise<Response> };
+  export function detectEdgeRuntime(): 'cloudflare' | 'deno' | 'bun' | 'vercel-edge' | 'node' | 'unknown';
+
+  // ── i18n ─────────────────────────────────────────────────────────────────
+  export function createI18n(opts: { locale: string; messages: Record<string, Record<string, string>>; fallbackLocale?: string }): unknown;
+  export function useI18n(): { t: (key: string, params?: Record<string, unknown>) => string; locale: Signal<string>; dir: Signal<'ltr' | 'rtl'> };
+}
+
+declare module '*.clarity' {
+  import type { Signal } from '@ozsarman/clarityjs';
+  const component: (...args: unknown[]) => Node;
+  export default component;
+}
+`;