@graphenedata/cli 0.0.14 → 0.0.16

package/dist/ui/components/DateRange.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {onMount} from 'svelte'
   import {toBoolean} from '../component-utilities/inputUtils'
+  import {captureInitial, getPageInputs} from '../internal/pageInputs.svelte.js'
 
   interface Props {
     name: string
@@ -27,13 +28,15 @@
   let mounted = false
   let queryKey = ''
   let queryHandler: ((res: {rows?: any[]; error?: any}) => void) | null = null
+  let pageInputs = getPageInputs()
+  let field = captureInitial(() => pageInputs.dateRange(name))
 
   let domainStart: string | null = $state(null)
   let domainEnd: string | null = $state(null)
 
   let currentStart: string | null = $state(null)
   let currentEnd: string | null = $state(null)
-  let currentPreset: string = $state('')
+  let currentPreset: string | null = $state(null)
   let touched = false
 
   let hidePrint = $derived(toBoolean(hideDuringPrint))
@@ -46,16 +49,16 @@
 
   onMount(() => {
     mounted = true
-    currentStart = normalizeInput(start)
-    currentEnd = normalizeInput(end)
-    if (defaultValue && presetList.includes(defaultValue)) {
-      applyPreset(defaultValue, false)
-    } else {
-      updateParams()
-    }
+    currentStart = field.hasExternalValue ? field.value.start : normalizeInput(start)
+    currentEnd = field.hasExternalValue ? field.value.end : normalizeInput(end)
+    currentPreset = inferPreset(currentStart, currentEnd)
+    if (field.hasExternalValue) updateParams()
+    else if (defaultValue && presetList.includes(defaultValue)) applyPreset(defaultValue, false)
+    else updateParams()
     refreshQuery()
     return () => {
       mounted = false
+      field.destroy()
       if (queryHandler) {
         window.$GRAPHENE?.unsubscribe?.(queryHandler)
         queryHandler = null
@@ -67,7 +70,13 @@
     refreshQuery()
   })
 
-  function refreshQuery () {
+  $effect(() => {
+    if (currentStart === field.value.start && currentEnd === field.value.end) return
+    if (!mounted) return
+    setRange(field.value.start, field.value.end, inferPreset(field.value.start, field.value.end), {persist: false})
+  })
+
+  function refreshQuery() {
     if (!mounted) return
     let key = data && dates ? `${data}::${dates}` : ''
     if (key === queryKey) return
@@ -78,7 +87,7 @@
     queryKey = key
     if (!data || !dates) return
     let handler = (res: {rows?: any[]; error?: any}) => {
-      if (res.error || !res.rows?.length) return
+      if (!res || res.error || !res.rows?.length) return
       let values = res.rows
         .map(row => normalizeInput(row[dates]))
         .filter((val): val is string => !!val)
@@ -86,13 +95,15 @@
       values.sort()
       domainStart = values[0]
       domainEnd = values[values.length - 1]
-      if (!touched) {
+      if (field.hasExternalValue) {
+        currentPreset = inferPreset(currentStart, currentEnd)
+      } else if (!touched) {
         if (defaultValue && presetList.includes(defaultValue)) {
           applyPreset(defaultValue, false)
         } else {
           let startCandidate = currentStart ?? domainStart
           let endCandidate = currentEnd ?? (domainEnd ? addDaysString(domainEnd, 1) : null)
-          setRange(startCandidate, endCandidate, currentPreset, false)
+          setRange(startCandidate, endCandidate, currentPreset, {markTouched: false, persist: true})
         }
       }
     }
@@ -102,7 +113,7 @@
     }
   }
 
-  function normalizeInput (value: string | Date | null | undefined): string | null {
+  function normalizeInput(value: string | Date | null | undefined): string | null {
     if (value === null || value === undefined) return null
     if (value instanceof Date) return formatDate(value)
     let parsed = new Date(value)
@@ -110,69 +121,90 @@
     return formatDate(parsed)
   }
 
-  function formatDate (value: Date): string {
+  function formatDate(value: Date): string {
     let year = value.getFullYear()
     let month = String(value.getMonth() + 1).padStart(2, '0')
     let day = String(value.getDate()).padStart(2, '0')
     return `${year}-${month}-${day}`
   }
 
-  function addDays (value: Date, days: number): Date {
+  function addDays(value: Date, days: number): Date {
     let copy = new Date(value) // eslint-disable-line svelte/prefer-svelte-reactivity
     copy.setDate(copy.getDate() + days)
     return copy
   }
 
-  function addDaysString (value: string, days: number): string {
+  function addDaysString(value: string, days: number): string {
     let parsed = new Date(value)
     if (Number.isNaN(parsed.getTime())) return value
     return formatDate(addDays(parsed, days))
   }
 
-  function startOfMonth (value: Date): Date {
+  function startOfMonth(value: Date): Date {
     return new Date(value.getFullYear(), value.getMonth(), 1)
   }
 
-  function startOfYear (value: Date): Date {
+  function startOfYear(value: Date): Date {
     return new Date(value.getFullYear(), 0, 1)
   }
 
-  function addMonths (value: Date, months: number): Date {
+  function addMonths(value: Date, months: number): Date {
     let copy = new Date(value) // eslint-disable-line svelte/prefer-svelte-reactivity
     copy.setMonth(copy.getMonth() + months)
     return copy
   }
 
-  function addYears (value: Date, years: number): Date {
+  function addYears(value: Date, years: number): Date {
     let copy = new Date(value) // eslint-disable-line svelte/prefer-svelte-reactivity
     copy.setFullYear(copy.getFullYear() + years)
     return copy
   }
 
-  function setRange (startValue: string | null, endValue: string | null, preset: string, markTouched: boolean) {
+  // We only persist start/end in URL state, so the preset label is inferred by matching
+  // the current range against the configured preset definitions.
+  function inferPreset(startValue: string | null, endValue: string | null): string | null {
+    if (!startValue && !endValue) return null
+    let baseEnd = (() => {
+      if (endValue) {
+        let parsed = new Date(endValue)
+        if (!Number.isNaN(parsed.getTime())) return addDays(parsed, -1)
+      }
+      if (domainEnd) return new Date(domainEnd)
+      return new Date()
+    })()
+    if (Number.isNaN(baseEnd.getTime())) return null
+    for (let preset of presetList) {
+      let range = computePresetRange(preset, baseEnd)
+      let presetStart = range?.start ? formatDate(range.start) : null
+      let presetEnd = range?.end ? formatDate(range.end) : null
+      if (presetStart === startValue && presetEnd === endValue) return preset
+    }
+    return null
+  }
+
+  function setRange(startValue: string | null, endValue: string | null, preset: string | null, {markTouched = false, persist = true}: {markTouched?: boolean; persist?: boolean} = {}) {
     currentStart = startValue
     currentEnd = endValue
     currentPreset = preset
     if (markTouched) touched = true
-    updateParams()
+    if (persist) updateParams()
   }
 
-  function updateParams () {
-    window.$GRAPHENE.updateParam(`${name}_start`, currentStart)
-    window.$GRAPHENE.updateParam(`${name}_end`, currentEnd)
+  function updateParams() {
+    field.set({start: currentStart, end: currentEnd})
   }
 
-  function onStartChange (event: Event) {
+  function onStartChange(event: Event) {
     let value = (event.currentTarget as HTMLInputElement).value || null
-    setRange(value, currentEnd, '', true)
+    setRange(value, currentEnd, null, {markTouched: true, persist: true})
   }
 
-  function onEndChange (event: Event) {
+  function onEndChange(event: Event) {
     let value = (event.currentTarget as HTMLInputElement).value || null
-    setRange(currentStart, value, '', true)
+    setRange(currentStart, value, null, {markTouched: true, persist: true})
   }
 
-  function applyPreset (preset: string, markTouched = true) {
+  function applyPreset(preset: string, markTouched = true) {
     let baseEnd = (() => {
       if (currentEnd) return new Date(currentEnd)
       if (domainEnd) return new Date(domainEnd)
@@ -183,10 +215,10 @@
     if (!range) return
     let startVal = range.start ? formatDate(range.start) : null
     let endVal = range.end ? formatDate(range.end) : null
-    setRange(startVal, endVal, preset, markTouched)
+    setRange(startVal, endVal, preset, {markTouched, persist: true})
   }
 
-  function computePresetRange (preset: string, baseEndInclusive: Date): {start: Date | null; end: Date | null} | null {
+  function computePresetRange(preset: string, baseEndInclusive: Date): {start: Date | null; end: Date | null} | null {
     let label = preset.trim()
     let today = new Date()
     let endExclusive = addDays(baseEndInclusive, 1)
@@ -254,10 +286,10 @@
     return null
   }
 
-  function onPresetChange (event: Event) {
+  function onPresetChange(event: Event) {
     let value = (event.currentTarget as HTMLSelectElement).value
     if (!value) {
-      currentPreset = ''
+      currentPreset = null
       touched = true
       return
     }
@@ -300,6 +332,7 @@
     }
   }
   .input-label {
+    font-family: var(--font-ui);
     font-size: 12px;
     font-weight: 600;
     color: var(--input-label-color, #374151);
@@ -323,6 +356,8 @@
     border: 1px solid rgba(107, 114, 128, 0.4);
     font-size: 14px;
     min-width: 150px;
+    font-family: var(--font-ui);
+    font-synthesis: none;
   }
   .preset-select {
     max-width: 220px;
@@ -330,5 +365,7 @@
     border-radius: 6px;
     border: 1px solid rgba(107, 114, 128, 0.4);
     font-size: 13px;
+    font-family: var(--font-ui);
+    font-synthesis: none;
   }
 </style>

package/dist/ui/components/Dropdown.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount, setContext, tick, type Snippet} from 'svelte'
-  import {DROPDOWN_CONTEXT} from '../component-utilities/dropdownContext'
   import {ensureArray, toBoolean} from '../component-utilities/inputUtils'
+  import {captureInitial, getPageInputs} from '../internal/pageInputs.svelte.js'
 
   interface Option {
     value: any
@@ -42,6 +42,8 @@
   let touched = false
   let queryHandler: ((res: {rows?: any[]; error?: any}) => void) | null = null
   let queryKey = ''
+  let pageInputs = getPageInputs()
+  let field = captureInitial(() => pageInputs.dropdown(name, toBoolean(multiple)))
 
   let isOpen = $state(false)
   let searchTerm = $state('')
@@ -59,7 +61,7 @@
       syncSelection(false)
     }
   }
-  setContext(DROPDOWN_CONTEXT, registerOption)
+  setContext('dropdown', registerOption)
 
   const optionKey = (val: any): string => {
     if (val === null) return 'null'
@@ -80,7 +82,7 @@
       let key = optionKey(opt.value)
       if (!map.has(key)) map.set(key, opt)
     }
-    return Array.from(map.values())
+    return Array.from(map.values()).sort((a, b) => String(a.label ?? a.value ?? '').localeCompare(String(b.label ?? b.value ?? ''), undefined, {numeric: true}))
   }
 
   let multi = $derived(toBoolean(multiple))
@@ -104,7 +106,13 @@
     if (isOpen) activeIndex = ensureActiveIndex(activeIndex, filteredOptions)
   })
 
-  function setupQuery () {
+  $effect(() => {
+    if (!sameSelection(selection, field.value)) {
+      setSelection(field.value, {persist: false})
+    }
+  })
+
+  function setupQuery() {
     if (!mounted) return
     let key = data ? `${data}::${value}::${resolvedLabelField || ''}` : ''
     if (key === queryKey) return
@@ -121,7 +129,7 @@
     let columns = [value]
     if (resolvedLabelField && resolvedLabelField !== value) columns.push(resolvedLabelField)
     let handler = (res: {rows?: any[]; error?: any}) => {
-      if (res.error) return
+      if (!res || res.error) return
       if (!res.rows) return
       queryOptions = res.rows.map(row => ({
         value: row[value],
@@ -142,7 +150,7 @@
     closeMenu(false)
   }
 
-  function filterOptions (opts: Option[], term: string): Option[] {
+  function filterOptions(opts: Option[], term: string): Option[] {
     let trimmed = term.trim().toLowerCase()
     if (!trimmed) return opts
     return opts.filter(opt => {
@@ -151,24 +159,24 @@
     })
   }
 
-  function ensureActiveIndex (current: number, opts: Option[]): number {
+  function ensureActiveIndex(current: number, opts: Option[]): number {
     if (!opts.length) return -1
     if (current >= 0 && current < opts.length) return current
     let selectedIdx = opts.findIndex(opt => isOptionSelected(opt))
     return selectedIdx >= 0 ? selectedIdx : 0
   }
 
-  function isOptionSelected (opt: Option): boolean {
+  function isOptionSelected(opt: Option): boolean {
     let key = optionKey(opt.value)
     return selection.some(val => optionKey(val) === key)
   }
 
-  async function focusSearchInput () {
+  async function focusSearchInput() {
     await tick()
     if (searchInput) searchInput.focus()
   }
 
-  function updateTriggerWidth () {
+  function updateTriggerWidth() {
     if (!triggerEl) {
       if (triggerWidth !== 0) triggerWidth = 0
       return
@@ -177,14 +185,14 @@
     if (width !== triggerWidth) triggerWidth = width
   }
 
-  function openMenu (focusSearch = true) {
+  function openMenu(focusSearch = true) {
     if (isDisabled) return
     updateTriggerWidth()
     isOpen = true
     if (focusSearch) focusSearchInput()
   }
 
-  function closeMenu (focusTrigger: boolean) {
+  function closeMenu(focusTrigger: boolean) {
     if (!isOpen) return
     isOpen = false
     activeIndex = -1
@@ -192,7 +200,7 @@
     if (focusTrigger) triggerEl?.focus()
   }
 
-  function toggleMenu () {
+  function toggleMenu() {
     if (isDisabled) return
     if (isOpen) {
       closeMenu(false)
@@ -201,7 +209,7 @@
     }
   }
 
-  function moveActive (delta: number) {
+  function moveActive(delta: number) {
     if (!filteredOptions.length) {
       activeIndex = -1
       return
@@ -215,12 +223,12 @@
     activeIndex = next
   }
 
-  function selectActiveOption () {
+  function selectActiveOption() {
     if (!filteredOptions.length || activeIndex < 0 || activeIndex >= filteredOptions.length) return
     handleOptionSelect(filteredOptions[activeIndex], true)
   }
 
-  function handleTriggerKeydown (event: KeyboardEvent) {
+  function handleTriggerKeydown(event: KeyboardEvent) {
     if (event.defaultPrevented) return
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
       event.preventDefault()
@@ -236,7 +244,7 @@
     }
   }
 
-  function handleMenuKeydown (event: KeyboardEvent) {
+  function handleMenuKeydown(event: KeyboardEvent) {
     if (event.key === 'ArrowDown') {
       event.preventDefault()
       moveActive(1)
@@ -260,30 +268,30 @@
     }
   }
 
-  function handleOptionKeydown (event: KeyboardEvent, opt: Option) {
+  function handleOptionKeydown(event: KeyboardEvent, opt: Option) {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault()
       handleOptionSelect(opt, true)
     }
   }
 
-  function handleOptionSelect (opt: Option, fromKeyboard: boolean) {
+  function handleOptionSelect(opt: Option, fromKeyboard: boolean) {
     let key = optionKey(opt.value)
     if (multi) {
       let exists = selection.some(val => optionKey(val) === key)
       if (exists) {
         let next = selection.filter(val => optionKey(val) !== key)
-        setSelection(next, true)
+        setSelection(next, {fromUser: true, persist: true})
       } else {
-        setSelection([...selection, opt.value], true)
+        setSelection([...selection, opt.value], {fromUser: true, persist: true})
       }
     } else {
-      setSelection([opt.value], true)
+      setSelection([opt.value], {fromUser: true, persist: true})
       closeMenu(fromKeyboard)
     }
   }
 
-  function scrollActiveIntoView () {
+  function scrollActiveIntoView() {
     if (!isOpen || activeIndex < 0) return
     let optionEl = menuEl?.querySelector<HTMLElement>(`[data-index="${activeIndex}"]`)
     optionEl?.scrollIntoView({block: 'nearest'})
@@ -295,8 +303,11 @@
 
   onMount(() => {
     mounted = true
-    let defaults = ensureArray(defaultValue)
-    if (!hasNoDefault && defaults.length) setSelection(defaults, false)
+    if (field.hasExternalValue) setSelection(field.value, {persist: false})
+    else {
+      let defaults = ensureArray(defaultValue)
+      if (!hasNoDefault && defaults.length) setSelection(defaults, {persist: true})
+    }
     syncSelection(false)
     setupQuery()
     if (typeof document !== 'undefined') {
@@ -305,6 +316,7 @@
     }
     return () => {
       mounted = false
+      field.destroy()
       if (queryHandler) {
         window.$GRAPHENE?.unsubscribe?.(queryHandler)
         queryHandler = null
@@ -326,69 +338,77 @@
     if (triggerEl) updateTriggerWidth()
   })
 
-  function syncSelection (fromUser: boolean) {
+  function syncSelection(fromUser: boolean) {
+    // Reconcile persisted selection with the current option set, while keeping external values
+    // authoritative and only applying defaults/select-all before the user has interacted.
     let opts = availableOptions
     if (!opts.length) {
-      if (selection.length) updateInputPayload(selection)
+      // Keep the bound param initialized even before options load.
+      // This prevents $param references from throwing "Missing param" on first render.
+      updateInputPayload(selection)
       return
     }
     let nextSelection = selection.filter(val => valueMap.has(optionKey(val)))
     if (!fromUser) {
       let defaults = ensureArray(defaultValue)
-      if (multi && selectAllDefault) {
+      if (field.hasExternalValue) {
+        nextSelection = nextSelection
+      } else if (multi && selectAllDefault) {
         nextSelection = opts.map(o => o.value)
       } else if (!touched) {
-        if (defaults.length) {
+        if (defaults.length && !hasNoDefault) {
           nextSelection = defaults.filter(val => valueMap.has(optionKey(val)))
         } else if (!multi && !hasNoDefault) {
           nextSelection = selection.length ? nextSelection : []
         }
       }
     }
-    setSelection(nextSelection, fromUser)
+    setSelection(nextSelection, {fromUser, persist: true})
+  }
+
+  function sameSelection(left: any[], right: any[]) {
+    let leftKeys = left.map(optionKey)
+    let rightKeys = right.map(optionKey)
+    return leftKeys.length === rightKeys.length && leftKeys.every((key, index) => key === rightKeys[index])
   }
 
-  function setSelection (values: any[], fromUser: boolean) {
-    let keys = values.map(optionKey)
-    let existingKeys = selection.map(optionKey)
-    let changed = keys.length !== existingKeys.length || keys.some((k, idx) => k !== existingKeys[idx])
-    if (!changed) {
-      if (!fromUser) updateInputPayload(selection)
+  function setSelection(values: any[], {fromUser = false, persist = true}: {fromUser?: boolean; persist?: boolean} = {}) {
+    if (sameSelection(values, selection)) {
+      if (persist && !fromUser) updateInputPayload(selection)
       return
     }
     selection = values
     if (fromUser) touched = true
-    updateInputPayload(selection)
+    if (persist) updateInputPayload(selection)
   }
 
-  function updateInputPayload (values: any[]) {
-    let paramValue = values.length ? values[0] : null
-    window.$GRAPHENE.updateParam(name, paramValue)
+  function updateInputPayload(values: any[]) {
+    field.set(values)
   }
 
-  function selectAll () {
+  function selectAll() {
     if (!multi) return
-    setSelection(availableOptions.map(opt => opt.value), true)
+    setSelection(availableOptions.map(opt => opt.value), {fromUser: true, persist: true})
   }
 
-  function clearSelection () {
-    setSelection([], true)
+  function clearSelection() {
+    setSelection([], {fromUser: true, persist: true})
   }
 
   let elementId = $derived(`dropdown-${name}`)
   let menuId = $derived(`${elementId}-menu`)
 
-  function getContainerClass () {
+  function getContainerClass() {
     if (!hidePrint) return 'input-block'
     return 'input-block hide-print'
   }
 
-  function getDropdownClass () {
+  function getDropdownClass() {
     if (!isDisabled) return 'dropdown'
     return 'dropdown is-disabled'
   }
 
-  function getOptionClass (opt: Option, idx: number) {
+  function getOptionClass(opt: Option, idx: number) {
     let classes = 'dropdown-option'
     if (isOptionSelected(opt)) classes += ' is-selected'
     if (activeIndex === idx) classes += ' is-active'
@@ -496,7 +516,7 @@
                         class={`checkbox-border${isOptionSelected(opt) ? ' is-filled' : ''}`}
                       />
                       {#if isOptionSelected(opt)}
-                        <path d="M4 8l2.5 2.5L12 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M4 8l2.5 2.5L12 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="checkbox-checkmark" />
                       {/if}
                     </svg>
                   {:else}
@@ -554,6 +574,7 @@
     }
   }
   .input-label {
+    font-family: var(--font-ui);
     font-size: 12px;
     font-weight: 600;
     color: var(--input-label-color, #374151);
@@ -583,7 +604,8 @@
     background: #ffffff;
     color: #1f2937;
     font-size: 14px;
-    font-family: var(--ui-font-family);
+    font-family: var(--font-ui);
+    font-synthesis: none;
     cursor: pointer;
     transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
   }
@@ -658,6 +680,9 @@
     border: 1px solid #d1d5db;
     padding: 6px 10px;
     font-size: 13px;
+    line-height: 16px;
+    font-family: var(--font-ui);
+    font-synthesis: none;
     background: #f9fafb;
     color: inherit;
     box-sizing: border-box;
@@ -683,6 +708,9 @@
     border-radius: 8px;
     cursor: pointer;
     font-size: 14px;
+    line-height: 18px;
+    font-family: var(--font-ui);
+    font-synthesis: none;
     transition: background 100ms ease, color 100ms ease;
     color: #1f2937;
   }
@@ -721,6 +749,9 @@
     fill: #2563eb;
     stroke: #2563eb;
   }
+  .dropdown-option.is-selected .checkbox-checkmark {
+    stroke: #ffffff;
+  }
   .checkmark {
     opacity: 0;
     stroke: #2563eb;
@@ -745,6 +776,8 @@
     background: none;
     color: #2563eb;
     font-size: 13px;
+    font-family: var(--font-ui);
+    font-synthesis: none;
     cursor: pointer;
     padding: 4px 0;
   }

package/dist/ui/components/DropdownOption.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {getContext, onMount} from 'svelte'
-  import {DROPDOWN_CONTEXT} from '../component-utilities/dropdownContext'
 
   interface Props {
     value: any
@@ -10,7 +9,7 @@
   let {value, valueLabel = undefined}: Props = $props()
 
   type RegisterFn = ((option: {value: any; label: string}) => (() => void) | void) | undefined
-  const register = getContext<RegisterFn>(DROPDOWN_CONTEXT)
+  const register = getContext<RegisterFn>('dropdown')
 
   let unregister: (() => void) | void