refactor(theme): extract shared utilities and add type safety

- Add sdk/src/types/theme.d.ts with Appearance, ThemeCSSVariable, ThemeGroup types
- Add sdk/src/core/theme-loader.ts with loadThemePaths(), buildThemeChoices()
- Add sdk/src/core/theme-utils.ts with resolveOpacity(), extractAppearance()
- Add sdk/src/core/theme-validation.ts with validateThemeCSS()
- Refactor theme-selector.ts and new-theme.ts to use shared utilities
- Reduce code duplication (~90 lines removed)

Author: johnlindquist

src/app/paste-snippet.ts

@@ -11,10 +11,11 @@ if (args?.length > 0 && snippet.includes("$0")) {
 	snippet = snippet.replaceAll("$0", args?.shift());
 }
 
-// Find ${selection} and replace with selected text
-if (snippet.includes("$SELECTION")) {
+// Support both $SELECTION and $SELECTED_TEXT for consistency
+if (snippet.includes("$SELECTION") || snippet.includes("$SELECTED_TEXT")) {
 	let selectedText = await getSelectedText()
 	snippet = snippet.replaceAll("$SELECTION", selectedText)
+	snippet = snippet.replaceAll("$SELECTED_TEXT", selectedText)
 }
 
 if (snippet.includes("$CLIPBOARD")) {

src/cli/new-theme.ts

@@ -10,104 +10,31 @@ Create a new theme based on the current theme
 // Pass: true
 // Keyword: nt
 
+import { loadThemePaths, buildThemeChoices, replaceThemeName, slugifyThemeName } from "../core/theme-loader.js"
+
 await ensureDir(kenvPath("themes"))
 
-let customThemePaths = await globby([
-  kenvPath("themes", "*.css").replaceAll("\\", "/"),
-])
-
-let themePaths = await globby([
-  kitPath("themes", "*.css").replaceAll("\\", "/"),
-  `!${kitPath("themes", "script-kit*.css").replaceAll(
-    "\\",
-    "/"
-  )}`,
-])
-
-let defaultThemePaths = await globby([
-  kitPath("themes", "script-kit*.css").replaceAll(
-    "\\",
-    "/"
-  ),
-])
-
-let guide = await readFile(kitPath("GUIDE.md"), "utf-8")
-
-let themes = []
-
-for await (let themePath of defaultThemePaths) {
-  let css = await readFile(themePath, "utf-8")
-  let themeName = path.basename(themePath)
-  let theme = {
-    group: "Default",
-    name: themeName,
-    description: themePath,
-    value: themePath,
-    enter: "Apply Theme",
-    preview: async () => {
-      setScriptTheme(css)
-
-      return md(
-        `# Preview of ${themeName}
-    
-${guide}`
-      )
-    },
-  }
-
-  themes.push(theme)
-}
-
-for await (let cssPath of themePaths) {
-  let css = await readFile(cssPath, "utf-8")
-  let themeName = path.basename(cssPath)
-  let theme = {
-    group: "Built-in",
-    name: themeName,
-    description: cssPath,
-    value: cssPath,
-    enter: "Apply Theme",
-    preview: async () => {
-      setScriptTheme(css)
-
-      return md(
-        `# Preview of ${themeName}
-    
-${guide}`
-      )
-    },
-  }
-
-  themes.push(theme)
-}
-
-for await (let cssPath of customThemePaths) {
-  let css = await readFile(cssPath, "utf-8")
-  let themeName = path.basename(cssPath)
-  let theme = {
-    group: "Custom",
-    name: themeName,
-    description: cssPath,
-    value: cssPath,
-    enter: "Apply Theme",
-    preview: async () => {
-      setScriptTheme(css)
-
-      return md(
-        `# Preview of ${themeName}
-		
-	${guide}`
-      )
-    },
-  }
-  themes.push(theme)
-}
+// Load all theme paths using shared utility
+const paths = await loadThemePaths(kenvPath, kitPath)
+
+// Load preview content
+const guide = await readFile(kitPath("GUIDE.md"), "utf-8")
+
+// Build theme choices using shared utility
+let themes = await buildThemeChoices({
+  paths,
+  readFile,
+  pathModule: path,
+  setScriptTheme,
+  md,
+  previewContent: guide,
+})
 
 themes = groupChoices(themes, {
   order: ["Default", "Custom", "Built-in"],
-})
+}) as typeof themes
 
-let cssPath = await arg(
+const cssPath = await arg(
   {
     placeholder: "Select a Theme to Copy",
     hint: "Base New Theme on...",
@@ -121,19 +48,15 @@ let cssPath = await arg(
 
 let theme = await readFile(cssPath, "utf-8")
 
-let name = arg?.pass || (await arg("Theme Name"))
+const name = arg?.pass || (await arg("Theme Name"))
 
-// convert name to dashed lowercase
-let dashed = name
-  .replace(/[^a-zA-Z0-9]/g, "-")
-  .toLowerCase()
+// Convert name to filename slug using shared utility
+const dashed = slugifyThemeName(name)
 
-// Replace the --name variable with the new theme name
-theme = theme.replace(
-  /--name: ".*";/g,
-  `--name: "${name}";`
-)
-let themePath = kenvPath("themes", `${dashed}.css`)
+// Replace the --name variable with the new theme name using shared utility
+theme = replaceThemeName(theme, name)
+
+const themePath = kenvPath("themes", `${dashed}.css`)
 await writeFile(themePath, theme)
 await cli("set-env-var", "KIT_THEME_LIGHT", themePath)
 await cli("set-env-var", "KIT_THEME_DARK", themePath)

src/core/snippets.ts

@@ -3,7 +3,8 @@ import path from "node:path";
 import { globby } from "globby";
 import type { Metadata, Snippet } from '../types/index.js'
 import { kenvPath } from './resolvers.js'
-import { escapeHTML, getKenvFromPath, getMetadata, postprocessMetadata, checkDbAndInvalidateCache } from './utils.js'
+import { escapeHTML, getKenvFromPath } from './utils.js'
+import { parseSnippetMetadata } from './metadata-parser.js'
 
 interface SnippetFileCacheEntry {
   snippetObject: Partial<Snippet>;
@@ -33,23 +34,19 @@ export let parseSnippets = async (): Promise<Snippet[]> => {
       }
 
       let contents = await readFile(s, 'utf8')
-      let { metadata, snippet } = getSnippet(contents)
-      let formattedSnippet = escapeHTML(snippet)
+      // Use unified metadata parser for consistency with App
+      const { metadata, snippetBody, snippetKey, postfix } = parseSnippetMetadata(contents)
 
-      let expand = (metadata?.expand || metadata?.snippet || '').trim()
-      let postfix = false
-      if (expand.startsWith('*')) {
-        postfix = true
-        expand = expand.slice(1)
-      }
+      // Get raw expand value for tag (preserves * prefix for postfix snippets)
+      const rawExpand = (metadata?.snippet || metadata?.expand || '') as string
 
       const newSnippetChoice: Partial<Snippet> = {
         ...metadata,
         filePath: s,
         name: metadata?.name || path.basename(s),
-        tag: metadata?.snippet || '',
+        tag: rawExpand,
         description: s,
-        text: snippet.trim(),
+        text: snippetBody.trim(),
         preview: `<div class="p-4">
   <style>
   p{
@@ -58,16 +55,16 @@ export let parseSnippets = async (): Promise<Snippet[]> => {
   li{
     margin-bottom: .25rem;
   }
-  
+
   </style>
-  ${snippet.trim()}
+  ${escapeHTML(snippetBody.trim())}
 </div>`,
         group: 'Snippets',
         kenv: getKenvFromPath(s),
-        value: snippet.trim(),
-        expand,
-        postfix: postfix ? true : false,
-        snippetKey: expand,
+        value: snippetBody.trim(),
+        expand: snippetKey,
+        postfix,
+        snippetKey,
       }
 
       snippetCache.set(s, { snippetObject: newSnippetChoice, mtimeMs: currentMtimeMs });
@@ -82,27 +79,17 @@ export let parseSnippets = async (): Promise<Snippet[]> => {
   return snippetChoices as Snippet[]
 }
 
-const snippetRegex = /(?<=^(?:(?:\/\/)|#)\s{0,2})([\w-]+)(?::)(.*)/
+/**
+ * Parse snippet contents and extract metadata and body.
+ * Uses unified parseSnippetMetadata for consistency with App.
+ * @deprecated Use parseSnippetMetadata directly for full result including warnings
+ */
 export let getSnippet = (
   contents: string
 ): {
   metadata: Metadata
   snippet: string
 } => {
-  let lines = contents.split('\n')
-  let metadata = postprocessMetadata(getMetadata(contents), contents) as Metadata
-  delete (metadata as any).type
-  let contentStartIndex = lines.length
-
-  for (let i = 0; i < lines.length; i++) {
-    let line = lines[i]
-    let match = line.match(snippetRegex)
-
-    if (!match) {
-      contentStartIndex = i
-      break
-    }
-  }
-  let snippet = lines.slice(contentStartIndex).join('\n')
-  return { metadata, snippet }
+  const { metadata, snippetBody } = parseSnippetMetadata(contents)
+  return { metadata: metadata as Metadata, snippet: snippetBody }
 }