DSWidgets Engine - Val Town Demo

\n {\n setOutput(JSON.stringify(values, null, 2));\n }}\n />\n

Current Values

\n            {output}\n

\n );\n}\n",[],[192,199,206],{"_109":214,"_100":215,"_164":216,"_166":200,"_167":149,"_168":217,"_170":171,"_111":218,"_105":33,"_173":185,"_175":219,"_176":22,"_177":-5,"_178":220,"_103":221},"6fabf9ae-350a-11f1-86dc-42b51c65c3df","Checkbox.tsx","6fabfa4e-350a-11f1-86dc-42b51c65c3df",18,["D",1775845436462],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ChangeEvent, ReactElement } from \"https://esm.sh/react@18.2.0\";\nimport type { CheckboxConfig } from \"../../shared/types.ts\";\n\nexport interface CheckboxProps extends CheckboxConfig {\n onChange?: (value: boolean) => void;\n}\n\nexport function Checkbox({ id, label = \"\", value = false, disabled = false, onChange }: CheckboxProps): ReactElement {\n const handleChange = (e: ChangeEvent) => { onChange?.(e.target.checked); };\n return (\n \n \n {label ? {label} : null}\n \n );\n}\n",[],[192,199,215],{"_109":223,"_100":224,"_164":225,"_166":200,"_167":149,"_168":226,"_170":171,"_111":227,"_105":33,"_173":185,"_175":228,"_176":22,"_177":-5,"_178":229,"_103":230},"6fa24da0-350a-11f1-8390-42b51c65c3df","CheckboxGroup.tsx","6fa24e7c-350a-11f1-8390-42b51c65c3df",16,["D",1775845436318],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport { Checkbox as AriaCheckbox, CheckboxGroup as AriaCheckboxGroup } from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { CheckboxGroupConfig } from \"../../shared/types.ts\";\n\nexport interface CheckboxGroupProps extends CheckboxGroupConfig { onChange?: (value: string[]) => void; }\n\nconst groupStyles: CSSProperties = { display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" };\nconst itemStyles: CSSProperties = { display: \"inline-flex\", alignItems: \"center\", gap: \"0.5rem\", cursor: \"inherit\" };\n\nexport function CheckboxGroup({ id, label = \"\", choices = [], selected = [], disabled = false, inline = false, width = null, onChange }: CheckboxGroupProps): ReactElement {\n const containerStyle: CSSProperties = { ...groupStyles, flexDirection: inline ? \"row\" : \"column\", alignItems: inline ? \"center\" : \"stretch\", flexWrap: inline ? \"wrap\" : \"nowrap\", opacity: disabled ? 0.6 : 1, ...(width != null && { width }) };\n const optionsContainerStyle: CSSProperties = { display: \"flex\", flexDirection: inline ? \"row\" : \"column\", gap: \"0.5rem\", flexWrap: inline ? \"wrap\" : \"nowrap\" };\n const selectedSet = Array.isArray(selected) ? selected : [];\n return (\n onChange?.(value)} isDisabled={disabled} aria-labelledby={label ? `${id}-label` : undefined} style={containerStyle}>\n {label ? {label} : null}\n

\n {choices.map((choice) => (\n \n {({ isSelected }) => (<>{isSelected && }{choice.label})}\n \n ))}\n

\n \n );\n}\n",[],[192,199,224],{"_109":232,"_100":233,"_164":234,"_166":200,"_167":149,"_168":235,"_170":171,"_111":236,"_105":33,"_173":185,"_175":237,"_176":22,"_177":-5,"_178":238,"_103":239},"6fb2ce00-350a-11f1-8390-42b51c65c3df","ColorPicker.tsx","6fb2cee6-350a-11f1-8390-42b51c65c3df",19,["D",1775845436470],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/**\n * React ColorPicker widget. List of colors, each swatch independently\n * selectable. Color selection with ColorArea, ColorSlider, ColorField.\n * @see https://react-aria.adobe.com/ColorPicker\n */\n\nimport type { ReactElement } from \"https://esm.sh/react@18.2.0\";\nimport { useState, useCallback, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport {\n ColorPicker as AriaColorPicker,\n ColorArea,\n ColorSlider,\n ColorSwatch,\n ColorSwatchPicker,\n ColorSwatchPickerItem,\n ColorThumb,\n SliderTrack,\n Button,\n DialogTrigger,\n Popover,\n Dialog,\n} from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport { useOverlayTriggerState, parseColor } from \"https://esm.sh/react-stately?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { ColorPickerConfig } from \"../../shared/types.ts\";\n\n/** Default preset colors for ColorSwatchPicker. */\nconst DEFAULT_PRESET_COLORS = [\n \"#000000\",\n \"#ffffff\",\n \"#CCCCCC\",\n \"#ff0000\",\n \"#00ff00\",\n \"#0000ff\",\n \"#ffff00\"\n];\n\nexport interface ColorPickerProps extends ColorPickerConfig {\n onChange?: (value: string[]) => void;\n}\n\nfunction toColor(\n value: string | null | undefined\n): ReturnType | undefined {\n if (!value || value.trim() === \"\") return undefined;\n try {\n return parseColor(value);\n } catch {\n return undefined;\n }\n}\n\nfunction toHex(c: string | null | undefined): string {\n if (!c || c.trim() === \"\") return \"#000000\";\n try {\n return parseColor(c).toString(\"hex\");\n } catch {\n return \"#000000\";\n }\n}\n\nfunction normalizeValue(v: string[] | null | undefined): string[] {\n if (Array.isArray(v) && v.length > 0) return v;\n return [\"#000000\"];\n}\n\n/** Returns true if color is light (use dark text on it). */\nfunction isLightColor(hex: string): boolean {\n const m = hex.match(/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i);\n if (!m) return false;\n const r = parseInt(m[1], 16) / 255;\n const g = parseInt(m[2], 16) / 255;\n const b = parseInt(m[3], 16) / 255;\n const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n return luminance > 0.5;\n}\n\nfunction TrashIcon(): ReactElement {\n return (\n \n \n \n \n \n );\n}\n\nexport function ColorPicker({\n id,\n label = null,\n value = [\"#000000\"],\n width = null,\n disabled = false,\n maxColors = 0,\n addColor = true,\n showBrightnessSlider = false,\n onChange,\n}: ColorPickerProps): ReactElement {\n const colors = normalizeValue(value);\n const presetColors = DEFAULT_PRESET_COLORS.slice(\n 0,\n Math.max(0, maxColors)\n );\n const overlayState = useOverlayTriggerState({});\n const [draftColor, setDraftColor] = useState(null);\n const [hexInputValue, setHexInputValue] = useState(\"\");\n const [editingIndex, setEditingIndex] = useState(null);\n\n const currentHex =\n editingIndex != null && editingIndex < colors.length\n ? toHex(colors[editingIndex])\n : \"#000000\";\n\n useEffect(() => {\n if (overlayState.isOpen && editingIndex != null) {\n const hex =\n editingIndex < colors.length\n ? toHex(colors[editingIndex])\n : \"#000000\";\n setDraftColor(hex);\n setHexInputValue(hex);\n } else {\n setDraftColor(null);\n setHexInputValue(\"\");\n setEditingIndex(null);\n }\n }, [overlayState.isOpen, editingIndex, colors]);\n\n const displayColor =\n draftColor != null ? draftColor : (editingIndex != null ? currentHex : \"#000000\");\n const displayColorValue = toColor(displayColor) ?? parseColor(\"#000000\");\n\n const handleChoose = useCallback(() => {\n if (draftColor == null || editingIndex == null) {\n overlayState.close();\n return;\n }\n const next = [...colors];\n if (editingIndex < next.length) {\n next[editingIndex] = draftColor;\n } else {\n next.push(draftColor);\n }\n onChange?.(next);\n overlayState.close();\n }, [draftColor, editingIndex, colors, onChange, overlayState]);\n\n const openForIndex = useCallback(\n (index: number) => {\n setEditingIndex(index);\n overlayState.open();\n },\n [overlayState]\n );\n\n const handleDelete = useCallback(() => {\n if (editingIndex == null) return;\n if (colors.length <= 1) {\n const next = [\"#000000\"];\n onChange?.(next);\n } else {\n const next = colors.filter((_, i) => i !== editingIndex);\n onChange?.(next);\n }\n overlayState.close();\n }, [editingIndex, colors, onChange, overlayState]);\n\n const canAdd =\n addColor && (maxColors <= 0 || colors.length < maxColors);\n const swatchRefs = useRef<(HTMLDivElement | null)[]>([]);\n const [openAbove, setOpenAbove] = useState(false);\n const portalContainer =\n typeof document !== \"undefined\" ? document.body : undefined;\n\n useEffect(() => {\n if (!overlayState.isOpen || editingIndex == null) {\n setOpenAbove(false);\n return;\n }\n const measure = () => {\n const el =\n editingIndex < colors.length\n ? swatchRefs.current[editingIndex]\n : swatchRefs.current[colors.length];\n if (!el) return;\n const rect = el.getBoundingClientRect();\n const spaceBelow = window.innerHeight - rect.bottom - 8;\n const popoverHeight = 380;\n setOpenAbove(spaceBelow < popoverHeight && rect.top > spaceBelow);\n };\n const rafId = requestAnimationFrame(measure);\n return () => cancelAnimationFrame(rafId);\n }, [overlayState.isOpen, editingIndex, colors.length]);\n\n return (\n \n {label != null && label !== \"\" && (\n \n {label}\n \n )}\n {\n const hex = c.toString(\"hex\");\n setDraftColor(hex);\n setHexInputValue(hex);\n }}\n aria-label={label ?? \"Color\"}\n >\n

\n {colors.map((hex, idx) => (\n {\n swatchRefs.current[idx] = el;\n }}\n className={`dswidgets-colorpicker-swatch-wrapper ${overlayState.isOpen && editingIndex === idx && openAbove ? \"dswidgets-colorpicker-popover-above\" : \"\"}`}\n >\n {\n if (!open) overlayState.close();\n }}\n >\n openForIndex(idx)}\n style={{ backgroundColor: hex }}\n />\n \n

\n {presetColors.length > 0 && (\n \n {presetColors.map((presetHex) => (\n \n \n \n ))}\n \n )}\n

\n \n CHOOSE\n \n \n CANCEL\n \n \n \n \n

\n \n )}\n \n \n \n

\n ))}\n {canAdd && (\n {\n swatchRefs.current[colors.length] = el;\n }}\n className={`dswidgets-colorpicker-swatch-wrapper ${overlayState.isOpen && editingIndex === colors.length && openAbove ? \"dswidgets-colorpicker-popover-above\" : \"\"}`}\n >\n {\n if (!open) overlayState.close();\n }}\n >\n {\n setEditingIndex(colors.length);\n setDraftColor(\"#000000\");\n overlayState.open();\n }}\n >\n +\n \n \n \n \n \n \n )}\n \n \n \n \n );\n}\n",[],[192,199,233],{"_109":241,"_100":242,"_164":243,"_166":200,"_167":149,"_168":244,"_170":171,"_111":245,"_105":33,"_173":185,"_175":246,"_176":22,"_177":-5,"_178":247,"_103":248},"6f5e6edc-350a-11f1-b280-42b51c65c3df","DatePicker.tsx","6f5e6fae-350a-11f1-b280-42b51c65c3df",8,["D",1775845435911],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/**\n * React DatePicker widget. Single date selection.\n * Uses react-aria DatePicker, DateInput, Calendar, Popover, Dialog.\n * @see https://react-aria.adobe.com/DatePicker\n */\n\nimport type { ReactElement } from \"https://esm.sh/react@18.2.0\";\nimport { useMemo, useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport {\n DatePicker as AriaDatePicker,\n DateInput,\n DateSegment,\n Label,\n Group,\n Button,\n Popover,\n Dialog,\n Calendar,\n CalendarGrid,\n CalendarCell,\n Heading,\n} from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport { parseDate, today, getLocalTimeZone } from \"https://esm.sh/@internationalized/date@3.12.0\";\nimport type { DatePickerConfig } from \"../../shared/types.ts\";\n\nexport interface DatePickerProps extends DatePickerConfig {\n onChange?: (value: string | null) => void;\n}\n\nfunction toDateValue(v: string | null | undefined): ReturnType | null {\n if (!v) return null;\n try {\n return parseDate(v);\n } catch {\n return null;\n }\n}\n\nfunction getInitialFocusedDate(\n selected: ReturnType | null,\n placeholder: ReturnType | undefined,\n minVal: ReturnType | undefined,\n maxVal: ReturnType | undefined\n): ReturnType {\n if (selected) return selected;\n if (placeholder) return placeholder;\n if (minVal) return minVal;\n if (maxVal) return maxVal;\n return today(getLocalTimeZone()) as ReturnType;\n}\n\nfunction isSameCalendarDate(\n left: ReturnType,\n right: ReturnType\n): boolean {\n return left.compare(right) === 0;\n}\n\nexport function DatePicker({\n id,\n label = null,\n value = null,\n minValue = null,\n maxValue = null,\n placeholderValue = null,\n width = null,\n disabled = false,\n isRequired = false,\n granularity = \"day\",\n shouldCloseOnSelect = true,\n firstDayOfWeek = \"sun\",\n name = null,\n onChange,\n}: DatePickerProps): ReactElement {\n const dateValue = toDateValue(value);\n const minVal = minValue ? parseDate(minValue) : undefined;\n const maxVal = maxValue ? parseDate(maxValue) : undefined;\n const placeholderVal = placeholderValue ? parseDate(placeholderValue) : undefined;\n const [focusedDate, setFocusedDate] = useState>(\n () => getInitialFocusedDate(dateValue, placeholderVal, minVal, maxVal)\n );\n const [showYearList, setShowYearList] = useState(false);\n\n useEffect(() => {\n const nextFocus = getInitialFocusedDate(dateValue, placeholderVal, minVal, maxVal);\n setFocusedDate((prev) =>\n isSameCalendarDate(prev, nextFocus) ? prev : nextFocus\n );\n }, [value, placeholderValue, minValue, maxValue]);\n\n const yearOptions = useMemo(() => {\n const currentYear = focusedDate.year;\n const minYear = minVal?.year ?? currentYear - 100;\n const maxYear = maxVal?.year ?? currentYear + 20;\n const start = Math.min(minYear, currentYear);\n const end = Math.max(maxYear, currentYear);\n const years: number[] = [];\n for (let year = end; year >= start; year--) {\n years.push(year);\n }\n return years;\n }, [focusedDate.year, minVal?.year, maxVal?.year]);\n\n const selectYear = (year: number) => {\n let next = focusedDate.set({ year }) as ReturnType;\n if (minVal && next.compare(minVal) < 0) {\n next = minVal;\n }\n if (maxVal && next.compare(maxVal) > 0) {\n next = maxVal;\n }\n setFocusedDate(next);\n setShowYearList(false);\n };\n\n return (\n \n onChange?.(v?.toString() ?? null)}\n minValue={minVal}\n maxValue={maxVal}\n placeholderValue={placeholderVal}\n isDisabled={disabled}\n isRequired={isRequired}\n granularity={granularity}\n shouldCloseOnSelect={shouldCloseOnSelect}\n firstDayOfWeek={firstDayOfWeek}\n name={name ?? undefined}\n aria-label={label ?? undefined}\n aria-labelledby={label ? `${id}-label` : undefined}\n >\n {label != null && label !== \"\" ? (\n \n {label}\n \n ) : null}\n \n

\n \n {(segment) => }\n \n

\n \n \n \n \n \n \n \n );\n}\n",[],[192,199,242],{"_109":250,"_100":251,"_164":252,"_166":200,"_167":149,"_168":253,"_170":171,"_111":254,"_105":33,"_173":185,"_175":255,"_176":22,"_177":-5,"_178":256,"_103":257},"6f7a181c-350a-11f1-8390-42b51c65c3df","DateRangePicker.tsx","6f7a18ee-350a-11f1-8390-42b51c65c3df",12,["D",1775845436120],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/**\n * React DateRangePicker widget. Date range selection.\n * Uses react-aria DateRangePicker, DateInput, RangeCalendar, Popover, Dialog.\n */\n\nimport type { ReactElement } from \"https://esm.sh/react@18.2.0\";\nimport { useMemo, useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport {\n DateRangePicker as AriaDateRangePicker,\n DateInput,\n DateSegment,\n Label,\n Group,\n Button,\n Popover,\n Dialog,\n RangeCalendar,\n CalendarGrid,\n CalendarCell,\n Heading,\n} from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport { parseDate, today, getLocalTimeZone } from \"https://esm.sh/@internationalized/date@3.12.0\";\nimport type { DateRangePickerConfig, DateRangeValue } from \"../../shared/types.ts\";\n\nexport interface DateRangePickerProps extends DateRangePickerConfig {\n onChange?: (value: DateRangeValue | null) => void;\n}\n\nfunction toRangeValue(\n v: DateRangeValue | null | undefined\n): { start: ReturnType; end: ReturnType } | null {\n if (!v?.start || !v?.end) return null;\n try {\n return { start: parseDate(v.start), end: parseDate(v.end) };\n } catch {\n return null;\n }\n}\n\nfunction fromRangeValue(\n v: { start: { toString: () => string }; end: { toString: () => string } } | null\n): DateRangeValue | null {\n if (!v) return null;\n return { start: v.start.toString(), end: v.end.toString() };\n}\n\nfunction getInitialFocusedDate(\n range:\n | { start: ReturnType; end: ReturnType }\n | null,\n placeholder: ReturnType | undefined,\n minVal: ReturnType | undefined,\n maxVal: ReturnType | undefined\n): ReturnType {\n if (range?.start) return range.start;\n if (placeholder) return placeholder;\n if (minVal) return minVal;\n if (maxVal) return maxVal;\n return today(getLocalTimeZone()) as ReturnType;\n}\n\nfunction isSameCalendarDate(\n left: ReturnType,\n right: ReturnType\n): boolean {\n return left.compare(right) === 0;\n}\n\nexport function DateRangePicker({\n id,\n label = null,\n value = null,\n minValue = null,\n maxValue = null,\n placeholderValue = null,\n width = null,\n disabled = false,\n isRequired = false,\n granularity = \"day\",\n shouldCloseOnSelect = true,\n firstDayOfWeek = \"sun\",\n startName = null,\n endName = null,\n onChange,\n}: DateRangePickerProps): ReactElement {\n const rangeValue = toRangeValue(value);\n const minVal = minValue ? parseDate(minValue) : undefined;\n const maxVal = maxValue ? parseDate(maxValue) : undefined;\n const placeholderVal = placeholderValue ? parseDate(placeholderValue) : undefined;\n const [focusedDate, setFocusedDate] = useState>(\n () => getInitialFocusedDate(rangeValue, placeholderVal, minVal, maxVal)\n );\n const [showYearList, setShowYearList] = useState(false);\n\n useEffect(() => {\n const nextFocus = getInitialFocusedDate(rangeValue, placeholderVal, minVal, maxVal);\n setFocusedDate((prev) =>\n isSameCalendarDate(prev, nextFocus) ? prev : nextFocus\n );\n }, [value?.start, value?.end, placeholderValue, minValue, maxValue]);\n\n const yearOptions = useMemo(() => {\n const currentYear = focusedDate.year;\n const minYear = minVal?.year ?? currentYear - 100;\n const maxYear = maxVal?.year ?? currentYear + 20;\n const start = Math.min(minYear, currentYear);\n const end = Math.max(maxYear, currentYear);\n const years: number[] = [];\n for (let year = end; year >= start; year--) {\n years.push(year);\n }\n return years;\n }, [focusedDate.year, minVal?.year, maxVal?.year]);\n\n const selectYear = (year: number) => {\n let next = focusedDate.set({ year }) as ReturnType;\n if (minVal && next.compare(minVal) < 0) {\n next = minVal;\n }\n if (maxVal && next.compare(maxVal) > 0) {\n next = maxVal;\n }\n setFocusedDate(next);\n setShowYearList(false);\n };\n\n return (\n \n onChange?.(fromRangeValue(v))}\n minValue={minVal}\n maxValue={maxVal}\n placeholderValue={placeholderVal}\n isDisabled={disabled}\n isRequired={isRequired}\n granularity={granularity}\n shouldCloseOnSelect={shouldCloseOnSelect}\n firstDayOfWeek={firstDayOfWeek}\n startName={startName ?? undefined}\n endName={endName ?? undefined}\n aria-label={label ?? undefined}\n aria-labelledby={label ? `${id}-label` : undefined}\n >\n {label != null && label !== \"\" ? (\n \n {label}\n \n ) : null}\n \n

\n \n {(segment) => }\n \n –\n \n {(segment) => }\n \n

\n \n \n \n \n \n \n \n );\n}\n",[],[192,199,251],{"_109":259,"_100":260,"_164":261,"_166":200,"_167":149,"_168":262,"_170":171,"_111":263,"_105":33,"_173":185,"_175":264,"_176":22,"_177":-5,"_178":265,"_103":266},"6f8705e0-350a-11f1-8390-42b51c65c3df","NumberField.tsx","6f8706a8-350a-11f1-8390-42b51c65c3df",14,["D",1775845436183],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/**\n * React NumberField widget. Numeric input with optional stepper buttons.\n * Uses react-aria NumberField, Group, Input, Button.\n * @see https://react-aria.adobe.com/NumberField\n */\n\nimport type { ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport {\n NumberField as AriaNumberField,\n Label,\n Group,\n Input,\n Button,\n} from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { NumberFieldConfig } from \"../../shared/types.ts\";\n\nexport interface NumberFieldProps extends NumberFieldConfig {\n onChange?: (value: number) => void;\n}\n\nfunction buildFormatOptions(\n minFractionDigits: number | null | undefined,\n maxFractionDigits: number | null | undefined\n): Intl.NumberFormatOptions | undefined {\n if (\n minFractionDigits == null &&\n maxFractionDigits == null\n ) {\n return undefined;\n }\n const opts: Intl.NumberFormatOptions = {};\n if (minFractionDigits != null) opts.minimumFractionDigits = minFractionDigits;\n if (maxFractionDigits != null) opts.maximumFractionDigits = maxFractionDigits;\n return opts;\n}\n\nexport function NumberField({\n id,\n label = null,\n value = 0,\n placeholder = null,\n minValue = null,\n maxValue = null,\n step = null,\n minFractionDigits = null,\n maxFractionDigits = null,\n width = null,\n disabled = false,\n isReadOnly = false,\n isRequired = false,\n showStepper = true,\n isWheelDisabled = false,\n onChange,\n}: NumberFieldProps): ReactElement {\n const formatOptions = buildFormatOptions(minFractionDigits, maxFractionDigits);\n\n const containerStyle: CSSProperties =\n width != null ? { width } : {};\n\n const decrementDisabled =\n disabled ||\n (minValue != null && value <= minValue);\n\n const incrementDisabled =\n disabled ||\n (maxValue != null && value >= maxValue);\n\n return (\n \n onChange?.(v)}\n minValue={minValue ?? undefined}\n maxValue={maxValue ?? undefined}\n step={step ?? undefined}\n formatOptions={formatOptions}\n isDisabled={disabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isWheelDisabled={isWheelDisabled}\n aria-label={label ?? undefined}\n aria-labelledby={label ? `${id}-label` : undefined}\n className=\"dswidgets-numberfield-aria\"\n >\n {label != null && label !== \"\" ? (\n \n {label}\n \n ) : null}\n \n {showStepper ? (\n \n −\n \n ) : null}\n \n {showStepper ? (\n \n +\n \n ) : null}\n \n \n \n );\n}\n",[],[192,199,260],{"_109":268,"_100":269,"_164":270,"_166":200,"_167":149,"_168":271,"_170":171,"_111":272,"_105":33,"_173":185,"_175":273,"_176":22,"_177":-5,"_178":274,"_103":275},"6f6ec08e-350a-11f1-9f80-42b51c65c3df","Radio.tsx","6f6ec160-350a-11f1-9f80-42b51c65c3df",10,["D",1775845436051],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { RadioConfig } from \"../../shared/types.ts\";\n\nexport interface RadioProps extends RadioConfig { onChange?: (value: string) => void; }\n\nconst indicatorStyles: CSSProperties = { width: 18, height: 18, boxSizing: \"border-box\", border: \"2px solid currentColor\", borderRadius: \"50%\", display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", flexShrink: 0 };\nconst dotStyles: CSSProperties = { width: 8, height: 8, borderRadius: \"50%\", backgroundColor: \"currentColor\" };\nconst groupStyles: CSSProperties = { display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" };\nconst itemStyles: CSSProperties = { display: \"inline-flex\", alignItems: \"center\", gap: \"0.5rem\", cursor: \"inherit\" };\n\nexport function Radio({ id, label = \"\", choices = [], selected = \"\", disabled = false, inline = false, width = null, onChange }: RadioProps): ReactElement {\n const containerStyle: CSSProperties = { ...groupStyles, flexDirection: inline ? \"row\" : \"column\", alignItems: inline ? \"center\" : \"stretch\", opacity: disabled ? 0.6 : 1, ...(width != null && { width }) };\n const optionsContainerStyle: CSSProperties = { display: \"flex\", flexDirection: inline ? \"row\" : \"column\", gap: \"0.5rem\", flexWrap: \"nowrap\" };\n return (\n onChange?.(value)} isDisabled={disabled} orientation={inline ? \"horizontal\" : \"vertical\"} aria-labelledby={label ? `${id}-label` : undefined} style={containerStyle}>\n {label && {label}}\n

\n {choices.map((choice) => (\n \n {({ isSelected }) => (<>{isSelected && }{choice.label})}\n \n ))}\n

\n \n );\n}\n",[],[192,199,269],{"_109":277,"_100":278,"_164":279,"_166":200,"_167":149,"_168":280,"_170":171,"_111":281,"_105":33,"_173":185,"_175":282,"_176":22,"_177":-5,"_178":283,"_103":284},"6fcdae32-350a-11f1-80f8-42b51c65c3df","Select.tsx","6fcdaefa-350a-11f1-80f8-42b51c65c3df",22,["D",1775845436638],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/**\n * React Select widget. Single or multiple selection from choices.\n * Uses react-aria Select, ListBox, Popover, Button. Optional TagGroup for multiple + closeButton.\n */\n\nimport type { ComponentProps, ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport {\n Button,\n Label,\n ListBox,\n ListBoxItem,\n Popover,\n Select as AriaSelect,\n SelectValue,\n Tag,\n TagGroup,\n TagList,\n} from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { SelectConfig } from \"../../shared/types.ts\";\n\ninterface SelectItem {\n id: string;\n value: string;\n label: string;\n}\n\nexport interface SelectProps extends SelectConfig {\n onChange?: (value: string | string[] | null) => void;\n}\n\nexport function Select({\n id,\n label = null,\n choices = [],\n selected = null,\n placeholder = \"Select options...\",\n multiple = false,\n maxItems = null,\n minItems = null,\n width = null,\n closeButton = true,\n disabled = false,\n onChange,\n}: SelectProps): ReactElement {\n const items: SelectItem[] = choices.map((c) => ({\n id: c.value,\n value: c.value,\n label: c.label,\n }));\n const selectedValue = selected ?? (multiple ? [] : null);\n const value = multiple\n ? (Array.isArray(selectedValue) ? selectedValue : [])\n : selectedValue != null\n ? String(selectedValue)\n : null;\n\n const handleChange = (v: string | string[] | number | number[] | null) => {\n const normalized =\n v == null\n ? null\n : Array.isArray(v)\n ? v.map(String)\n : String(v);\n if (multiple && Array.isArray(normalized)) {\n if (maxItems != null && normalized.length > maxItems) return;\n if (minItems != null && normalized.length < minItems) return;\n }\n onChange?.(normalized);\n };\n\n const containerStyle: CSSProperties = {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"0.25rem\",\n ...(width != null && { width }),\n opacity: disabled ? 0.6 : 1,\n };\n\n const buttonStyle: CSSProperties = {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: \"0.5rem 0.75rem\",\n border: \"1px solid #ccc\",\n borderRadius: 4,\n minHeight: 36,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n backgroundColor: \"#fff\",\n width: \"100%\",\n textAlign: \"left\",\n gap: \"0.5rem\",\n };\n\n const selectValueStyle: CSSProperties = {\n flex: 1,\n minWidth: 0,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n gap: \"0.375rem\",\n };\n\n const tagGroupStyle: CSSProperties = {\n flex: 1,\n minWidth: 0,\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n gap: \"0.375rem\",\n };\n\n const tagStyle: CSSProperties = {\n padding: \"0.25rem 0.5rem\",\n borderRadius: 4,\n fontSize: 12,\n backgroundColor: \"#e5e7eb\",\n border: \"1px solid #d1d5db\",\n };\n\n const currentValsForDisabled = (\n Array.isArray(value) ? value : value != null ? [value] : []\n ).map(String);\n const atMaxItems =\n multiple &&\n maxItems != null &&\n currentValsForDisabled.length >= maxItems;\n const disabledKeys =\n atMaxItems\n ? items\n .filter((i) => !currentValsForDisabled.includes(i.id))\n .map((i) => i.id)\n : undefined;\n\n return (\n

\n [\"value\"]}\n onChange={handleChange as ComponentProps[\"onChange\"]}\n selectionMode={multiple ? \"multiple\" : \"single\"}\n isDisabled={disabled}\n placeholder={placeholder}\n aria-label={label ?? undefined}\n disabledKeys={disabledKeys}\n style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.25rem\" }}\n >\n {label != null && label !== \"\" ? (\n {label}\n ) : null}\n \n \n (\n

No options

\n )}\n >\n {items.map((item) => (\n \n {item.label}\n \n ))}\n \n \n \n

\n );\n}\n",[],[192,199,278],{"_109":286,"_100":287,"_164":288,"_166":200,"_167":149,"_168":289,"_170":171,"_111":290,"_105":33,"_173":185,"_175":291,"_176":22,"_177":-5,"_178":292,"_103":293},"6f743c8a-350a-11f1-bb36-42b51c65c3df","Slider.tsx","6f743e74-350a-11f1-bb36-42b51c65c3df",11,["D",1775845436050],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/**\n * React Slider widget. Single value within a numeric range.\n * Uses react-aria Slider, SliderTrack, SliderThumb.\n */\n\nimport type { ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport { useState, useCallback, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport {\n Slider as AriaSlider,\n SliderTrack,\n SliderThumb,\n SliderOutput,\n Label,\n} from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { SliderConfig } from \"../../shared/types.ts\";\n\nexport interface SliderProps extends SliderConfig {\n onChange?: (value: number) => void;\n}\n\n/**\n * Parses format string (e.g. \"%.2f\") to extract decimal places.\n * Returns Intl.NumberFormatOptions or undefined.\n */\nfunction parseFormat(\n format: string | null | undefined\n): Intl.NumberFormatOptions | undefined {\n if (!format) return undefined;\n const match = format.match(/%(?:\\.(\\d+))?[fd]/);\n if (match && match[1]) {\n const decimals = parseInt(match[1], 10);\n return {\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n };\n }\n return undefined;\n}\n\nexport function Slider({\n id,\n label = null,\n min = 0,\n max = 100,\n value: controlledValue = 50,\n step = null,\n round = false,\n format = null,\n ticks = true,\n animate = false,\n width = null,\n disabled = false,\n onChange,\n}: SliderProps): ReactElement {\n const [internalValue, setInternalValue] = useState(controlledValue);\n const value = controlledValue ?? internalValue;\n const clampedValue = Math.max(min, Math.min(max, value));\n\n const effectiveStep =\n step != null ? step : Math.max(1e-10, (max - min) / 100);\n const formatOptions = parseFormat(format);\n\n const handleChange = useCallback(\n (v: number) => {\n const rounded =\n round ? Math.round(v / effectiveStep) * effectiveStep : v;\n const clamped = Math.max(min, Math.min(max, rounded));\n setInternalValue(clamped);\n onChange?.(clamped);\n },\n [min, max, round, effectiveStep, onChange]\n );\n\n const tickCount = ticks\n ? Math.min(11, Math.floor((max - min) / effectiveStep) + 1)\n : 0;\n const tickValues = Array.from(\n { length: tickCount },\n (_, i) => min + (i / Math.max(1, tickCount - 1)) * (max - min)\n );\n\n const [animating, setAnimating] = useState(false);\n const animRef = useRef | null>(null);\n\n useEffect(() => {\n if (!animate || !animating) return;\n const start = min;\n const end = max;\n const duration = 2000;\n const startTime = performance.now();\n\n const tick = (now: number) => {\n const elapsed = now - startTime;\n const t = Math.min(1, elapsed / duration);\n const eased = t * (2 - t);\n const current = start + (end - start) * eased;\n handleChange(current);\n if (t < 1) {\n animRef.current = requestAnimationFrame(tick);\n } else {\n setAnimating(false);\n }\n };\n animRef.current = requestAnimationFrame(tick);\n return () => {\n if (animRef.current) cancelAnimationFrame(animRef.current);\n };\n }, [animate, animating, min, max, handleChange]);\n\n const containerStyle: CSSProperties = {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"0.25rem\",\n ...(width != null && { width }),\n opacity: disabled ? 0.6 : 1,\n };\n\n const thumbStyle: CSSProperties = {\n width: 18,\n height: 18,\n borderRadius: \"50%\",\n backgroundColor: \"#fff\",\n border: \"2px solid #3b82f6\",\n boxShadow: \"0 1px 3px rgba(0,0,0,0.2)\",\n cursor: disabled ? \"not-allowed\" : \"grab\",\n };\n\n return (\n

\n {(label != null && label !== \"\") || animate ? (\n \n {label != null && label !== \"\" ? (\n \n {label}\n \n ) : null}\n {animate ? (\n setAnimating((a) => !a)}\n disabled={disabled}\n style={{\n padding: \"0.25rem 0.5rem\",\n fontSize: 12,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n border: \"1px solid #ccc\",\n borderRadius: 4,\n backgroundColor: animating ? \"#e5e7eb\" : \"#fff\",\n }}\n >\n {animating ? \"Stop\" : \"Play\"}\n \n ) : null}\n

\n ) : null}\n \n

\n \n {({ state }) => (\n <>\n \n \n \n \n )}\n \n {ticks && tickValues.length > 0 ? (\n \n {tickValues.map((_, i) => (\n \n ))}\n

\n ) : null}\n \n \n \n \n );\n}\n",[],[192,199,287],{"_109":295,"_100":296,"_164":297,"_166":200,"_167":149,"_168":298,"_170":171,"_111":299,"_105":33,"_173":185,"_175":300,"_176":22,"_177":-5,"_178":301,"_103":302},"6f8f4110-350a-11f1-80f8-42b51c65c3df","Switch.tsx","6f8f41c4-350a-11f1-80f8-42b51c65c3df",15,["D",1775845436267],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport { Checkbox } from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { SwitchConfig } from \"../../shared/types.ts\";\n\nexport interface SwitchProps extends SwitchConfig { onChange?: (value: boolean) => void; }\n\nconst statusColors: Record = { success: \"#22c55e\", danger: \"#ef4444\", warning: \"#f59e0b\", primary: \"#3b82f6\" };\nconst sizes = { default: { track: 44, thumb: 18, fontSize: 12 }, small: { track: 36, thumb: 14, fontSize: 11 }, large: { track: 52, thumb: 22, fontSize: 14 } };\n\nexport function Switch({ id, label = \"\", value = false, disabled = false, onLabel = \"ON\", offLabel = \"OFF\", onStatus = \"success\", offStatus = \"danger\", size = \"default\", width = null, onChange }: SwitchProps): ReactElement {\n const sz = sizes[size] ?? sizes.default;\n const onColor = statusColors[onStatus] ?? statusColors.success;\n const offColor = statusColors[offStatus] ?? statusColors.danger;\n const trackHeight = Math.round(sz.track * 0.5);\n const trackStyle: CSSProperties = { width: sz.track, height: trackHeight, borderRadius: sz.track, backgroundColor: value ? onColor : offColor, transition: \"background-color 0.2s\", flexShrink: 0, cursor: disabled ? \"not-allowed\" : \"pointer\", opacity: disabled ? 0.6 : 1, display: \"flex\", alignItems: \"center\", padding: 2, boxSizing: \"border-box\" };\n const thumbStyle: CSSProperties = { width: sz.thumb, height: sz.thumb, borderRadius: \"50%\", backgroundColor: \"#fff\", boxShadow: \"0 1px 3px rgba(0,0,0,0.3)\", marginLeft: value ? \"auto\" : 0, transition: \"margin 0.2s\" };\n const containerStyle: CSSProperties = { display: \"inline-flex\", alignItems: \"center\", gap: \"0.5rem\", ...(width != null && { width }) };\n return (\n

\n {label ? {label} : null}\n onChange?.(v)} aria-labelledby={label ? `${id}-label` : undefined} style={{ display: \"inline-flex\", alignItems: \"center\" }}>\n {({ isSelected }) => (<>{isSelected ? onLabel : offLabel})}\n \n

\n );\n}\n",[],[192,199,296],{"_109":304,"_100":305,"_164":306,"_166":200,"_167":149,"_168":307,"_170":171,"_111":308,"_105":33,"_173":185,"_175":309,"_176":22,"_177":-5,"_178":310,"_103":311},"6fbcc39c-350a-11f1-8390-42b51c65c3df","TextArea.tsx","6fbcc45a-350a-11f1-8390-42b51c65c3df",20,["D",1775845436569],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport { TextField as AriaTextField, Label, TextArea as AriaTextArea } from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { TextAreaConfig } from \"../../shared/types.ts\";\n\nexport interface TextAreaProps extends TextAreaConfig { onChange?: (value: string) => void; }\n\nexport function TextArea({ id, label = null, value = \"\", rows = 3, placeholder = null, resize = \"vertical\", width = null, disabled = false, readOnly = false, maxLength = null, minLength = null, cols = null, onChange }: TextAreaProps): ReactElement {\n const containerStyle: CSSProperties = { display: \"flex\", flexDirection: \"column\", gap: \"0.25rem\", ...(width != null && { width }), opacity: disabled ? 0.6 : 1 };\n const textAreaStyle: CSSProperties = { padding: \"0.5rem 0.75rem\", border: \"1px solid #ccc\", borderRadius: 4, fontSize: 14, width: \"100%\", boxSizing: \"border-box\", resize: resize as any, minHeight: \"4.5em\" };\n return (\n

\n onChange?.(v)} isDisabled={disabled} isReadOnly={readOnly} aria-label={label ?? undefined} aria-labelledby={label ? `${id}-label` : undefined} style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.25rem\" }}>\n {label != null && label !== \"\" ? {label} : null}\n \n \n

\n );\n}\n",[],[192,199,305],{"_109":313,"_100":314,"_164":315,"_166":200,"_167":149,"_168":316,"_170":171,"_111":317,"_105":33,"_173":185,"_175":318,"_176":22,"_177":-5,"_178":319,"_103":320},"6fa8a79a-350a-11f1-9f80-42b51c65c3df","TextField.tsx","6fa8a84e-350a-11f1-9f80-42b51c65c3df",17,["D",1775845436278],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport { TextField as AriaTextField, Label, Input } from \"https://esm.sh/react-aria-components@1.15.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { TextFieldConfig } from \"../../shared/types.ts\";\n\nexport interface TextFieldProps extends TextFieldConfig { onChange?: (value: string) => void; }\n\nexport function TextField({ id, label = null, value = \"\", placeholder = null, width = null, disabled = false, inputType = \"text\", onChange }: TextFieldProps): ReactElement {\n const containerStyle: CSSProperties = { display: \"flex\", flexDirection: \"column\", gap: \"0.25rem\", ...(width != null && { width }), opacity: disabled ? 0.6 : 1 };\n const inputStyle: CSSProperties = { padding: \"0.5rem 0.75rem\", border: \"1px solid #ccc\", borderRadius: 4, fontSize: 14, minHeight: 36, width: \"100%\", boxSizing: \"border-box\" };\n return (\n

\n onChange?.(v)} isDisabled={disabled} aria-label={label ?? undefined} aria-labelledby={label ? `${id}-label` : undefined} style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.25rem\" }}>\n {label != null && label !== \"\" ? {label} : null}\n \n \n

\n );\n}\n",[],[192,199,314],{"_109":322,"_100":323,"_164":324,"_166":200,"_167":149,"_168":325,"_170":171,"_111":326,"_105":33,"_173":185,"_175":327,"_176":22,"_177":-5,"_178":328,"_103":329},"6f809322-350a-11f1-92b8-42b51c65c3df","WidgetForm.tsx","6f8093ea-350a-11f1-92b8-42b51c65c3df",13,["D",1775845436177],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/**\n * Renderiza multiples widgets desde un manifest JSON.\n * Mantiene estado (valores por defecto + cambios del usuario) y permite\n * serializar a JSON. Los widgets siguen siendo usables por separado.\n */\n\nimport type { ReactElement, CSSProperties } from \"https://esm.sh/react@18.2.0\";\nimport { useState, useMemo, useCallback, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createPortal } from \"https://esm.sh/react-dom@18.2.0?deps=react@18.2.0\";\nimport { Checkbox } from \"./Checkbox.tsx\";\nimport { Radio } from \"./Radio.tsx\";\nimport { Switch } from \"./Switch.tsx\";\nimport { CheckboxGroup } from \"./CheckboxGroup.tsx\";\nimport { Select } from \"./Select.tsx\";\nimport { Slider } from \"./Slider.tsx\";\nimport { TextField } from \"./TextField.tsx\";\nimport { TextArea } from \"./TextArea.tsx\";\nimport { NumberField } from \"./NumberField.tsx\";\nimport { ColorPicker } from \"./ColorPicker.tsx\";\nimport { DatePicker } from \"./DatePicker.tsx\";\nimport { DateRangePicker } from \"./DateRangePicker.tsx\";\nimport { parseManifest, getDefaultValues, toManifestJSON } from \"../../shared/parser.ts\";\nimport type {\n WidgetManifestInput,\n WidgetManifest,\n WidgetValues,\n ExternalValues,\n WidgetConfig,\n ManifestBinding,\n ManifestCondition,\n ManifestRuleScalar,\n CheckboxConfig,\n RadioConfig,\n SwitchConfig,\n CheckboxGroupConfig,\n SelectConfig,\n SliderConfig,\n TextFieldConfig,\n TextAreaConfig,\n NumberFieldConfig,\n ColorPickerConfig,\n DatePickerConfig,\n DateRangePickerConfig,\n} from \"../../shared/types.ts\";\n\nfunction renderTabIcon(icon?: string): ReactElement | null {\n if (icon === \"database\") {\n return (\n \n \n \n \n \n );\n }\n if (icon === \"text\") {\n return (\n \n \n \n \n \n );\n }\n if (icon === \"palette\") {\n return (\n \n \n \n \n \n \n \n );\n }\n return null;\n}\n\nfunction renderExternalToggleIcon(icon?: string): ReactElement | null {\n if (icon === \"edit\") {\n return (\n \n \n \n \n );\n }\n return null;\n}\n\nfunction toCssSize(value: number | string | undefined): string | undefined {\n if (value === undefined) {\n return undefined;\n }\n return typeof value === \"number\" ? `${value}px` : value;\n}\n\nfunction resolvePanelTargetElement(target: string | undefined): HTMLElement | null {\n if (typeof document === \"undefined\" || !target || target.trim().length === 0) {\n return null;\n }\n\n const normalizedTarget = target.trim();\n if (!normalizedTarget) {\n return null;\n }\n\n const byId = document.getElementById(normalizedTarget);\n if (byId) {\n return byId;\n }\n\n try {\n return document.querySelector(normalizedTarget);\n } catch {\n return null;\n }\n}\n\ntype ConditionValue = unknown;\n\nfunction isRuleScalar(value: unknown): value is ManifestRuleScalar {\n return (\n value === null ||\n typeof value === \"boolean\" ||\n typeof value === \"string\" ||\n typeof value === \"number\"\n );\n}\n\nfunction areConditionValuesEqual(left: ConditionValue, right: ConditionValue): boolean {\n if (Array.isArray(left) && Array.isArray(right)) {\n if (left.length !== right.length) {\n return false;\n }\n return left.every((value, index) => value === right[index]);\n }\n return left === right;\n}\n\nfunction resolveConditionFieldValue(\n field: string,\n values: WidgetValues,\n externalValues?: Partial\n):\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined {\n if (Object.prototype.hasOwnProperty.call(values, field)) {\n return values[field];\n }\n return externalValues?.[field];\n}\n\nfunction matchesCondition(\n condition: ManifestCondition,\n values: WidgetValues,\n externalValues?: Partial\n): boolean {\n const current = resolveConditionFieldValue(condition.field, values, externalValues);\n if (condition.op === \"eq\") {\n return areConditionValuesEqual(current, condition.value);\n }\n if (condition.op === \"neq\") {\n return !areConditionValuesEqual(current, condition.value);\n }\n if (condition.op === \"in\") {\n if (!Array.isArray(condition.values)) {\n return false;\n }\n if (Array.isArray(current)) {\n return current.some((value) =>\n isRuleScalar(value) && condition.values!.includes(value)\n );\n }\n if (!isRuleScalar(current)) {\n return false;\n }\n return condition.values.includes(current);\n }\n if (condition.op === \"not_in\") {\n if (!Array.isArray(condition.values)) {\n return false;\n }\n if (Array.isArray(current)) {\n return current.every(\n (value) => !isRuleScalar(value) || !condition.values!.includes(value)\n );\n }\n if (!isRuleScalar(current)) {\n return true;\n }\n return !condition.values.includes(current);\n }\n return false;\n}\n\nfunction resolveBindingValue(\n binding: ManifestBinding,\n values: WidgetValues,\n externalValues?: Partial\n): unknown {\n for (const rule of binding.rules) {\n if (matchesCondition(rule.when, values, externalValues)) {\n return rule.value;\n }\n }\n return binding.default;\n}\n\nfunction resolveWidgetBindings(\n config: WidgetConfig,\n values: WidgetValues,\n externalValues?: Partial\n): WidgetConfig {\n if (!config.bindings) {\n return config;\n }\n const resolved = { ...config } as Record;\n for (const [prop, binding] of Object.entries(config.bindings)) {\n const nextValue = resolveBindingValue(binding, values, externalValues);\n if (nextValue !== undefined) {\n resolved[prop] = nextValue;\n }\n }\n return resolved as unknown as WidgetConfig;\n}\n\nfunction areValuesEqual(\n left:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined,\n right:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined\n): boolean {\n if (Array.isArray(left) && Array.isArray(right)) {\n if (left.length !== right.length) {\n return false;\n }\n return left.every((value, index) => value === right[index]);\n }\n if (\n typeof left === \"object\" &&\n left !== null &&\n typeof right === \"object\" &&\n right !== null\n ) {\n const l = left as { start?: string; end?: string };\n const r = right as { start?: string; end?: string };\n return l.start === r.start && l.end === r.end;\n }\n return left === right;\n}\n\nfunction applyWidgetValueConstraints(\n config: WidgetConfig,\n current:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined\n):\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined {\n if (config.type === \"select\") {\n const c = config as SelectConfig;\n if (c.multiple && Array.isArray(current) && typeof c.maxItems === \"number\") {\n if (c.maxItems >= 0 && current.length > c.maxItems) {\n return current.slice(0, c.maxItems);\n }\n }\n }\n return current;\n}\n\nfunction getEffectiveWidgetValue(\n config: WidgetConfig,\n current:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined\n):\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined {\n if (config.type === \"colorpicker\") {\n const maxColors = (config as ColorPickerConfig).maxColors ?? 0;\n if (Array.isArray(current) && maxColors > 0) {\n return current.slice(0, maxColors);\n }\n }\n return current;\n}\n\nfunction mergeWidgetChangeValue(\n config: WidgetConfig,\n incoming:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null,\n previous:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined\n):\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null {\n if (\n config.type === \"colorpicker\" &&\n Array.isArray(incoming) &&\n Array.isArray(previous)\n ) {\n const maxColors = (config as ColorPickerConfig).maxColors ?? 0;\n if (maxColors > 0) {\n const hiddenTail = previous.slice(maxColors);\n return [...incoming, ...hiddenTail];\n }\n }\n return incoming;\n}\n\nfunction getConstrainedValues(\n manifestData: WidgetManifest,\n currentValues: WidgetValues,\n externalValues?: Partial\n): WidgetValues | null {\n let changed = false;\n const next: WidgetValues = { ...currentValues };\n\n for (const config of manifestData) {\n const resolvedConfig = resolveWidgetBindings(config, next, externalValues);\n const current = next[resolvedConfig.id];\n const constrained = applyWidgetValueConstraints(resolvedConfig, current);\n if (!areValuesEqual(current, constrained)) {\n changed = true;\n if (constrained === undefined) {\n delete next[resolvedConfig.id];\n } else {\n next[resolvedConfig.id] = constrained;\n }\n }\n }\n\n return changed ? next : null;\n}\n\nexport interface WidgetFormProps {\n /** Manifest: JSON string, array de widgets o { widgets: [...] } */\n manifest: string | WidgetManifestInput;\n /** Valores iniciales opcionales (id -> valor). Sobrescribe defaults del manifest. */\n initialValues?: Partial;\n /** Callback cuando cambia cualquier valor. Recibe valores y funcion para serializar a JSON. */\n onChange?: (values: WidgetValues, getManifestJSON: () => string) => void;\n /** Valores externos para condiciones/bindings (campos fuera del manifest). */\n externalValues?: Partial;\n /** Estilo del contenedor */\n style?: CSSProperties;\n}\n\n/**\n * Renderiza widgets desde un manifest JSON.\n * Aplica defaults, mantiene estado y notifica cambios.\n */\nexport function WidgetForm({\n manifest,\n initialValues,\n onChange,\n externalValues,\n style,\n}: WidgetFormProps): ReactElement {\n const parseResult = useMemo(() => parseManifest(manifest), [manifest]);\n const manifestData = useMemo(\n () => (parseResult.valid && parseResult.data ? (parseResult.data as WidgetManifest) : []),\n [parseResult.valid, parseResult.data]\n );\n const parsedSections = useMemo(\n () => (parseResult.valid ? parseResult.sections : undefined),\n [parseResult.sections, parseResult.valid]\n );\n const parsedTabs = useMemo(\n () => (parseResult.valid ? parseResult.tabs : undefined),\n [parseResult.tabs, parseResult.valid]\n );\n const panelConfig = useMemo(\n () => (parseResult.valid ? parseResult.panel : undefined),\n [parseResult.panel, parseResult.valid]\n );\n\n const [values, setValues] = useState(() => {\n if (!parseResult.valid || !parseResult.data) {\n return {};\n }\n const defaults = getDefaultValues(parseResult.data);\n const merged = { ...defaults, ...initialValues };\n return Object.fromEntries(\n Object.entries(merged).filter(\n (v): v is [\n string,\n boolean | string | string[] | number | { start: string; end: string } | null,\n ] => v[1] !== undefined\n )\n ) as WidgetValues;\n });\n const [activeTabId, setActiveTabId] = useState(null);\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n const [panelTargetElement, setPanelTargetElement] = useState(\n null\n );\n\n useEffect(() => {\n if (parseResult.valid && parseResult.data) {\n const defaults = getDefaultValues(parseResult.data);\n setValues((prev) => {\n const merged: WidgetValues = { ...defaults };\n for (const id of Object.keys(prev)) {\n const v = prev[id];\n if (id in merged && v !== undefined) merged[id] = v;\n }\n return merged;\n });\n }\n }, [manifest]);\n\n useEffect(() => {\n if (!panelConfig) {\n setIsPanelOpen(true);\n return;\n }\n setIsPanelOpen(panelConfig.defaultOpen ?? true);\n }, [manifest, panelConfig]);\n\n useEffect(() => {\n if (!panelConfig?.target) {\n setPanelTargetElement(null);\n return;\n }\n setPanelTargetElement(resolvePanelTargetElement(panelConfig.target));\n }, [panelConfig?.target, manifest]);\n\n useEffect(() => {\n if (!parsedTabs || parsedTabs.length === 0) {\n setActiveTabId(null);\n return;\n }\n setActiveTabId((prev) => {\n if (prev && parsedTabs.some((tab) => tab.id === prev)) {\n return prev;\n }\n return parsedTabs[0].id;\n });\n }, [parsedTabs]);\n\n const handleChange = useCallback(\n (\n config: WidgetConfig,\n value:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n ) => {\n setValues((prev) => {\n const mergedValue = mergeWidgetChangeValue(\n config,\n value,\n prev[config.id]\n );\n const next = { ...prev, [config.id]: mergedValue };\n if (onChange && parseResult.valid && parseResult.data) {\n const getManifestJSON = () =>\n toManifestJSON(\n parseResult.data!,\n next,\n parseResult.sections,\n parseResult.tabs,\n parseResult.panel\n );\n onChange(next, getManifestJSON);\n }\n return next;\n });\n },\n [\n onChange,\n parseResult.valid,\n parseResult.data,\n parseResult.sections,\n parseResult.tabs,\n parseResult.panel,\n ]\n );\n\n useEffect(() => {\n if (!parseResult.valid || !parseResult.data) {\n return;\n }\n const constrained = getConstrainedValues(\n manifestData,\n values,\n externalValues\n );\n if (!constrained) {\n return;\n }\n setValues(constrained);\n if (onChange) {\n const getManifestJSON = () =>\n toManifestJSON(\n manifestData,\n constrained,\n parseResult.sections,\n parseResult.tabs,\n parseResult.panel\n );\n onChange(constrained, getManifestJSON);\n }\n }, [\n externalValues,\n manifestData,\n onChange,\n parseResult.data,\n parseResult.valid,\n parseResult.sections,\n parseResult.tabs,\n parseResult.panel,\n values,\n ]);\n\n if (!parseResult.valid || !parseResult.data) {\n const errDetails = parseResult.errors\n ?.map((e) => {\n const sub = (e.errors as Array<{ message?: string }>)?.map((s) => s.message ?? String(s)).join(\", \");\n return sub ? `${e.message} [${sub}]` : e.message;\n })\n .join(\"; \");\n return (\n

\n Invalid manifest: {errDetails ?? \"Unknown error\"}\n

\n );\n }\n\n const renderedWidgets = useMemo(() => {\n return manifestData\n .filter((config) => {\n const resolvedConfig = resolveWidgetBindings(\n config,\n values,\n externalValues\n );\n if (!resolvedConfig.visibility?.when) {\n return true;\n }\n return matchesCondition(\n resolvedConfig.visibility.when,\n values,\n externalValues\n );\n })\n .map((config) => {\n const resolvedConfig = resolveWidgetBindings(\n config,\n values,\n externalValues\n );\n const staticDisabled = (resolvedConfig as { disabled?: unknown }).disabled;\n const staticDisabledValue =\n typeof staticDisabled === \"boolean\" ? staticDisabled : false;\n const conditionDisabled = resolvedConfig.disabledWhen?.when\n ? matchesCondition(\n resolvedConfig.disabledWhen.when,\n values,\n externalValues\n )\n : false;\n return {\n config: resolvedConfig,\n isDisabled: staticDisabledValue || conditionDisabled,\n };\n });\n }, [externalValues, manifestData, values]);\n\n const renderedById = useMemo(\n () => new Map(renderedWidgets.map((entry) => [entry.config.id, entry])),\n [renderedWidgets]\n );\n\n const renderedSections = useMemo(() => {\n if (!parsedSections || parsedSections.length === 0) {\n return [];\n }\n return parsedSections\n .map((section) => {\n const widgets = section.widgets\n .map((widget) => renderedById.get(widget.id))\n .filter(\n (\n item\n ): item is { config: WidgetConfig; isDisabled: boolean } => item !== undefined\n );\n return {\n section,\n widgets,\n };\n })\n .filter((entry) => entry.widgets.length > 0);\n }, [parsedSections, renderedById]);\n\n const renderedTabs = useMemo(() => {\n if (!parsedTabs || parsedTabs.length === 0) {\n return [];\n }\n return parsedTabs.map((tab) => {\n const widgets = tab.widgets\n .map((widget) => renderedById.get(widget.id))\n .filter(\n (\n item\n ): item is { config: WidgetConfig; isDisabled: boolean } => item !== undefined\n );\n const sections = (tab.sections ?? [])\n .map((section) => {\n const sectionWidgets = section.widgets\n .map((widget) => renderedById.get(widget.id))\n .filter(\n (\n item\n ): item is { config: WidgetConfig; isDisabled: boolean } =>\n item !== undefined\n );\n return { section, widgets: sectionWidgets };\n })\n .filter((entry) => entry.widgets.length > 0);\n return { tab, widgets, sections };\n });\n }, [parsedTabs, renderedById]);\n\n const activeTab = useMemo(\n () => renderedTabs.find((entry) => entry.tab.id === activeTabId) ?? renderedTabs[0],\n [activeTabId, renderedTabs]\n );\n const isTabbedLayout = renderedTabs.length > 0 && Boolean(activeTab);\n const showTabHeaderCloseButton = panelConfig\n ? (panelConfig.controls?.showHeaderCloseButton ??\n (panelConfig.variant ?? \"external-toggle\") === \"header-close\")\n : false;\n\n const coreContent = (\n

\n {renderedTabs.length > 0 && activeTab\n ? (\n

\n \n

\n {activeTab.tab.label ?? activeTab.tab.id}\n

\n {showTabHeaderCloseButton ? (\n setIsPanelOpen(false)}\n aria-label=\"Cerrar panel\"\n >\n x\n \n ) : null}\n

\n {activeTab.widgets.map(({ config, isDisabled }) => (\n handleChange(config, v)}\n />\n ))}\n {activeTab.sections.map(({ section, widgets }) => (\n

\n {(section.label || section.description) && (\n

\n {section.label ? (\n

\n {section.label}\n

\n ) : null}\n {section.description ? (\n

\n {section.description}\n

\n ) : null}\n

\n )}\n {widgets.map(({ config, isDisabled }) => (\n handleChange(config, v)}\n />\n ))}\n

\n ))}\n

\n )\n : renderedSections.length > 0\n ? renderedSections.map(({ section, widgets }) => (\n

\n {(section.label || section.description) && (\n

\n {section.label ? (\n

\n {section.label}\n

\n ) : null}\n {section.description ? (\n

\n {section.description}\n

\n ) : null}\n

\n )}\n {widgets.map(({ config, isDisabled }) => (\n handleChange(config, v)}\n />\n ))}\n

\n ))\n : renderedWidgets.map(({ config, isDisabled }) => (\n handleChange(config, v)}\n />\n ))}\n

\n );\n\n if (!panelConfig) {\n return coreContent;\n }\n\n const panelVariant = panelConfig.variant ?? \"external-toggle\";\n const closeBehavior =\n panelConfig.closeBehavior ??\n (panelVariant === \"header-close\" ? \"collapsed-strip\" : \"hide\");\n const showExternalToggleButton =\n panelConfig.controls?.showExternalToggleButton ??\n panelVariant === \"external-toggle\";\n const showHeaderCloseButton =\n panelConfig.controls?.showHeaderCloseButton ??\n panelVariant === \"header-close\";\n const showReopenHandle =\n panelConfig.reopenHandle?.enabled ?? closeBehavior === \"collapsed-strip\";\n const reopenHandleWidth = panelConfig.reopenHandle?.widthPx ?? 18;\n const transitionStyle: CSSProperties = panelConfig.animation?.enabled\n ? {\n transition: `all ${panelConfig.animation?.durationMs ?? 220}ms ${\n panelConfig.animation?.easing ?? \"ease\"\n }`,\n }\n : {};\n const panelWidth = toCssSize(panelConfig.width);\n const externalToggleIcon = panelConfig.controls?.externalToggleIcon;\n const externalToggleLabel =\n panelConfig.controls?.externalToggleLabel ?? \"Edit\";\n const externalToggleIconEl = renderExternalToggleIcon(externalToggleIcon);\n\n const panelContent = isPanelOpen ? (\n \n {!isTabbedLayout && (panelConfig.title || showHeaderCloseButton) && (\n

\n {panelConfig.title ?? \"Panel\"}\n

\n {showHeaderCloseButton ? (\n setIsPanelOpen(false)}\n aria-label=\"Cerrar panel\"\n >\n x\n \n ) : null}\n

\n )}\n \n {coreContent}\n \n \n ) : closeBehavior === \"collapsed-strip\" && showReopenHandle ? (\n setIsPanelOpen(true)}\n aria-label=\"Abrir panel\"\n title={panelConfig.reopenHandle?.label ?? \"Abrir\"}\n >\n {panelConfig.reopenHandle?.label ?? \"Abrir\"}\n \n ) : null;\n\n const localShell = (\n

\n {showExternalToggleButton ? (\n

\n setIsPanelOpen((prev) => !prev)}\n aria-label={isPanelOpen ? \"Cerrar panel\" : \"Abrir panel\"}\n title={externalToggleLabel ?? undefined}\n >\n {externalToggleIconEl ?? (isPanelOpen ? \"Ocultar\" : \"Mostrar\")}\n \n {externalToggleLabel ? (\n \n {externalToggleLabel}\n \n ) : null}\n

\n ) : null}\n {!panelTargetElement ? panelContent : null}\n

\n );\n\n if (!panelTargetElement) {\n return localShell;\n }\n\n return (\n <>\n {localShell}\n {panelContent\n ? createPortal(\n

\n {panelContent}\n

,\n panelTargetElement\n )\n : null}\n \n );\n}\n\ninterface WidgetRendererProps {\n config: WidgetConfig;\n isDisabled: boolean;\n value:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n | undefined;\n onChange: (\n value:\n | boolean\n | string\n | string[]\n | number\n | { start: string; end: string }\n | null\n ) => void;\n}\n\nfunction WidgetRenderer({\n config,\n isDisabled,\n value,\n onChange,\n}: WidgetRendererProps): ReactElement | null {\n if (config.type === \"checkbox\") {\n const c = config as CheckboxConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"radio\") {\n const c = config as RadioConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"switch\") {\n const c = config as SwitchConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"checkboxgroup\") {\n const c = config as CheckboxGroupConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"select\") {\n const c = config as SelectConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"slider\") {\n const c = config as SliderConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"text\") {\n const c = config as TextFieldConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"textarea\") {\n const c = config as TextAreaConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"numberfield\") {\n const c = config as NumberFieldConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"colorpicker\") {\n const c = config as ColorPickerConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"datepicker\") {\n const c = config as DatePickerConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n if (config.type === \"daterangepicker\") {\n const c = config as DateRangePickerConfig;\n return (\n onChange(v)}\n />\n );\n }\n\n return null;\n}\n",[],[192,199,323],[192,199],{"_109":332,"_100":333,"_164":334,"_166":193,"_167":149,"_168":335,"_170":171,"_111":336,"_105":33,"_173":337,"_175":338,"_176":22,"_177":-5,"_178":339,"_103":340},"6f5818b6-350a-11f1-85a9-42b51c65c3df","index.html","6f581956-350a-11f1-85a9-42b51c65c3df",7,["D",1775845435901],"file","\n\n\n \n \n DSWidgets Engine\n \n \n \n\n\n

\n \n\n\n",[],[192,333],{"_109":342,"_100":343,"_164":344,"_166":193,"_167":149,"_168":345,"_170":171,"_111":346,"_105":33,"_173":185,"_175":347,"_176":22,"_177":-5,"_178":348,"_103":349},"6f511912-350a-11f1-8390-42b51c65c3df","index.tsx","6f5119bc-350a-11f1-8390-42b51c65c3df",6,["D",1775845435861],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[192,343],{"_109":351,"_100":352,"_164":353,"_166":193,"_167":149,"_168":354,"_170":171,"_111":355,"_105":33,"_173":337,"_175":356,"_176":22,"_177":-5,"_178":357,"_103":358},"6fc4d654-350a-11f1-86dc-42b51c65c3df","style.css","6fc4d712-350a-11f1-86dc-42b51c65c3df",21,["D",1775845436621],"/* ============ WidgetForm ============ */\n.dswidgets-widgetform-error {\n color: #c00;\n font-family: sans-serif;\n font-size: 14px;\n}\n\n.dswidgets-widgetform {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.dswidgets-widgetform-section {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 0.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n}\n\n.dswidgets-widgetform-section-header {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.dswidgets-widgetform-section-title {\n margin: 0;\n font-size: 0.95rem;\n font-weight: 600;\n color: #111827;\n}\n\n.dswidgets-widgetform-section-description {\n margin: 0;\n font-size: 0.85rem;\n color: #6b7280;\n}\n\n.dswidgets-widgetform-tabs-layout {\n display: flex;\n gap: 0;\n align-items: stretch;\n min-height: 0;\n height: 100%;\n}\n\n.dswidgets-widgetform-tabs-menu {\n width: 38px;\n min-width: 38px;\n border-right: 1px solid #e5e7eb;\n border-radius: 5px 0 0 5px;\n background: #f8f8f9;\n padding: 0.5rem 0.4rem;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n align-self: stretch;\n}\n\n.dswidgets-widgetform-tab-button {\n border: 1px solid transparent;\n border-radius: 6px;\n background: transparent;\n color: #374151;\n text-align: center;\n padding: 0.45rem 0.6rem;\n cursor: pointer;\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dswidgets-widgetform-tab-button--active {\n border-color: #d946a8;\n background-color: #fdf2f8;\n color: #be185d;\n}\n\n.dswidgets-widgetform-tab-panel {\n flex: 1;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n.dswidgets-widgetform-tab-panel-header {\n border-bottom: 1px solid #e5e7eb;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n}\n\n.dswidgets-widgetform-tab-panel-title {\n margin: 0;\n color: #da1c95;\n font-family: \"IBM Plex Sans\", sans-serif;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n}\n\n.dswidgets-widgetform-tab-panel-body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 0.9rem 1rem;\n overflow-y: auto;\n min-height: 0;\n}\n\n.dswidgets-widgetform-panel-shell {\n display: flex;\n align-items: stretch;\n gap: 0.5rem;\n}\n\n.dswidgets-widgetform-panel-card {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border: 1px solid #d1d5db;\n border-radius: 10px;\n background: #fff;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.dswidgets-widgetform-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid #e5e7eb;\n padding: 0.65rem 0.9rem;\n}\n\n.dswidgets-widgetform-panel-title {\n margin: 0;\n font-size: 1.05rem;\n font-weight: 700;\n color: #be185d;\n}\n\n.dswidgets-widgetform-panel-body {\n padding: 0.75rem;\n overflow-y: auto;\n min-height: 0;\n flex: 1;\n}\n\n.dswidgets-widgetform-panel-body--tabbed {\n padding: 0;\n}\n\n.dswidgets-widgetform-panel-button {\n border: 1px solid #d1d5db;\n border-radius: 8px;\n background: #fff;\n color: #374151;\n cursor: pointer;\n padding: 0.45rem 0.65rem;\n font-size: 0.85rem;\n}\n\n.dswidgets-widgetform-panel-reopen-handle {\n padding: 0.35rem 0;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n}\n\n.dswidgets-widgetform-external-toggle-wrap {\n display: flex;\n align-items: center;\n gap: 0.45rem;\n align-self: flex-start;\n}\n\n.dswidgets-widgetform-external-toggle-label {\n font-size: 0.85rem;\n color: #6b7280;\n font-weight: 600;\n}\n\n/* ============ NumberField ============ */\n.dswidgets-numberfield {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.dswidgets-numberfield[data-disabled] {\n opacity: 0.6;\n}\n\n.dswidgets-numberfield-aria {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.dswidgets-numberfield-label {\n font-weight: 500;\n font-size: 14px;\n}\n\n.dswidgets-numberfield-group {\n display: flex;\n align-items: stretch;\n width: 100%;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n overflow: hidden;\n background-color: #fff;\n}\n\n.dswidgets-numberfield-group--no-stepper {\n border: none;\n overflow: visible;\n}\n\n.dswidgets-numberfield-stepper-decrement,\n.dswidgets-numberfield-stepper-increment {\n padding: 0 12px;\n min-width: 36px;\n min-height: 36px;\n border: none;\n background-color: #e5e7eb;\n cursor: pointer;\n font-size: 16px;\n font-weight: 500;\n color: #374151;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dswidgets-numberfield-stepper-decrement:disabled,\n.dswidgets-numberfield-stepper-increment:disabled {\n cursor: not-allowed;\n}\n\n.dswidgets-numberfield-stepper-decrement {\n border-right: 1px solid #d1d5db;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n}\n\n.dswidgets-numberfield-stepper-increment {\n border-left: 1px solid #d1d5db;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.dswidgets-numberfield-input {\n flex: 1;\n min-width: 0;\n padding: 0.5rem 0.75rem;\n font-size: 14px;\n min-height: 36px;\n outline: none;\n background-color: #fff;\n text-align: center;\n box-sizing: border-box;\n}\n\n.dswidgets-numberfield-group .dswidgets-numberfield-input {\n border: none;\n border-left: 1px solid #d1d5db;\n border-right: 1px solid #d1d5db;\n}\n\n.dswidgets-numberfield-input-alone {\n flex: 1;\n min-width: 0;\n padding: 0.5rem 0.75rem;\n font-size: 14px;\n min-height: 36px;\n outline: none;\n background-color: #fff;\n text-align: center;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n box-sizing: border-box;\n}\n\n/* ============ ColorPicker ============ */\n.dswidgets-colorpicker {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n width: var(--dswidgets-colorpicker-width, auto);\n}\n\n.dswidgets-colorpicker-label {\n display: block;\n font-weight: 600;\n font-size: 14px;\n color: #374151;\n margin: 0;\n}\n\n.dswidgets-colorpicker[data-disabled] {\n opacity: 0.6;\n}\n\n.dswidgets-colorpicker-trigger-row {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dswidgets-colorpicker-swatches {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dswidgets-colorpicker-swatch-wrapper {\n position: relative;\n display: inline-flex;\n}\n\n.dswidgets-colorpicker .dswidgets-colorpicker-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: transparent;\n cursor: pointer;\n width: 32px;\n height: 32px;\n}\n\n.dswidgets-colorpicker .dswidgets-colorpicker-trigger .react-aria-ColorSwatch,\n.dswidgets-colorpicker .dswidgets-colorpicker-swatch {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.dswidgets-colorpicker .dswidgets-colorpicker-trigger:hover {\n opacity: 0.9;\n}\n\n.dswidgets-colorpicker .dswidgets-colorpicker-trigger[data-focus-visible] .react-aria-ColorSwatch,\n.dswidgets-colorpicker .dswidgets-colorpicker-trigger[data-focus-visible] .dswidgets-colorpicker-swatch {\n outline: 2px solid #2563eb;\n outline-offset: 2px;\n}\n\n.dswidgets-colorpicker[data-disabled] .dswidgets-colorpicker-trigger {\n cursor: not-allowed;\n}\n\n.dswidgets-colorpicker-palette-swatch {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.2);\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n transition: transform 0.15s, box-shadow 0.15s;\n}\n\n.dswidgets-colorpicker-palette-swatch:hover:not(:disabled) {\n transform: scale(1.05);\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\n}\n\n.dswidgets-colorpicker-palette-swatch:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.dswidgets-colorpicker-palette-swatch-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px #6b7280;\n}\n\n.dswidgets-colorpicker-add {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 1px solid #ccc;\n background: #fff;\n color: #666;\n font-size: 18px;\n line-height: 1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n transition: background-color 0.15s, color 0.15s;\n}\n\n.dswidgets-colorpicker-add:hover:not(:disabled) {\n background-color: #f0f0f0;\n color: #333;\n}\n\n.dswidgets-colorpicker-add:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.dswidgets-colorpicker-popover {\n padding: 12px;\n background-color: #fff;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n z-index: 100000;\n max-height: min(400px, calc(100vh - 100px));\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.dswidgets-colorpicker-dialog {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-width: 220px;\n}\n\n.dswidgets-colorpicker-main {\n display: flex;\n gap: 12px;\n align-items: stretch;\n}\n\n.dswidgets-colorpicker-area {\n width: 160px;\n height: 140px;\n border-radius: 6px;\n overflow: hidden;\n flex-shrink: 0;\n forced-color-adjust: none;\n}\n\n.dswidgets-colorpicker-area .react-aria-ColorThumb {\n width: 10px;\n height: 10px;\n border-radius: 10px;\n border: 2px solid #e6eaed;\n background: transparent;\n}\n\n.dswidgets-colorpicker-slider {\n width: 24px;\n height: 140px;\n flex-shrink: 0;\n forced-color-adjust: none;\n}\n\n.dswidgets-colorpicker-slider .react-aria-SliderTrack {\n width: 100%;\n height: 100%;\n border-radius: 6px;\n}\n\n.dswidgets-colorpicker-slider .react-aria-ColorThumb {\n cursor: pointer;\n width: 100%;\n height: 8px;\n border: 2px solid #e6eaed;\n background: none;\n opacity: 1;\n border-radius: 2px;\n left: 0 !important;\n box-sizing: border-box;\n transform: none !important;\n}\n\n.dswidgets-colorpicker-slider[data-orientation=\"vertical\"] {\n width: 24px;\n height: 140px;\n}\n\n.dswidgets-colorpicker-brightness-slider {\n width: 24px;\n height: 140px;\n}\n\n.dswidgets-colorpicker-preview {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dswidgets-colorpicker-preview-compare {\n display: flex;\n width: 48px;\n height: 24px;\n border-radius: 6px;\n overflow: hidden;\n border: 1px solid #d1d5db;\n flex-shrink: 0;\n}\n\n.dswidgets-colorpicker-preview-half {\n flex: 1;\n min-width: 0;\n}\n\n.dswidgets-colorpicker-preview-previous {\n border-right: 1px solid #d1d5db;\n}\n\n.dswidgets-colorpicker-swatch-sm {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n flex-shrink: 0;\n}\n\n.dswidgets-colorpicker-field {\n flex: 1;\n min-width: 0;\n display: flex;\n}\n\n.dswidgets-colorpicker-hex-input,\n.dswidgets-colorpicker-field .react-aria-Input,\n.dswidgets-colorpicker-field input {\n padding: 6px 10px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n font-size: 14px;\n font-family: monospace;\n width: 100%;\n min-width: 0;\n background-color: #f3f4f6;\n color: #374151;\n box-sizing: border-box;\n}\n\n.dswidgets-colorpicker-hex-input:focus,\n.dswidgets-colorpicker-field .react-aria-Input:focus,\n.dswidgets-colorpicker-field input:focus {\n outline: none;\n border-color: #2563eb;\n background-color: #fff;\n}\n\n.dswidgets-colorpicker-presets {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.dswidgets-colorpicker-presets .react-aria-ColorSwatchPickerItem {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n cursor: pointer;\n overflow: hidden;\n forced-color-adjust: none;\n}\n\n.dswidgets-colorpicker-presets .react-aria-ColorSwatchPickerItem .react-aria-ColorSwatch {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n border: none;\n}\n\n.dswidgets-colorpicker-presets .react-aria-ColorSwatchPickerItem[data-selected]::after {\n border-radius: 4px;\n}\n\n.dswidgets-colorpicker-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n flex-wrap: wrap;\n}\n\n.dswidgets-colorpicker-btn {\n padding: 6px 12px;\n font-size: 13px;\n border-radius: 4px;\n cursor: pointer;\n border: 1px solid #ccc;\n background: #fff;\n transition: background-color 0.15s;\n}\n\n.dswidgets-colorpicker-btn:hover {\n background-color: #f0f0f0;\n}\n\n.dswidgets-colorpicker-btn-choose {\n color: #fff;\n}\n\n.dswidgets-colorpicker-btn-choose:hover {\n filter: brightness(0.95);\n}\n\n.dswidgets-colorpicker-btn-delete {\n width: 32px;\n height: 32px;\n padding: 0;\n border-radius: 50%;\n color: #6b7280;\n border-color: #d1d5db;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dswidgets-colorpicker-btn-delete:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.dswidgets-colorpicker-btn-add {\n width: 32px;\n height: 32px;\n padding: 0;\n border-radius: 50%;\n font-size: 18px;\n line-height: 1;\n}\n\n/* ============ DatePicker ============ */\n.dswidgets-datepicker {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: var(--dswidgets-datepicker-width, auto);\n}\n\n.dswidgets-datepicker[data-disabled] {\n opacity: 0.6;\n}\n\n.dswidgets-datepicker .dswidgets-datepicker-label {\n font-weight: 500;\n font-size: 14px;\n}\n\n.dswidgets-datepicker .react-aria-Group {\n display: flex;\n align-items: center;\n min-width: 180px;\n padding: 0.5rem 0.75rem;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 14px;\n background-color: #fff;\n gap: 4px;\n width: fit-content;\n max-width: 100%;\n white-space: nowrap;\n cursor: text;\n position: relative;\n overflow: clip;\n}\n\n.dswidgets-datepicker .date-field {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n scrollbar-width: none;\n overflow: auto clip;\n}\n\n.dswidgets-datepicker .date-field .react-aria-DateInput {\n flex: 1;\n min-width: 0;\n}\n\n.dswidgets-datepicker-trigger {\n padding: 4px;\n border: none;\n background: none;\n cursor: pointer;\n}\n\n.dswidgets-datepicker[data-disabled] .dswidgets-datepicker-trigger {\n cursor: not-allowed;\n}\n\n.dswidgets-datepicker-popover {\n padding: 8px;\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.dswidgets-datepicker-calendar {\n width: fit-content;\n}\n\n.dswidgets-datepicker-calendar header {\n display: flex;\n align-items: center;\n margin: 0 4px 12px 4px;\n gap: 4px;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-heading {\n flex: 1;\n margin: 0;\n text-align: center;\n font-size: 15px;\n font-weight: 600;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-heading-wrap {\n position: relative;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-year-btn {\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #fff;\n color: #374151;\n font-size: 12px;\n line-height: 1;\n padding: 4px 8px;\n cursor: pointer;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-year-btn:hover {\n background: #f9fafb;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-year-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n gap: 2px;\n max-height: 180px;\n overflow-y: auto;\n min-width: 84px;\n padding: 4px;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n z-index: 20;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-year-item {\n border: none;\n border-radius: 6px;\n background: transparent;\n color: #374151;\n font-size: 12px;\n padding: 4px 8px;\n text-align: center;\n cursor: pointer;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-year-item:hover {\n background: #f3f4f6;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-year-item[data-selected] {\n background: #2563eb;\n color: #fff;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-nav-btn {\n padding: 4px;\n border: none;\n background: none;\n border-radius: 4px;\n cursor: pointer;\n color: #6b7280;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-nav-btn:hover {\n background-color: #f3f4f6;\n color: #374151;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-nav-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.dswidgets-datepicker-calendar table {\n border-collapse: collapse;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-grid td {\n padding: 2px;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-grid th {\n padding: 4px 6px;\n font-size: 12px;\n font-weight: 500;\n color: #6b7280;\n text-align: center;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-cell {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n border-radius: 9999px;\n font-size: 14px;\n cursor: pointer;\n transition: background-color 0.15s, color 0.15s;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-cell:hover {\n background-color: #f3f4f6;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-cell[data-outside-month] {\n color: #9ca3af;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-cell[data-disabled] {\n color: #d1d5db;\n cursor: not-allowed;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-cell[data-today] {\n font-weight: 600;\n color: #2563eb;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-cell[data-selected] {\n background-color: #2563eb;\n color: #fff;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-cell[data-focus-visible] {\n outline: 2px solid #2563eb;\n outline-offset: 2px;\n}\n\n.dswidgets-datepicker-calendar .dswidgets-calendar-cell[data-pressed] {\n transform: scale(0.95);\n}\n\n/* ============ DateRangePicker ============ */\n.dswidgets-daterangepicker {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n width: var(--dswidgets-daterangepicker-width, auto);\n}\n\n.dswidgets-daterangepicker[data-disabled] {\n opacity: 0.6;\n}\n\n.dswidgets-daterangepicker .dswidgets-daterangepicker-label {\n font-weight: 500;\n font-size: 14px;\n}\n\n.dswidgets-daterangepicker .react-aria-Group {\n display: flex;\n align-items: center;\n min-width: 220px;\n padding: 0.5rem 0.75rem;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 14px;\n background-color: #fff;\n gap: 4px;\n width: fit-content;\n max-width: 100%;\n white-space: nowrap;\n cursor: text;\n position: relative;\n overflow: clip;\n}\n\n.dswidgets-daterangepicker .date-fields {\n scrollbar-width: none;\n flex: 1;\n align-items: center;\n width: fit-content;\n display: flex;\n overflow: auto clip;\n}\n\n.react-aria-DateRangePicker [slot=\"start\"] ~ span {\n padding: 0 4px;\n}\n\n.dswidgets-daterangepicker .date-fields span[aria-hidden] {\n color: #6b7280;\n}\n\n.dswidgets-daterangepicker-trigger {\n padding: 4px;\n border: none;\n background: none;\n cursor: pointer;\n}\n\n.dswidgets-daterangepicker[data-disabled] .dswidgets-daterangepicker-trigger {\n cursor: not-allowed;\n}\n\n.dswidgets-daterangepicker-popover {\n padding: 8px;\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.dswidgets-daterangepicker-calendar {\n width: fit-content;\n}\n\n.dswidgets-daterangepicker-calendar header {\n display: flex;\n align-items: center;\n margin: 0 4px 12px 4px;\n gap: 4px;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-heading {\n flex: 1;\n margin: 0;\n text-align: center;\n font-size: 15px;\n font-weight: 600;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-heading-wrap {\n position: relative;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-year-btn {\n border: 1px solid #d1d5db;\n border-radius: 6px;\n background: #fff;\n color: #374151;\n font-size: 12px;\n line-height: 1;\n padding: 4px 8px;\n cursor: pointer;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-year-btn:hover {\n background: #f9fafb;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-year-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n gap: 2px;\n max-height: 180px;\n overflow-y: auto;\n min-width: 84px;\n padding: 4px;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n z-index: 20;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-year-item {\n border: none;\n border-radius: 6px;\n background: transparent;\n color: #374151;\n font-size: 12px;\n padding: 4px 8px;\n text-align: center;\n cursor: pointer;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-year-item:hover {\n background: #f3f4f6;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-year-item[data-selected] {\n background: #2563eb;\n color: #fff;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-nav-btn {\n padding: 4px;\n border: none;\n background: none;\n border-radius: 4px;\n cursor: pointer;\n color: #6b7280;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-nav-btn:hover {\n background-color: #f3f4f6;\n color: #374151;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-nav-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.dswidgets-daterangepicker-calendar table {\n border-collapse: collapse;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-grid td {\n padding: 2px;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-grid th {\n padding: 4px 6px;\n font-size: 12px;\n font-weight: 500;\n color: #6b7280;\n text-align: center;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n height: 32px;\n border-radius: 9999px;\n font-size: 14px;\n cursor: pointer;\n transition: background-color 0.15s, color 0.15s;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell:hover {\n background-color: #f3f4f6;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-outside-month] {\n color: #9ca3af;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-disabled] {\n color: #d1d5db;\n cursor: not-allowed;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-today] {\n font-weight: 600;\n color: #2563eb;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-selected],\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-selection-start],\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-selection-end] {\n background-color: #2563eb;\n color: #fff;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-selection-start] {\n border-start-start-radius: 9999px;\n border-end-start-radius: 9999px;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-selection-end] {\n border-end-end-radius: 9999px;\n border-start-end-radius: 9999px;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-focus-visible] {\n outline: 2px solid #2563eb;\n outline-offset: 2px;\n}\n\n.dswidgets-daterangepicker-calendar .dswidgets-calendar-cell[data-pressed] {\n transform: scale(0.95);\n}\n",[],[192,352],[192],{"_109":361,"_100":362,"_164":363,"_166":-5,"_167":149,"_168":364,"_170":171,"_111":365,"_105":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":366,"_103":367},"6f15e72a-350a-11f1-8846-42b51c65c3df","shared","6f15e7e8-350a-11f1-8846-42b51c65c3df",4,["D",1775845435459],[],[362],{"_109":369,"_100":370,"_164":371,"_166":-5,"_167":149,"_168":372,"_170":22,"_111":373,"_105":33,"_173":185,"_175":77,"_176":22,"_177":-5,"_178":374,"_103":375},"6419d09a-34fe-11f1-b9b4-42b51c65c3df","main.ts","6419d14e-34fe-11f1-b9b4-42b51c65c3df",1,["D",1775840263081],[],[370],"files",[161,180,190,197,204,213,222,231,240,249,258,267,276,285,294,303,312,321,331,341,350,360,368],"counts",{"_380":33,"_381":372,"_382":33,"_383":384,"_387":388},"pulls","branches","forks","envVars",{"_385":33,"_386":33},"count","emptyCount","connections",{"_385":33,"_389":33},"unfilledCount","contents",[392,395,398,401,404,407,410,413,416,419,422,425,428,431],{"_109":205,"_100":206,"_164":207,"_166":200,"_167":149,"_168":208,"_170":171,"_111":393,"_105":33,"_173":185,"_175":210,"_176":22,"_177":-5,"_103":394},["D",1775845435955],[192,199,206],{"_109":214,"_100":215,"_164":216,"_166":200,"_167":149,"_168":217,"_170":171,"_111":396,"_105":33,"_173":185,"_175":219,"_176":22,"_177":-5,"_103":397},["D",1775845436462],[192,199,215],{"_109":223,"_100":224,"_164":225,"_166":200,"_167":149,"_168":226,"_170":171,"_111":399,"_105":33,"_173":185,"_175":228,"_176":22,"_177":-5,"_103":400},["D",1775845436318],[192,199,224],{"_109":232,"_100":233,"_164":234,"_166":200,"_167":149,"_168":235,"_170":171,"_111":402,"_105":33,"_173":185,"_175":237,"_176":22,"_177":-5,"_103":403},["D",1775845436470],[192,199,233],{"_109":241,"_100":242,"_164":243,"_166":200,"_167":149,"_168":244,"_170":171,"_111":405,"_105":33,"_173":185,"_175":246,"_176":22,"_177":-5,"_103":406},["D",1775845435911],[192,199,242],{"_109":250,"_100":251,"_164":252,"_166":200,"_167":149,"_168":253,"_170":171,"_111":408,"_105":33,"_173":185,"_175":255,"_176":22,"_177":-5,"_103":409},["D",1775845436120],[192,199,251],{"_109":259,"_100":260,"_164":261,"_166":200,"_167":149,"_168":262,"_170":171,"_111":411,"_105":33,"_173":185,"_175":264,"_176":22,"_177":-5,"_103":412},["D",1775845436183],[192,199,260],{"_109":268,"_100":269,"_164":270,"_166":200,"_167":149,"_168":271,"_170":171,"_111":414,"_105":33,"_173":185,"_175":273,"_176":22,"_177":-5,"_103":415},["D",1775845436051],[192,199,269],{"_109":277,"_100":278,"_164":279,"_166":200,"_167":149,"_168":280,"_170":171,"_111":417,"_105":33,"_173":185,"_175":282,"_176":22,"_177":-5,"_103":418},["D",1775845436638],[192,199,278],{"_109":286,"_100":287,"_164":288,"_166":200,"_167":149,"_168":289,"_170":171,"_111":420,"_105":33,"_173":185,"_175":291,"_176":22,"_177":-5,"_103":421},["D",1775845436050],[192,199,287],{"_109":295,"_100":296,"_164":297,"_166":200,"_167":149,"_168":298,"_170":171,"_111":423,"_105":33,"_173":185,"_175":300,"_176":22,"_177":-5,"_103":424},["D",1775845436267],[192,199,296],{"_109":304,"_100":305,"_164":306,"_166":200,"_167":149,"_168":307,"_170":171,"_111":426,"_105":33,"_173":185,"_175":309,"_176":22,"_177":-5,"_103":427},["D",1775845436569],[192,199,305],{"_109":313,"_100":314,"_164":315,"_166":200,"_167":149,"_168":316,"_170":171,"_111":429,"_105":33,"_173":185,"_175":318,"_176":22,"_177":-5,"_103":430},["D",1775845436278],[192,199,314],{"_109":322,"_100":323,"_164":324,"_166":200,"_167":149,"_168":325,"_170":171,"_111":432,"_105":33,"_173":185,"_175":327,"_176":22,"_177":-5,"_103":433},["D",1775845436177],[192,199,323],{"_109":198,"_167":149,"_164":200,"_100":199,"_175":-5,"_173":174,"_105":33,"_166":193,"_111":435,"_168":201,"_177":-5,"_103":436},["D",1775845435668],[192,199],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_98":99,"_100":101,"_102":46,"_105":106,"_103":104,"_107":445,"_159":450,"_376":543,"_337":544,"_390":547,"_590":-5,"_591":-5,"_592":-5,"_593":-5,"_594":595,"_383":-5},{"_109":110,"_100":101,"_111":446,"_113":-5,"_114":22,"_115":116,"_117":-5,"_118":-5,"_14":119,"_120":-5,"_121":22,"_122":-5,"_123":-5,"_124":33,"_16":125,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":131,"_132":131,"_133":134,"_135":134,"_136":134,"_137":131,"_138":131,"_23":447,"_141":448,"_146":449,"_158":22},["D",1775840263062],{"_98":99,"_140":77},{"_98":99,"_143":77,"_14":-5,"_144":145},{"_105":148,"_100":46,"_109":149,"_150":110,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":101,"_157":99},[451,459,535,539],{"_109":162,"_100":163,"_164":165,"_166":-5,"_167":149,"_168":169,"_170":171,"_111":452,"_105":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":453,"_103":458},["D",1775845435282],[454],{"_109":181,"_100":182,"_164":183,"_166":165,"_167":149,"_168":106,"_170":171,"_111":455,"_105":33,"_173":185,"_175":186,"_176":22,"_177":-5,"_178":456,"_103":457},["D",1775845436731],[],[163,182],[163],{"_109":191,"_100":192,"_164":193,"_166":-5,"_167":149,"_168":194,"_170":171,"_111":460,"_105":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":461,"_103":534},["D",1775845435096],[462,522,526,530],{"_109":198,"_100":199,"_164":200,"_166":193,"_167":149,"_168":201,"_170":171,"_111":463,"_105":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":464,"_103":521},["D",1775845435668],[465,469,473,477,481,485,489,493,497,501,505,509,513,517],{"_109":205,"_100":206,"_164":207,"_166":200,"_167":149,"_168":208,"_170":171,"_111":466,"_105":33,"_173":185,"_175":210,"_176":22,"_177":-5,"_178":467,"_103":468},["D",1775845435955],[],[192,199,206],{"_109":214,"_100":215,"_164":216,"_166":200,"_167":149,"_168":217,"_170":171,"_111":470,"_105":33,"_173":185,"_175":219,"_176":22,"_177":-5,"_178":471,"_103":472},["D",1775845436462],[],[192,199,215],{"_109":223,"_100":224,"_164":225,"_166":200,"_167":149,"_168":226,"_170":171,"_111":474,"_105":33,"_173":185,"_175":228,"_176":22,"_177":-5,"_178":475,"_103":476},["D",1775845436318],[],[192,199,224],{"_109":232,"_100":233,"_164":234,"_166":200,"_167":149,"_168":235,"_170":171,"_111":478,"_105":33,"_173":185,"_175":237,"_176":22,"_177":-5,"_178":479,"_103":480},["D",1775845436470],[],[192,199,233],{"_109":241,"_100":242,"_164":243,"_166":200,"_167":149,"_168":244,"_170":171,"_111":482,"_105":33,"_173":185,"_175":246,"_176":22,"_177":-5,"_178":483,"_103":484},["D",1775845435911],[],[192,199,242],{"_109":250,"_100":251,"_164":252,"_166":200,"_167":149,"_168":253,"_170":171,"_111":486,"_105":33,"_173":185,"_175":255,"_176":22,"_177":-5,"_178":487,"_103":488},["D",1775845436120],[],[192,199,251],{"_109":259,"_100":260,"_164":261,"_166":200,"_167":149,"_168":262,"_170":171,"_111":490,"_105":33,"_173":185,"_175":264,"_176":22,"_177":-5,"_178":491,"_103":492},["D",1775845436183],[],[192,199,260],{"_109":268,"_100":269,"_164":270,"_166":200,"_167":149,"_168":271,"_170":171,"_111":494,"_105":33,"_173":185,"_175":273,"_176":22,"_177":-5,"_178":495,"_103":496},["D",1775845436051],[],[192,199,269],{"_109":277,"_100":278,"_164":279,"_166":200,"_167":149,"_168":280,"_170":171,"_111":498,"_105":33,"_173":185,"_175":282,"_176":22,"_177":-5,"_178":499,"_103":500},["D",1775845436638],[],[192,199,278],{"_109":286,"_100":287,"_164":288,"_166":200,"_167":149,"_168":289,"_170":171,"_111":502,"_105":33,"_173":185,"_175":291,"_176":22,"_177":-5,"_178":503,"_103":504},["D",1775845436050],[],[192,199,287],{"_109":295,"_100":296,"_164":297,"_166":200,"_167":149,"_168":298,"_170":171,"_111":506,"_105":33,"_173":185,"_175":300,"_176":22,"_177":-5,"_178":507,"_103":508},["D",1775845436267],[],[192,199,296],{"_109":304,"_100":305,"_164":306,"_166":200,"_167":149,"_168":307,"_170":171,"_111":510,"_105":33,"_173":185,"_175":309,"_176":22,"_177":-5,"_178":511,"_103":512},["D",1775845436569],[],[192,199,305],{"_109":313,"_100":314,"_164":315,"_166":200,"_167":149,"_168":316,"_170":171,"_111":514,"_105":33,"_173":185,"_175":318,"_176":22,"_177":-5,"_178":515,"_103":516},["D",1775845436278],[],[192,199,314],{"_109":322,"_100":323,"_164":324,"_166":200,"_167":149,"_168":325,"_170":171,"_111":518,"_105":33,"_173":185,"_175":327,"_176":22,"_177":-5,"_178":519,"_103":520},["D",1775845436177],[],[192,199,323],[192,199],{"_109":332,"_100":333,"_164":334,"_166":193,"_167":149,"_168":335,"_170":171,"_111":523,"_105":33,"_173":337,"_175":338,"_176":22,"_177":-5,"_178":524,"_103":525},["D",1775845435901],[],[192,333],{"_109":342,"_100":343,"_164":344,"_166":193,"_167":149,"_168":345,"_170":171,"_111":527,"_105":33,"_173":185,"_175":347,"_176":22,"_177":-5,"_178":528,"_103":529},["D",1775845435861],[],[192,343],{"_109":351,"_100":352,"_164":353,"_166":193,"_167":149,"_168":354,"_170":171,"_111":531,"_105":33,"_173":337,"_175":356,"_176":22,"_177":-5,"_178":532,"_103":533},["D",1775845436621],[],[192,352],[192],{"_109":361,"_100":362,"_164":363,"_166":-5,"_167":149,"_168":364,"_170":171,"_111":536,"_105":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":537,"_103":538},["D",1775845435459],[],[362],{"_109":369,"_100":370,"_164":371,"_166":-5,"_167":149,"_168":372,"_170":22,"_111":540,"_105":33,"_173":185,"_175":77,"_176":22,"_177":-5,"_178":541,"_103":542},["D",1775840263081],[],[370],[451,454,459,462,465,469,473,477,481,485,489,493,497,501,505,509,513,517,522,526,530,535,539],{"_109":198,"_167":149,"_164":200,"_100":199,"_175":-5,"_173":174,"_105":33,"_166":193,"_111":545,"_168":201,"_177":-5,"_103":546},["D",1775845435668],[192,199],[548,551,554,557,560,563,566,569,572,575,578,581,584,587],{"_109":205,"_100":206,"_164":207,"_166":200,"_167":149,"_168":208,"_170":171,"_111":549,"_105":33,"_173":185,"_175":210,"_176":22,"_177":-5,"_103":550},["D",1775845435955],[192,199,206],{"_109":214,"_100":215,"_164":216,"_166":200,"_167":149,"_168":217,"_170":171,"_111":552,"_105":33,"_173":185,"_175":219,"_176":22,"_177":-5,"_103":553},["D",1775845436462],[192,199,215],{"_109":223,"_100":224,"_164":225,"_166":200,"_167":149,"_168":226,"_170":171,"_111":555,"_105":33,"_173":185,"_175":228,"_176":22,"_177":-5,"_103":556},["D",1775845436318],[192,199,224],{"_109":232,"_100":233,"_164":234,"_166":200,"_167":149,"_168":235,"_170":171,"_111":558,"_105":33,"_173":185,"_175":237,"_176":22,"_177":-5,"_103":559},["D",1775845436470],[192,199,233],{"_109":241,"_100":242,"_164":243,"_166":200,"_167":149,"_168":244,"_170":171,"_111":561,"_105":33,"_173":185,"_175":246,"_176":22,"_177":-5,"_103":562},["D",1775845435911],[192,199,242],{"_109":250,"_100":251,"_164":252,"_166":200,"_167":149,"_168":253,"_170":171,"_111":564,"_105":33,"_173":185,"_175":255,"_176":22,"_177":-5,"_103":565},["D",1775845436120],[192,199,251],{"_109":259,"_100":260,"_164":261,"_166":200,"_167":149,"_168":262,"_170":171,"_111":567,"_105":33,"_173":185,"_175":264,"_176":22,"_177":-5,"_103":568},["D",1775845436183],[192,199,260],{"_109":268,"_100":269,"_164":270,"_166":200,"_167":149,"_168":271,"_170":171,"_111":570,"_105":33,"_173":185,"_175":273,"_176":22,"_177":-5,"_103":571},["D",1775845436051],[192,199,269],{"_109":277,"_100":278,"_164":279,"_166":200,"_167":149,"_168":280,"_170":171,"_111":573,"_105":33,"_173":185,"_175":282,"_176":22,"_177":-5,"_103":574},["D",1775845436638],[192,199,278],{"_109":286,"_100":287,"_164":288,"_166":200,"_167":149,"_168":289,"_170":171,"_111":576,"_105":33,"_173":185,"_175":291,"_176":22,"_177":-5,"_103":577},["D",1775845436050],[192,199,287],{"_109":295,"_100":296,"_164":297,"_166":200,"_167":149,"_168":298,"_170":171,"_111":579,"_105":33,"_173":185,"_175":300,"_176":22,"_177":-5,"_103":580},["D",1775845436267],[192,199,296],{"_109":304,"_100":305,"_164":306,"_166":200,"_167":149,"_168":307,"_170":171,"_111":582,"_105":33,"_173":185,"_175":309,"_176":22,"_177":-5,"_103":583},["D",1775845436569],[192,199,305],{"_109":313,"_100":314,"_164":315,"_166":200,"_167":149,"_168":316,"_170":171,"_111":585,"_105":33,"_173":185,"_175":318,"_176":22,"_177":-5,"_103":586},["D",1775845436278],[192,199,314],{"_109":322,"_100":323,"_164":324,"_166":200,"_167":149,"_168":325,"_170":171,"_111":588,"_105":33,"_173":185,"_175":327,"_176":22,"_177":-5,"_103":589},["D",1775845436177],[192,199,323],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

datasketch

dswidgetsengine