timepicker-ui-mcp 1.0.2 → 2.0.0

package/build/search.js

@@ -0,0 +1,117 @@
+import { API_METHODS, DOCS, THEMES, optionGroupDocs } from './data.js';
+import { CSS_CLASSES, CSS_VARS, EVENTS, OPTION_GROUPS, TROUBLESHOOTING } from './generated.js';
+function firstLine(text) {
+    return (text ?? '').split('\n')[0].trim();
+}
+function optionCandidates() {
+    const out = [];
+    const visit = (group, path, option) => {
+        const name = `${path}.${option.name}`;
+        out.push({
+            kind: 'option',
+            name,
+            summary: [option.type, firstLine(option.description)].filter(Boolean).join(' - '),
+            deprecated: option.deprecated,
+            docs: optionGroupDocs(group),
+            text: `${option.description ?? ''} ${option.type}`,
+        });
+        for (const field of option.fields ?? [])
+            visit(group, name, field);
+    };
+    for (const [group, data] of Object.entries(OPTION_GROUPS)) {
+        for (const option of data.options)
+            visit(group, group, option);
+    }
+    return out;
+}
+function candidates() {
+    return [
+        ...optionCandidates(),
+        ...EVENTS.filter((e) => !e.internal).map((e) => ({
+            kind: 'event',
+            name: e.name,
+            summary: `payload ${e.data}: ${e.fields.map((f) => f.name).join(', ') || 'none'}`,
+            deprecated: e.deprecated,
+            docs: DOCS.events,
+            text: `${e.description ?? ''} ${e.fields.map((f) => `${f.name} ${f.description ?? ''}`).join(' ')}`,
+        })),
+        ...CSS_VARS.map((v) => ({
+            kind: 'css-variable',
+            name: v.name,
+            summary: `${v.group}, default ${v.default ?? 'unset'}${v.read ? '' : ', no rule reads it'}`,
+            deprecated: v.read ? undefined : 'No rule reads it, so setting it changes nothing. Removed in 5.0.',
+            docs: DOCS.cssVariables,
+            text: v.group,
+        })),
+        ...CSS_CLASSES.classes.map((c) => ({
+            kind: 'css-class',
+            name: c.name,
+            summary: c.example ? `e.g. ${c.example}` : 'rendered by the templates',
+            docs: DOCS.cssClasses,
+            text: '',
+        })),
+        ...API_METHODS.map((m) => ({
+            kind: 'method',
+            name: m.signature,
+            summary: m.description,
+            deprecated: m.deprecated,
+            docs: DOCS.methods,
+            text: m.description,
+        })),
+        ...THEMES.map((t) => ({
+            kind: 'theme',
+            name: t.name,
+            summary: `import '${t.cssImport}'`,
+            docs: DOCS.themes,
+            text: t.note ?? '',
+        })),
+        ...TROUBLESHOOTING.map((t) => ({
+            kind: 'troubleshooting',
+            name: t.symptom,
+            summary: t.fix.map((step) => step.text).join(' '),
+            docs: t.docs,
+            text: `${t.group} ${t.why ?? ''} ${t.fix.map((step) => step.text).join(' ')}`,
+        })),
+    ];
+}
+let index;
+export function searchReference(query, limit) {
+    const tokens = query
+        .toLowerCase()
+        .split(/[\s,]+/)
+        .map((t) => t.trim())
+        .filter((t) => t.length > 1);
+    if (tokens.length === 0)
+        return [];
+    index ??= candidates();
+    const scored = index
+        .map((item) => {
+        const name = item.name.toLowerCase();
+        const text = `${item.summary} ${item.text}`.toLowerCase();
+        let score = 0;
+        let matched = 0;
+        for (const token of tokens) {
+            let tokenScore = 0;
+            if (name === token || name.endsWith(`.${token}`))
+                tokenScore = 8;
+            else if (name.includes(token))
+                tokenScore = 4;
+            else if (text.includes(token))
+                tokenScore = 1;
+            if (tokenScore > 0)
+                matched += 1;
+            score += tokenScore;
+        }
+        if (matched === tokens.length)
+            score *= 2;
+        if (item.deprecated)
+            score /= 2;
+        return { item, score };
+    })
+        .filter((entry) => entry.score > 0)
+        .sort((a, b) => b.score - a.score || a.item.name.length - b.item.name.length);
+    return scored.slice(0, limit).map(({ item }) => {
+        const { text: _text, ...hit } = item;
+        return hit;
+    });
+}

package/build/snippet.js

@@ -18,6 +18,8 @@ function optionsFor(args) {
     if (args.mode && args.mode !== 'clock')
         ui.push(`mode: '${args.mode}'`);
     const clock = [`type: '${args.clockType}'`];
+    if (args.showSeconds)
+        clock.push('showSeconds: true');
     const groups = [];
     if (ui.length)
         groups.push(`  ui: { ${ui.join(', ')} },`);
@@ -53,7 +55,11 @@ export function buildSnippet(args) {
             '    picker.create();',
             '    return () => picker.destroy();',
             '  }, []);',
-            '  return <input ref={ref} />;',
+            '  return (',
+            '    <div className="tp-ui">',
+            '      <input ref={ref} type="text" />',
+            '    </div>',
+            '  );',
             '}',
         ].join('\n');
     }

package/build/theme.js

@@ -1,4 +1,5 @@
 import { CSS_VARS } from './generated.js';
+export const CLASS_NAME = /^[a-z_][a-z0-9_-]*$/i;
 function normalizeVarName(key) {
     const trimmed = key.trim();
     if (trimmed.startsWith('--'))
@@ -9,32 +10,54 @@ function normalizeVarName(key) {
 }
 export function buildCustomTheme(args) {
     const known = new Map(CSS_VARS.map((v) => [v.name, v]));
-    const base = args.onlyCommon ? CSS_VARS.filter((v) => v.commonlyThemed) : CSS_VARS;
-    const overridePairs = Object.entries(args.overrides).map(([k, v]) => [normalizeVarName(k), v]);
-    const overrideMap = new Map(overridePairs);
-    const lines = [`[data-theme='${args.name}'] {`];
-    if (overrideMap.size > 0) {
-        for (const [name, value] of overrideMap) {
-            const fallback = known.get(name);
-            const suffix = fallback ? '' : '  /* not a known --tp- variable, verify the name */';
-            lines.push(`  ${name}: ${value};${suffix}`);
+    const scaffold = CSS_VARS.filter((v) => v.read && !v.readOutsideWrapper && (!args.onlyCommon || v.commonlyThemed));
+    const overrides = new Map(Object.entries(args.overrides).map(([k, v]) => [normalizeVarName(k), v]));
+    const wrapper = `.tp-ui-wrapper.${args.name}`;
+    const root = `.tp-ui.${args.name}`;
+    const modal = '.tp-ui-modal[data-theme]';
+    const blocks = new Map([[wrapper, []]]);
+    const add = (selector, line) => blocks.set(selector, [...(blocks.get(selector) ?? []), line]);
+    const warnings = [];
+    if (overrides.size > 0) {
+        for (const [name, value] of overrides) {
+            const info = known.get(name);
+            if (!info) {
+                warnings.push(`${name} is not a --tp- variable timepicker-ui defines. Check the name with list_css_variables.`);
+                add(wrapper, `  ${name}: ${value};`);
+            }
+            else if (!info.read) {
+                warnings.push(`${name} has no effect: no rule reads it, and 5.0 removes it. It was left out.`);
+            }
+            else if (info.readOutsideWrapper?.includes('tp-ui-modal')) {
+                add(modal, `  ${name}: ${value};`);
+                warnings.push(`${name} is read on .tp-ui-modal, outside .tp-ui-wrapper, so it is set there and applies to every picker.`);
+            }
+            else if (info.readOutsideWrapper) {
+                add(root, `  ${name}: ${value};`);
+            }
+            else {
+                add(wrapper, `  ${name}: ${value};`);
+            }
         }
     }
     else {
-        for (const v of base) {
-            lines.push(`  ${v.name}: ${v.value};`);
-        }
+        for (const v of scaffold)
+            add(wrapper, `  ${v.name}: ${v.default ?? 'initial'};`);
     }
-    lines.push('}');
     const header = [
         `/* Custom timepicker-ui theme: "${args.name}"`,
         ' *',
-        ' * 1. Save this CSS and import it in your app (after timepicker-ui/main.css).',
-        " * 2. Pass ui.theme = '" + args.name + "' (cast as any in TS — custom names are not in the union).",
+        " * 1. Import this CSS after 'timepicker-ui/main.css' (and after a built-in theme file if you combine them).",
+        ` * 2. Pass the class: new TimepickerUI(input, { ui: { cssClass: '${args.name}' } }).`,
+        " *    It can be combined with a built-in theme as the base: ui: { theme: 'dark', cssClass: '" + args.name + "' }.",
         ' *',
-        " * The picker sets data-theme on its modal, so [data-theme='" + args.name + "'] scopes your overrides.",
+        ` * The picker adds the class to .tp-ui-wrapper when it opens, so .tp-ui-wrapper.${args.name} scopes these values.`,
         ' */',
         '',
     ].join('\n');
-    return `${header}${lines.join('\n')}\n`;
+    const css = [...blocks]
+        .filter(([, lines]) => lines.length > 0)
+        .map(([selector, lines]) => `${selector} {\n${lines.join('\n')}\n}`)
+        .join('\n\n');
+    return { css: `${header}${css}\n`, warnings };
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "timepicker-ui-mcp",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "mcpName": "io.github.pglejzer/timepicker-ui-mcp",
-  "description": "MCP server for timepicker-ui: exposes themes, UI modes, plugins, grouped options, events, the public API, config-snippet and custom-theme generation, and time validation as tools for Claude and other MCP clients.",
+  "description": "MCP server for timepicker-ui: options, events, CSS variables, themes, the public API, migration guides, setup snippets, custom themes, time validation and reference search for Claude and other MCP clients.",
   "type": "module",
   "bin": {
     "timepicker-ui-mcp": "build/index.js"
@@ -33,7 +33,7 @@
     "url": "https://github.com/pglejzer/timepicker-ui/issues"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "publishConfig": {
     "access": "public"
@@ -48,10 +48,11 @@
     "inspect": "npx @modelcontextprotocol/inspector node build/index.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.12.0",
-    "zod": "^3.23.8"
+    "@modelcontextprotocol/server": "^2.3.1",
+    "zod": "^4.6.0"
   },
   "devDependencies": {
+    "@modelcontextprotocol/client": "^2.3.1",
     "@types/node": "^25.9.2",
     "typescript": "^5.8.0"
   }