@conciv/ui-kit-tap 0.0.2 → 0.0.3

package/dist/index.js

@@ -136,7 +136,7 @@ function D(n) {
 					}), a;
 				})()
 			})
-		}), null), r(() => e(f, `relative w-full ${n.class ?? ""}`)), f;
+		}), null), r(() => e(f, `w-full relative ${n.class ?? ""}`)), f;
 	})();
 }
 n(["pointerdown"]);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["For","Show","createSignal","onCleanup","onMount","JSX","Editor","Document","Paragraph","Text","HardBreak","Mention","Avatar","MentionItem","id","label","MentionSegment","type","text","MentionFieldApi","focus","clear","submit","element","HTMLElement","SuggestionState","items","command","item","rect","DOMRect","JsonNode","attrs","Record","content","EDITOR","PLACEHOLDER","LISTBOX","OPTION","serialize","doc","out","pushText","last","at","push","inline","nodes","forEach","node","String","blocks","block","index","length","MentionField","props","query","onSubmit","segments","onReady","api","onEmptyChange","empty","placeholder","ariaLabel","class","Element","host","HTMLDivElement","editor","setEmpty","suggestion","setSuggestion","setIndex","isEmpty","getJSON","commands","clearContent","editorProps","attributes","role","handleKeyDown","_view","event","key","shiftKey","preventDefault","onUpdate","instance","extensions","configure","HTMLAttributes","char","render","onStart","start","clientRect","update","onExit","onKeyDown","state","view","dom","destroy","_el$","_tmpl$","_el$2","firstChild","_$use","_$insert","_$createComponent","when","_$memo","children","_el$3","_tmpl$2","_el$4","_tmpl$3","each","position","_el$5","_tmpl$4","$$pointerdown","Root","Fallback","trim","charAt","toUpperCase","_$effect","_$setAttribute","_p$","_v$","left","_v$2","bottom","e","_$setStyleProperty","t","undefined","_$className","_$delegateEvents"],"sources":["../src/mention-field.tsx"],"sourcesContent":["import {For, Show, createSignal, onCleanup, onMount, type JSX} from 'solid-js'\nimport {Editor} from '@tiptap/core'\nimport {Document} from '@tiptap/extension-document'\nimport {Paragraph} from '@tiptap/extension-paragraph'\nimport {Text} from '@tiptap/extension-text'\nimport {HardBreak} from '@tiptap/extension-hard-break'\nimport {Mention} from '@tiptap/extension-mention'\nimport {Avatar} from '@conciv/ui-kit-system'\n\nexport type MentionItem = {id: string; label: string}\nexport type MentionSegment = {type: 'text'; text: string} | {type: 'mention'; id: string; label: string}\nexport type MentionFieldApi = {focus: () => void; clear: () => void; submit: () => void; element: HTMLElement}\n\ntype SuggestionState = {items: MentionItem[]; command: (item: MentionItem) => void; rect: DOMRect | null}\ntype JsonNode = {type?: string; text?: string; attrs?: Record<string, unknown>; content?: JsonNode[]}\n\nconst EDITOR =\n  'min-h-7 max-h-32 overflow-auto bg-pw-sunken text-[0.8125rem] text-pw-text rounded-pw-md [border:1px_solid_var(--pw-line)] px-2 py-1.5 [outline:none] focus-within:[border-color:var(--pw-accent-line)] [&_.tiptap]:[outline:none] [&_[data-mention]]:text-pw-accent-hi [&_[data-mention]]:bg-pw-accent-08 [&_[data-mention]]:rounded-pw-sm [&_[data-mention]]:px-0.5'\nconst PLACEHOLDER = 'pointer-events-none absolute left-2 top-1.5 text-[0.8125rem] text-pw-text-3 select-none'\nconst LISTBOX =\n  'fixed z-[2147483647] min-w-44 max-h-56 overflow-auto rounded-pw-md bg-pw-panel text-pw-text border border-pw-line shadow-pw-lg p-1'\nconst OPTION =\n  'flex items-center gap-2 px-2 py-1.5 rounded-pw-sm text-[0.8125rem] cursor-pointer aria-selected:bg-pw-fill'\n\nconst serialize = (doc: JsonNode): MentionSegment[] => {\n  const out: MentionSegment[] = []\n  const pushText = (text: string): void => {\n    if (!text) return\n    const last = out.at(-1)\n    if (last && last.type === 'text') last.text += text\n    else out.push({type: 'text', text})\n  }\n  const inline = (nodes: JsonNode[] | undefined): void =>\n    (nodes ?? []).forEach((node) => {\n      if (node.type === 'text') pushText(node.text ?? '')\n      else if (node.type === 'mention')\n        out.push({\n          type: 'mention',\n          id: String(node.attrs?.id ?? ''),\n          label: String(node.attrs?.label ?? node.attrs?.id ?? ''),\n        })\n      else if (node.type === 'hardBreak') pushText('\\n')\n    })\n  const blocks = doc.content ?? []\n  blocks.forEach((block, index) => {\n    inline(block.content)\n    if (index < blocks.length - 1) pushText('\\n')\n  })\n  return out\n}\n\n// A TipTap (ProseMirror) composer with @mentions. ProseMirror ships real shadow-DOM selection support,\n// so this works inside the comment overlay's shadow root where Slate/Lexical/textarea-caret tricks fail.\n// The editor element is created once and never re-rendered by Solid (a re-render breaks the suggestion\n// plugin); the participant listbox is a sibling the suggestion render hook drives via signals, so focus\n// never leaves the editor.\nexport function MentionField(props: {\n  items: (query: string) => MentionItem[]\n  onSubmit: (segments: MentionSegment[]) => void\n  onReady?: (api: MentionFieldApi) => void\n  onEmptyChange?: (empty: boolean) => void\n  placeholder?: string\n  ariaLabel?: string\n  class?: string\n}): JSX.Element {\n  let host: HTMLDivElement | undefined\n  let editor: Editor | undefined\n  const [empty, setEmpty] = createSignal(true)\n  const [suggestion, setSuggestion] = createSignal<SuggestionState | null>(null)\n  const [index, setIndex] = createSignal(0)\n\n  const submit = (): void => {\n    if (!editor || editor.isEmpty) return\n    props.onSubmit(serialize(editor.getJSON() as JsonNode))\n    editor.commands.clearContent()\n    setEmpty(true)\n    props.onEmptyChange?.(true)\n  }\n\n  onMount(() => {\n    if (!host) return\n    editor = new Editor({\n      element: host,\n      editorProps: {\n        attributes: {role: 'textbox', 'aria-label': props.ariaLabel ?? 'Message', 'aria-multiline': 'true'},\n        handleKeyDown: (_view, event) => {\n          if (event.key === 'Enter' && !event.shiftKey && !suggestion()) {\n            event.preventDefault()\n            submit()\n            return true\n          }\n          return false\n        },\n      },\n      onUpdate: ({editor: instance}) => {\n        setEmpty(instance.isEmpty)\n        props.onEmptyChange?.(instance.isEmpty)\n      },\n      extensions: [\n        Document,\n        Paragraph,\n        Text,\n        HardBreak,\n        Mention.configure({\n          HTMLAttributes: {'data-mention': ''},\n          suggestion: {\n            char: '@',\n            items: ({query}) => props.items(query),\n            render: () => ({\n              onStart: (start) => {\n                setSuggestion({items: start.items, command: start.command, rect: start.clientRect?.() ?? null})\n                setIndex(0)\n              },\n              onUpdate: (update) =>\n                setSuggestion({items: update.items, command: update.command, rect: update.clientRect?.() ?? null}),\n              onExit: () => setSuggestion(null),\n              onKeyDown: ({event}) => {\n                const state = suggestion()\n                if (!state || state.items.length === 0) return false\n                if (event.key === 'ArrowDown') {\n                  setIndex((index() + 1) % state.items.length)\n                  return true\n                }\n                if (event.key === 'ArrowUp') {\n                  setIndex((index() - 1 + state.items.length) % state.items.length)\n                  return true\n                }\n                if (event.key === 'Enter' || event.key === 'Tab') {\n                  const item = state.items[index()]\n                  if (item) state.command(item)\n                  return true\n                }\n                if (event.key === 'Escape') {\n                  setSuggestion(null)\n                  return true\n                }\n                return false\n              },\n            }),\n          },\n        }),\n      ],\n    })\n    props.onReady?.({\n      focus: () => editor?.commands.focus(),\n      clear: () => editor?.commands.clearContent(),\n      submit,\n      element: editor.view.dom,\n    })\n  })\n  onCleanup(() => editor?.destroy())\n\n  return (\n    <div class={`relative w-full ${props.class ?? ''}`}>\n      <div ref={(element) => (host = element)} class={EDITOR} />\n      <Show when={empty() && props.placeholder}>{(text) => <span class={PLACEHOLDER}>{text()}</span>}</Show>\n      <Show when={suggestion()}>\n        {(state) => (\n          <Show when={state().items.length > 0 && state().rect}>\n            {(rect) => (\n              <ul\n                role=\"listbox\"\n                aria-label=\"Mention a participant\"\n                class={LISTBOX}\n                style={{left: `${rect().left}px`, top: `${rect().bottom + 4}px`}}\n              >\n                <For each={state().items}>\n                  {(item, position) => (\n                    <li\n                      role=\"option\"\n                      aria-selected={position() === index()}\n                      class={OPTION}\n                      onPointerDown={(event) => {\n                        event.preventDefault()\n                        state().command(item)\n                      }}\n                    >\n                      <Avatar.Root class=\"size-5\">\n                        <Avatar.Fallback>{item.label.trim().charAt(0).toUpperCase() || '?'}</Avatar.Fallback>\n                      </Avatar.Root>\n                      {item.label}\n                    </li>\n                  )}\n                </For>\n              </ul>\n            )}\n          </Show>\n        )}\n      </Show>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["For","Show","createSignal","onCleanup","onMount","JSX","Editor","Document","Paragraph","Text","HardBreak","Mention","Avatar","MentionItem","id","label","MentionSegment","type","text","MentionFieldApi","focus","clear","submit","element","HTMLElement","SuggestionState","items","command","item","rect","DOMRect","JsonNode","attrs","Record","content","EDITOR","PLACEHOLDER","LISTBOX","OPTION","serialize","doc","out","pushText","last","at","push","inline","nodes","forEach","node","String","blocks","block","index","length","MentionField","props","query","onSubmit","segments","onReady","api","onEmptyChange","empty","placeholder","ariaLabel","class","Element","host","HTMLDivElement","editor","setEmpty","suggestion","setSuggestion","setIndex","isEmpty","getJSON","commands","clearContent","editorProps","attributes","role","handleKeyDown","_view","event","key","shiftKey","preventDefault","onUpdate","instance","extensions","configure","HTMLAttributes","char","render","onStart","start","clientRect","update","onExit","onKeyDown","state","view","dom","destroy","_el$","_tmpl$","_el$2","firstChild","_$use","_$insert","_$createComponent","when","_$memo","children","_el$3","_tmpl$2","_el$4","_tmpl$3","each","position","_el$5","_tmpl$4","$$pointerdown","Root","Fallback","trim","charAt","toUpperCase","_$effect","_$setAttribute","_p$","_v$","left","_v$2","bottom","e","_$setStyleProperty","t","undefined","_$className","_$delegateEvents"],"sources":["../src/mention-field.tsx"],"sourcesContent":["import {For, Show, createSignal, onCleanup, onMount, type JSX} from 'solid-js'\nimport {Editor} from '@tiptap/core'\nimport {Document} from '@tiptap/extension-document'\nimport {Paragraph} from '@tiptap/extension-paragraph'\nimport {Text} from '@tiptap/extension-text'\nimport {HardBreak} from '@tiptap/extension-hard-break'\nimport {Mention} from '@tiptap/extension-mention'\nimport {Avatar} from '@conciv/ui-kit-system'\n\nexport type MentionItem = {id: string; label: string}\nexport type MentionSegment = {type: 'text'; text: string} | {type: 'mention'; id: string; label: string}\nexport type MentionFieldApi = {focus: () => void; clear: () => void; submit: () => void; element: HTMLElement}\n\ntype SuggestionState = {items: MentionItem[]; command: (item: MentionItem) => void; rect: DOMRect | null}\ntype JsonNode = {type?: string; text?: string; attrs?: Record<string, unknown>; content?: JsonNode[]}\n\nconst EDITOR =\n  'min-h-7 max-h-32 overflow-auto bg-pw-sunken text-[0.8125rem] text-pw-text rounded-pw-md [border:1px_solid_var(--pw-line)] px-2 py-1.5 [outline:none] focus-within:[border-color:var(--pw-accent-line)] [&_.tiptap]:[outline:none] [&_[data-mention]]:text-pw-accent-hi [&_[data-mention]]:bg-pw-accent-08 [&_[data-mention]]:rounded-pw-sm [&_[data-mention]]:px-0.5'\nconst PLACEHOLDER = 'pointer-events-none absolute left-2 top-1.5 text-[0.8125rem] text-pw-text-3 select-none'\nconst LISTBOX =\n  'fixed z-[2147483647] min-w-44 max-h-56 overflow-auto rounded-pw-md bg-pw-panel text-pw-text border border-pw-line shadow-pw-lg p-1'\nconst OPTION =\n  'flex items-center gap-2 px-2 py-1.5 rounded-pw-sm text-[0.8125rem] cursor-pointer aria-selected:bg-pw-fill'\n\nconst serialize = (doc: JsonNode): MentionSegment[] => {\n  const out: MentionSegment[] = []\n  const pushText = (text: string): void => {\n    if (!text) return\n    const last = out.at(-1)\n    if (last && last.type === 'text') last.text += text\n    else out.push({type: 'text', text})\n  }\n  const inline = (nodes: JsonNode[] | undefined): void =>\n    (nodes ?? []).forEach((node) => {\n      if (node.type === 'text') pushText(node.text ?? '')\n      else if (node.type === 'mention')\n        out.push({\n          type: 'mention',\n          id: String(node.attrs?.id ?? ''),\n          label: String(node.attrs?.label ?? node.attrs?.id ?? ''),\n        })\n      else if (node.type === 'hardBreak') pushText('\\n')\n    })\n  const blocks = doc.content ?? []\n  blocks.forEach((block, index) => {\n    inline(block.content)\n    if (index < blocks.length - 1) pushText('\\n')\n  })\n  return out\n}\n\nexport function MentionField(props: {\n  items: (query: string) => MentionItem[]\n  onSubmit: (segments: MentionSegment[]) => void\n  onReady?: (api: MentionFieldApi) => void\n  onEmptyChange?: (empty: boolean) => void\n  placeholder?: string\n  ariaLabel?: string\n  class?: string\n}): JSX.Element {\n  let host: HTMLDivElement | undefined\n  let editor: Editor | undefined\n  const [empty, setEmpty] = createSignal(true)\n  const [suggestion, setSuggestion] = createSignal<SuggestionState | null>(null)\n  const [index, setIndex] = createSignal(0)\n\n  const submit = (): void => {\n    if (!editor || editor.isEmpty) return\n    props.onSubmit(serialize(editor.getJSON() as JsonNode))\n    editor.commands.clearContent()\n    setEmpty(true)\n    props.onEmptyChange?.(true)\n  }\n\n  onMount(() => {\n    if (!host) return\n    editor = new Editor({\n      element: host,\n      editorProps: {\n        attributes: {role: 'textbox', 'aria-label': props.ariaLabel ?? 'Message', 'aria-multiline': 'true'},\n        handleKeyDown: (_view, event) => {\n          if (event.key === 'Enter' && !event.shiftKey && !suggestion()) {\n            event.preventDefault()\n            submit()\n            return true\n          }\n          return false\n        },\n      },\n      onUpdate: ({editor: instance}) => {\n        setEmpty(instance.isEmpty)\n        props.onEmptyChange?.(instance.isEmpty)\n      },\n      extensions: [\n        Document,\n        Paragraph,\n        Text,\n        HardBreak,\n        Mention.configure({\n          HTMLAttributes: {'data-mention': ''},\n          suggestion: {\n            char: '@',\n            items: ({query}) => props.items(query),\n            render: () => ({\n              onStart: (start) => {\n                setSuggestion({items: start.items, command: start.command, rect: start.clientRect?.() ?? null})\n                setIndex(0)\n              },\n              onUpdate: (update) =>\n                setSuggestion({items: update.items, command: update.command, rect: update.clientRect?.() ?? null}),\n              onExit: () => setSuggestion(null),\n              onKeyDown: ({event}) => {\n                const state = suggestion()\n                if (!state || state.items.length === 0) return false\n                if (event.key === 'ArrowDown') {\n                  setIndex((index() + 1) % state.items.length)\n                  return true\n                }\n                if (event.key === 'ArrowUp') {\n                  setIndex((index() - 1 + state.items.length) % state.items.length)\n                  return true\n                }\n                if (event.key === 'Enter' || event.key === 'Tab') {\n                  const item = state.items[index()]\n                  if (item) state.command(item)\n                  return true\n                }\n                if (event.key === 'Escape') {\n                  setSuggestion(null)\n                  return true\n                }\n                return false\n              },\n            }),\n          },\n        }),\n      ],\n    })\n    props.onReady?.({\n      focus: () => editor?.commands.focus(),\n      clear: () => editor?.commands.clearContent(),\n      submit,\n      element: editor.view.dom,\n    })\n  })\n  onCleanup(() => editor?.destroy())\n\n  return (\n    <div class={`w-full relative ${props.class ?? ''}`}>\n      <div ref={(element) => (host = element)} class={EDITOR} />\n      <Show when={empty() && props.placeholder}>{(text) => <span class={PLACEHOLDER}>{text()}</span>}</Show>\n      <Show when={suggestion()}>\n        {(state) => (\n          <Show when={state().items.length > 0 && state().rect}>\n            {(rect) => (\n              <ul\n                role=\"listbox\"\n                aria-label=\"Mention a participant\"\n                class={LISTBOX}\n                style={{left: `${rect().left}px`, top: `${rect().bottom + 4}px`}}\n              >\n                <For each={state().items}>\n                  {(item, position) => (\n                    <li\n                      role=\"option\"\n                      aria-selected={position() === index()}\n                      class={OPTION}\n                      onPointerDown={(event) => {\n                        event.preventDefault()\n                        state().command(item)\n                      }}\n                    >\n                      <Avatar.Root class=\"size-5\">\n                        <Avatar.Fallback>{item.label.trim().charAt(0).toUpperCase() || '?'}</Avatar.Fallback>\n                      </Avatar.Root>\n                      {item.label}\n                    </li>\n                  )}\n                </For>\n              </ul>\n            )}\n          </Show>\n        )}\n      </Show>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/mention-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mention-field.d.ts","sourceRoot":"","sources":["../src/mention-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,GAAG,EAAC,MAAM,UAAU,CAAA;AAS9E,MAAM,MAAM,WAAW,GAAG;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAA;AACxG,MAAM,MAAM,eAAe,GAAG;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,EAAE,WAAW,CAAA;CAAC,CAAA;AA6C9G,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,EAAE,CAAA;IACvC,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,GAAG,CAAC,OAAO,CA+Hd"}
+{"version":3,"file":"mention-field.d.ts","sourceRoot":"","sources":["../src/mention-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,GAAG,EAAC,MAAM,UAAU,CAAA;AAS9E,MAAM,MAAM,WAAW,GAAG;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAA;AACxG,MAAM,MAAM,eAAe,GAAG;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,EAAE,WAAW,CAAA;CAAC,CAAA;AAwC9G,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,EAAE,CAAA;IACvC,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,GAAG,CAAC,OAAO,CA+Hd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conciv/ui-kit-tap",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "TipTap-based rich-text primitives for conciv (SolidJS, shadow-DOM-safe): a mention composer built on @tiptap/core and the shared ui-kit-system tokens. Each primitive is viewable in Storybook.",
   "keywords": [
     "conciv",
@@ -39,7 +39,7 @@
     "@tiptap/extension-paragraph": "^3.27.1",
     "@tiptap/extension-text": "^3.27.1",
     "@tiptap/pm": "^3.27.1",
-    "@conciv/ui-kit-system": "0.0.2"
+    "@conciv/ui-kit-system": "0.0.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
@@ -61,7 +61,7 @@
     "vite": "^8.0.16",
     "vite-plugin-solid": "^2.11.12",
     "vitest": "^4.1.8",
-    "@conciv/uno-preset": "0.0.2"
+    "@conciv/uno-preset": "0.0.3"
   },
   "peerDependencies": {
     "solid-js": "^1.9.13"