@prsm/mono-components 0.1.0

package/.claude/settings.local.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "WebSearch",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:histoire.dev)",
+      "mcp__github__search_code",
+      "mcp__github__get_file_contents",
+      "Bash(ls:*)"
+    ]
+  }
+}

package/.lore

@@ -0,0 +1,83 @@
+-- philosophy --
+
+use these components when they fit naturally. if a component is close but not exactly what you need, do not force it. read the component source for patterns and inspiration, then build something custom in the project. a well-built one-off is better than a shoehorned library component.
+
+- exact fit: use it directly
+- close fit: read source, consider wrapper or slot. if it feels forced, build custom
+- not a fit: build custom, follow same design system conventions (monospace, grayscale, amber accent, tight spacing)
+
+-- installation --
+
+not published to npm. add via file dependency:
+
+```json
+{ "dependencies": { "mono-components": "file:/Users/jonathanpyers/code/mono-components" } }
+```
+
+peer dependency: vue ^3.4
+
+-- project setup --
+
+ships a tailwind v3 preset. use it instead of defining theme colors manually:
+
+```js
+// tailwind.config.js
+import preset from "mono-components/tailwind"
+export default {
+  presets: [preset],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js}",
+    "./node_modules/mono-components/src/**/*.vue"
+  ]
+}
+```
+
+import base styles in main.js:
+```js
+import "mono-components/style.css"
+```
+
+all exports are named. no default export:
+```js
+import { Button, Select, DataTable, toast } from "mono-components"
+```
+
+-- decision guide --
+
+"i need a select":
+- few options, no search needed: Select
+- many options or search by name: Combobox
+- multi-select: MultiCombobox
+- action menu (options do things, not set values): Dropdown
+
+"i need a toggle":
+- on/off setting: Switch
+- yes/no with label: Checkbox
+- pick one from icon options: ToggleGroup
+- pick many from options: ToggleButtons
+- pick one with labels: RadioGroup
+- pick one with descriptions: RadioCards (single select, radio circles)
+- pick many with descriptions: CheckboxCards (multi select, square checkmarks)
+
+"i need to show data":
+- tabular, possibly editable: DataTable
+- key-value pairs, detail view: KeyValue
+- status label: Badge
+
+"i need floating content":
+- generic anchored panel: Popover
+- confirmation before action: PopConfirm
+- info on hover: Tooltip
+- blocking dialog: Modal
+- right-click actions: ContextMenu
+
+"i need hierarchy/navigation":
+- data tree with search: Tree
+- sidebar nav: NavTree
+- tab switching: Tabs
+- collapsible sections: Collapsible + CollapsibleGroup
+
+-- story files --
+
+each component has a story file in stories/ showing usage examples and prop combinations. when adapting a component or building custom, read the story for real usage patterns.

package/histoire.config.js

@@ -0,0 +1,43 @@
+import { defineConfig } from "histoire"
+import { HstVue } from "@histoire/plugin-vue"
+
+export default defineConfig({
+  plugins: [HstVue()],
+  setupFile: "./src/histoire-setup.js",
+  theme: {
+    title: "mono-components",
+    defaultColorScheme: "auto",
+    colors: {
+      gray: {
+        50: "#fcfcfe",
+        100: "#f3f4f7",
+        200: "#e8eaee",
+        300: "#dbdde3",
+        400: "#b8bdc7",
+        500: "#a0a6b2",
+        600: "#616872",
+        700: "#191a1e",
+        750: "#141518",
+        800: "#111214",
+        850: "#0d0e10",
+        900: "#0a0b0c",
+        950: "#060607"
+      },
+      primary: {
+        50: "#fef4ec",
+        100: "#fde4c8",
+        200: "#fbc890",
+        300: "#f09848",
+        400: "#cf6510",
+        500: "#b65400",
+        600: "#9a4700",
+        700: "#7d3900",
+        800: "#632d00",
+        900: "#4a2100"
+      }
+    }
+  },
+  vite: {
+    base: "/"
+  }
+})

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@prsm/mono-components",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./style.css": "./src/style.css",
+    "./tailwind": "./tailwind.preset.js"
+  },
+  "scripts": {
+    "story:dev": "histoire dev",
+    "story:build": "histoire build"
+  },
+  "peerDependencies": {
+    "vue": "^3.4"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.14",
+    "@floating-ui/vue": "^1.1.6",
+    "@iconify/vue": "^4.3.0",
+    "@lezer/highlight": "^1.2.3"
+  },
+  "devDependencies": {
+    "@histoire/plugin-vue": "^0.17.17",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "histoire": "^0.17.17",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "vite": "^5.4.0",
+    "vue": "^3.5.13"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

package/src/components/Badge.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from "vue"
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "neutral",
+    validator: v => ["success", "warning", "error", "info", "neutral"].includes(v)
+  }
+})
+
+const colorMap = {
+  success: "var(--success)",
+  warning: "var(--warning)",
+  error: "var(--error)",
+  info: "var(--info)",
+  neutral: "var(--fg-2)"
+}
+
+const badgeStyle = computed(() => {
+  const color = colorMap[props.variant]
+  return {
+    color,
+    backgroundColor: `color-mix(in srgb, ${color} 10%, transparent)`
+  }
+})
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center gap-1 text-sm py-1 px-1.5 rounded-sm font-mono"
+    :style="badgeStyle"
+  >
+    <slot />
+  </span>
+</template>

package/src/components/Button.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  variant: {
+    type: String,
+    default: "default",
+    validator: v => ["default", "primary", "outline", "icon", "danger", "ghost"].includes(v)
+  },
+  size: {
+    type: String,
+    default: "default",
+    validator: v => ["default", "small"].includes(v)
+  },
+  type: {
+    type: String,
+    default: "button"
+  }
+})
+
+const variantClasses = {
+  default: "bg-2 border border-line text-fg-0 hover:bg-3 active:bg-5",
+  primary: "bg-accent border border-accent text-white hover:bg-accent-hover active:brightness-75",
+  outline: "bg-transparent border border-line text-fg-0 hover:bg-2 active:bg-4",
+  icon: "bg-transparent border border-transparent text-fg-1 hover:bg-2 active:bg-4",
+  danger: "bg-error border border-error text-white hover:brightness-110 active:brightness-75",
+  ghost: "bg-transparent border border-transparent text-fg-0 hover:bg-2 active:bg-4"
+}
+
+const sizeClasses = {
+  default: "px-2 py-1 text-base",
+  small: "px-1.5 py-0.5 text-xs"
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    class="inline-flex items-center justify-center gap-1 rounded-sm font-mono cursor-pointer whitespace-nowrap"
+    :class="[variantClasses[variant], sizeClasses[size]]"
+  >
+    <span class="inline-flex items-center justify-center gap-1 min-h-[1.5em]">
+      <slot />
+    </span>
+  </button>
+</template>

package/src/components/Checkbox.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from "vue"
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  indeterminate: { type: Boolean, default: false },
+  label: { type: String, default: null }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const isChecked = computed(() => props.modelValue)
+
+function toggle() {
+  emit("update:modelValue", !props.modelValue)
+}
+</script>
+
+<template>
+  <label
+    v-if="label"
+    class="inline-flex items-center gap-1.5 px-1.5 py-1 rounded-sm cursor-pointer hover:bg-2"
+    @click.prevent="toggle"
+  >
+    <span
+      class="w-[14px] h-[14px] rounded-sm border flex items-center justify-center shrink-0"
+      :class="isChecked || indeterminate ? 'bg-accent border-accent' : 'bg-0 border-line'"
+    >
+      <svg v-if="isChecked && !indeterminate" width="10" height="10" viewBox="0 0 10 10" fill="none">
+        <path d="M2 5L4 7L8 3" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      <svg v-else-if="indeterminate" width="10" height="10" viewBox="0 0 10 10" fill="none">
+        <path d="M2.5 5H7.5" stroke="white" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </span>
+    <span class="text-base font-mono text-fg-0 select-none">{{ label }}</span>
+  </label>
+  <span
+    v-else
+    class="inline-flex items-center justify-center w-[14px] h-[14px] rounded-sm border cursor-pointer"
+    :class="isChecked || indeterminate ? 'bg-accent border-accent' : 'bg-0 border-line'"
+    @click="toggle"
+  >
+    <svg v-if="isChecked && !indeterminate" width="10" height="10" viewBox="0 0 10 10" fill="none">
+      <path d="M2 5L4 7L8 3" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+    <svg v-else-if="indeterminate" width="10" height="10" viewBox="0 0 10 10" fill="none">
+      <path d="M2.5 5H7.5" stroke="white" stroke-width="1.5" stroke-linecap="round" />
+    </svg>
+  </span>
+</template>

package/src/components/CheckboxCards.vue

@@ -0,0 +1,61 @@
+<script setup>
+defineProps({
+  modelValue: { type: Array, default: () => [] },
+  options: { type: Array, required: true }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+function toggle(value, current) {
+  const next = current.includes(value)
+    ? current.filter(v => v !== value)
+    : [...current, value]
+  emit("update:modelValue", next)
+}
+
+function isChecked(opt, modelValue) {
+  return opt.disabled || modelValue.includes(opt.value)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <button
+      v-for="opt in options"
+      :key="opt.value"
+      type="button"
+      class="flex items-start gap-2 px-2 py-1.5 rounded-sm border text-left font-mono"
+      :class="[
+        opt.disabled
+          ? 'border-line bg-0 opacity-50 cursor-default'
+          : isChecked(opt, modelValue)
+            ? 'border-accent bg-3 cursor-pointer'
+            : 'border-line bg-0 hover:bg-2 cursor-pointer'
+      ]"
+      :disabled="opt.disabled"
+      @click="!opt.disabled && toggle(opt.value, modelValue)"
+    >
+      <span
+        class="mt-0.5 w-[14px] h-[14px] rounded-sm border shrink-0 flex items-center justify-center"
+        :class="isChecked(opt, modelValue) ? 'border-accent bg-accent' : 'border-line'"
+      >
+        <svg
+          v-if="isChecked(opt, modelValue)"
+          class="w-[10px] h-[10px] text-bg-0"
+          viewBox="0 0 10 10"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M2 5.5L4 7.5L8 3" />
+        </svg>
+      </span>
+      <div class="flex flex-col gap-px">
+        <span class="text-base text-fg-0">{{ opt.label }}</span>
+        <span v-if="opt.description" class="text-xs text-fg-2">{{ opt.description }}</span>
+      </div>
+    </button>
+  </div>
+</template>

package/src/components/CodeEditor.vue

@@ -0,0 +1,299 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue"
+import { EditorView, keymap, placeholder as phPlugin } from "@codemirror/view"
+import { EditorState, Compartment } from "@codemirror/state"
+import { sql, StandardSQL } from "@codemirror/lang-sql"
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands"
+import { syntaxHighlighting, HighlightStyle } from "@codemirror/language"
+import { tags } from "@lezer/highlight"
+
+const props = defineProps({
+  modelValue: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  schema: { type: Object, default: () => ({}) },
+  language: { type: String, default: "sql" },
+  readonly: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const container = ref(null)
+let view = null
+const langCompartment = new Compartment()
+const schemaCompartment = new Compartment()
+const readonlyCompartment = new Compartment()
+
+const monoTheme = EditorView.theme({
+  "&": {
+    fontSize: "12px",
+    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', monospace",
+    backgroundColor: "var(--bg-0)",
+    color: "var(--fg-0)",
+  },
+  "&.cm-focused": {
+    outline: "none",
+  },
+  ".cm-content": {
+    padding: "4px 0",
+    caretColor: "var(--fg-0)",
+  },
+  ".cm-cursor": {
+    borderLeftColor: "var(--fg-0)",
+  },
+  ".cm-selectionBackground": {
+    backgroundColor: "var(--bg-3) !important",
+  },
+  "&.cm-focused .cm-selectionBackground": {
+    backgroundColor: "var(--bg-3) !important",
+  },
+  ".cm-activeLine": {
+    backgroundColor: "transparent",
+  },
+  ".cm-gutters": {
+    display: "none",
+  },
+  ".cm-line": {
+    padding: "0 8px",
+  },
+  ".cm-placeholder": {
+    color: "var(--fg-3)",
+    fontStyle: "normal",
+  },
+  ".cm-tooltip": {
+    backgroundColor: "var(--bg-1)",
+    border: "1px solid var(--border)",
+    borderRadius: "3px",
+    boxShadow: "0 2px 8px rgba(0,0,0,.15)",
+  },
+  ".cm-tooltip-autocomplete": {
+    "& > ul": {
+      fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', monospace",
+      fontSize: "11px",
+    },
+    "& > ul > li": {
+      padding: "2px 8px",
+      color: "var(--fg-0)",
+    },
+    "& > ul > li[aria-selected]": {
+      backgroundColor: "var(--bg-3)",
+      color: "var(--fg-0)",
+    },
+  },
+  ".cm-completionLabel": {
+    color: "var(--fg-0)",
+  },
+  ".cm-completionDetail": {
+    color: "var(--fg-3)",
+    fontStyle: "normal",
+    marginLeft: "8px",
+  },
+  ".cm-completionMatchedText": {
+    color: "var(--accent)",
+    textDecoration: "none",
+  },
+})
+
+// hardcoded because HighlightStyle injects into a static sheet where
+// css vars can be unreliable depending on host context
+const hl = {
+  keyword: "#c4813a",
+  string: "#7a9e6e",
+  number: "#d19a66",
+  comment: "#666666",
+  fn: "#6eb2d6",
+  punctuation: "#888888",
+  foreground: "#b0b0b0",
+}
+
+const monoHighlight = HighlightStyle.define([
+  { tag: tags.keyword, color: hl.keyword, fontWeight: "600" },
+  { tag: tags.operator, color: hl.punctuation },
+  { tag: tags.string, color: hl.string },
+  { tag: tags.number, color: hl.number },
+  { tag: tags.bool, color: hl.keyword, fontWeight: "600" },
+  { tag: tags.null, color: hl.punctuation },
+  { tag: tags.comment, color: hl.comment, fontStyle: "italic" },
+  { tag: tags.typeName, color: hl.fn },
+  { tag: tags.function(tags.variableName), color: hl.fn },
+  { tag: tags.definition(tags.variableName), color: "#e5e5e5" },
+  { tag: tags.variableName, color: "#e5e5e5" },
+  { tag: tags.punctuation, color: hl.punctuation },
+  { tag: tags.paren, color: hl.punctuation },
+  { tag: tags.squareBracket, color: hl.punctuation },
+  { tag: tags.brace, color: hl.punctuation },
+  { tag: tags.separator, color: hl.punctuation },
+  { tag: tags.special(tags.string), color: hl.string },
+])
+
+const autoHeight = EditorView.theme({
+  "&": { height: "auto" },
+  ".cm-scroller": { overflow: "visible" },
+})
+
+function buildSchema() {
+  if (!props.schema || Object.keys(props.schema).length === 0) return {}
+  const tables = {}
+  for (const [table, cols] of Object.entries(props.schema)) {
+    tables[table] = cols.map(c => typeof c === "string" ? c : c.name || c)
+  }
+  return tables
+}
+
+function schemaCompletions(context) {
+  const tables = buildSchema()
+  const word = context.matchBefore(/\w+/)
+  if (!word || word.from === word.to) return null
+  const cols = new Set()
+  for (const colList of Object.values(tables)) {
+    for (const c of colList) cols.add(c)
+  }
+  if (cols.size === 0) return null
+  return {
+    from: word.from,
+    options: [...cols].map(c => ({ label: c, type: "property" })),
+  }
+}
+
+function buildLangExtension() {
+  const tables = buildSchema()
+  return sql({
+    dialect: StandardSQL,
+    schema: Object.keys(tables).length ? tables : undefined,
+    upperCaseKeywords: false,
+  })
+}
+
+const updateListener = EditorView.updateListener.of((update) => {
+  if (update.docChanged) {
+    const value = update.state.doc.toString()
+    emit("update:modelValue", value)
+  }
+})
+
+function focusedClass() {
+  return EditorView.theme({
+    "&.cm-editor": {
+      borderColor: "var(--border)",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderRadius: "3px",
+      transition: "border-color 0.1s",
+    },
+    "&.cm-editor.cm-focused": {
+      borderColor: "var(--accent)",
+    },
+  })
+}
+
+onMounted(() => {
+  const extensions = [
+    monoTheme,
+    focusedClass(),
+    syntaxHighlighting(monoHighlight),
+    autoHeight,
+    keymap.of([...defaultKeymap, ...historyKeymap]),
+    history(),
+    autocompletion({ activateOnTyping: true }),
+    keymap.of(completionKeymap),
+    schemaCompartment.of(EditorState.languageData.of(() => [{ autocomplete: schemaCompletions }])),
+    langCompartment.of(buildLangExtension()),
+    readonlyCompartment.of(EditorState.readOnly.of(props.readonly)),
+    updateListener,
+  ]
+
+  if (props.placeholder) {
+    extensions.push(phPlugin(props.placeholder))
+  }
+
+  const state = EditorState.create({
+    doc: props.modelValue,
+    extensions,
+  })
+
+  view = new EditorView({
+    state,
+    parent: container.value,
+  })
+})
+
+onBeforeUnmount(() => {
+  if (view) {
+    view.destroy()
+    view = null
+  }
+})
+
+watch(() => props.modelValue, (val) => {
+  if (!view) return
+  const current = view.state.doc.toString()
+  if (val !== current) {
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: val },
+    })
+  }
+})
+
+watch(() => props.schema, () => {
+  if (!view) return
+  view.dispatch({
+    effects: [
+      langCompartment.reconfigure(buildLangExtension()),
+      schemaCompartment.reconfigure(EditorState.languageData.of(() => [{ autocomplete: schemaCompletions }])),
+    ],
+  })
+}, { deep: true })
+
+watch(() => props.readonly, (val) => {
+  if (!view) return
+  view.dispatch({
+    effects: readonlyCompartment.reconfigure(EditorState.readOnly.of(val)),
+  })
+})
+</script>
+
+<template>
+  <div ref="container" class="mono-code-editor" />
+</template>
+
+<style scoped>
+.mono-code-editor {
+  min-height: 24px;
+}
+
+.mono-code-editor :deep(.cm-editor) {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.15s;
+}
+
+.mono-code-editor :deep(.cm-editor:hover) {
+  scrollbar-color: var(--bg-5) transparent;
+}
+
+.mono-code-editor :deep(.cm-editor)::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.mono-code-editor :deep(.cm-editor)::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.mono-code-editor :deep(.cm-editor:hover)::-webkit-scrollbar-track {
+  background: var(--bg-2);
+}
+
+.mono-code-editor :deep(.cm-editor)::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 8px;
+}
+
+.mono-code-editor :deep(.cm-editor:hover)::-webkit-scrollbar-thumb {
+  background: var(--bg-5);
+}
+
+.mono-code-editor :deep(.cm-editor)::-webkit-scrollbar-thumb:hover {
+  background: var(--bg-6);
+}
+</style>