@k2b/ui 0.46.0 → 0.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/chat/ChatDecision.js +10 -6
- package/dist/browser/chat/ChatDecision.js.map +1 -1
- package/dist/browser/content/VirtualFeed.js +26 -21
- package/dist/browser/content/VirtualFeed.js.map +1 -1
- package/dist/browser/inputs/Combobox.js +14 -6
- package/dist/browser/inputs/Combobox.js.map +1 -1
- package/dist/browser/layout/AnchoredPopover.js +2 -1
- package/dist/browser/layout/AnchoredPopover.js.map +1 -1
- package/dist/browser/layout/AppWorkspace.js +340 -440
- package/dist/browser/layout/AppWorkspace.js.map +1 -1
- package/dist/browser/layout/AppWorkspaceSidebarItemStatus.js +113 -0
- package/dist/browser/layout/AppWorkspaceSidebarItemStatus.js.map +1 -0
- package/dist/browser/layout/DetailPanel.js +1 -1
- package/dist/browser/layout/DetailPanel.js.map +1 -1
- package/dist/browser/layout/DetailSections.js +236 -132
- package/dist/browser/layout/DetailSections.js.map +1 -1
- package/dist/browser/layout/MobileShell.js +30 -13
- package/dist/browser/layout/MobileShell.js.map +1 -1
- package/dist/browser/layout/detail-sections-messages.js +4 -0
- package/dist/browser/layout/detail-sections-messages.js.map +1 -1
- package/dist/browser/layout/index.js +1 -0
- package/dist/browser/layout/index.js.map +1 -1
- package/dist/ssr/chat/ChatDecision.js +10 -6
- package/dist/ssr/chat/ChatDecision.js.map +1 -1
- package/dist/ssr/content/VirtualFeed.js +26 -21
- package/dist/ssr/content/VirtualFeed.js.map +1 -1
- package/dist/ssr/inputs/Combobox.js +6 -3
- package/dist/ssr/inputs/Combobox.js.map +1 -1
- package/dist/ssr/layout/AnchoredPopover.js +2 -1
- package/dist/ssr/layout/AnchoredPopover.js.map +1 -1
- package/dist/ssr/layout/AppWorkspace.js +61 -127
- package/dist/ssr/layout/AppWorkspace.js.map +1 -1
- package/dist/ssr/layout/AppWorkspaceSidebarItemStatus.js +76 -0
- package/dist/ssr/layout/AppWorkspaceSidebarItemStatus.js.map +1 -0
- package/dist/ssr/layout/DetailPanel.js +1 -1
- package/dist/ssr/layout/DetailPanel.js.map +1 -1
- package/dist/ssr/layout/DetailSections.js +126 -50
- package/dist/ssr/layout/DetailSections.js.map +1 -1
- package/dist/ssr/layout/MobileShell.js +16 -2
- package/dist/ssr/layout/MobileShell.js.map +1 -1
- package/dist/ssr/layout/detail-sections-messages.js +4 -0
- package/dist/ssr/layout/detail-sections-messages.js.map +1 -1
- package/dist/ssr/layout/index.js +1 -0
- package/dist/ssr/layout/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/chat/ChatDecision.d.ts +5 -0
- package/dist/types/inputs/Combobox.d.ts +2 -0
- package/dist/types/layout/AppWorkspace.d.ts +2 -28
- package/dist/types/layout/AppWorkspaceSidebarItemStatus.d.ts +30 -0
- package/dist/types/layout/DetailSections.d.ts +32 -2
- package/dist/types/layout/MobileShell.d.ts +12 -0
- package/dist/types/layout/detail-sections-messages.d.ts +2 -0
- package/dist/types/layout/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["layout/AnchoredPopover.tsx"],"sourcesContent":["import { createEffect, createSignal, type JSX, onCleanup, onMount, Show, untrack } from \"solid-js\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\n\nexport type AnchoredPopoverProps = {\n /** The control the panel belongs to. The panel is open while this is set. */\n anchor: HTMLElement | null | undefined;\n /** Called on Escape, a click outside, another press of the anchor, and when the anchor leaves the page. */\n onClose: () => void;\n /** The panel's accessible name; it is a non-modal dialog. */\n label: string;\n children: JSX.Element;\n /** Which edge lines up with the anchor. Defaults to `end`, like a menu at the end of a toolbar. */\n align?: \"start\" | \"end\";\n /** The side tried first; the panel flips only when the other side has more room. Defaults to `below`. */\n side?: \"below\" | \"above\";\n /**\n * The tallest the panel gets while open, in px, such as a list it can switch to. The side is chosen for this height\n * and kept, so a panel that grows never flips. Defaults to its height when it opens.\n */\n plannedHeight?: number;\n /** Width of the panel on wide screens, such as `21rem`. On a phone it is a bottom sheet across the screen. */\n width?: string;\n /**\n * `false` keeps a small notice beside its control on a phone too, inside the screen with a margin, instead of a\n * bottom sheet that would cover the control. Defaults to `true`.\n */\n sheet?: boolean;\n /** Moves the focus into the panel when it opens; defaults to the panel itself. */\n initialFocus?: () => HTMLElement | null | undefined;\n class?: string;\n};\n\nconst GAP = 6;\nconst MARGIN = 8;\nconst sheetQuery = \"(max-width: 47.999rem)\";\n\n/**\n * A panel anchored to a control, for content that is more than a menu, such as a card with a slider. It opens on the\n * side with room and keeps that side while open, so a panel that changes its content never jumps to the other side.\n * Escape, a click outside and another press of the anchor close it; the focus returns to where it was. On a phone it\n * is a bottom sheet.\n */\nexport function AnchoredPopover(props: AnchoredPopoverProps): JSX.Element {\n let surface: HTMLDivElement | undefined;\n let previous: HTMLElement | null = null;\n let ring = false;\n let pressedAnchor: HTMLElement | undefined;\n /** The side chosen when the panel opened; kept until it closes. */\n let openedAbove: boolean | undefined;\n const [shown, setShown] = createSignal<HTMLElement>();\n const [sheet, setSheet] = createSignal(false);\n\n const place = () => {\n const anchor = shown();\n if (!surface || !anchor) return;\n if (!anchor.isConnected) {\n hide();\n props.onClose();\n return;\n }\n if (sheet()) {\n surface.style.left = \"\";\n surface.style.top = \"\";\n return;\n }\n const viewport = window.visualViewport;\n const view = {\n top: (viewport?.offsetTop ?? 0) + MARGIN,\n bottom: (viewport ? viewport.offsetTop + viewport.height : window.innerHeight) - MARGIN,\n left: (viewport?.offsetLeft ?? 0) + MARGIN,\n right: (viewport ? viewport.offsetLeft + viewport.width : window.innerWidth) - MARGIN,\n };\n const box = anchor.getBoundingClientRect();\n const size = surface.getBoundingClientRect();\n const roomAbove = box.top - GAP - view.top;\n const roomBelow = view.bottom - box.bottom - GAP;\n if (openedAbove === undefined) {\n const planned = Math.max(size.height, props.plannedHeight ?? 0);\n openedAbove =\n (props.side ?? \"below\") === \"above\" ? planned <= roomAbove || roomAbove > roomBelow : planned > roomBelow && roomAbove > roomBelow;\n }\n surface.style.setProperty(\"--k2b-anchored-popover-room\", `${Math.round(Math.max(120, openedAbove ? roomAbove : roomBelow))}px`);\n const top = openedAbove ? box.top - GAP - size.height : box.bottom + GAP;\n const left = (props.align ?? \"end\") === \"end\" ? box.right - size.width : box.left;\n surface.style.left = `${Math.round(Math.max(view.left, Math.min(left, view.right - size.width)))}px`;\n surface.style.top = `${Math.round(Math.max(view.top, Math.min(top, view.bottom - size.height)))}px`;\n };\n\n const restoreFocus = () => {\n const focused = document.activeElement;\n if (focused && focused !== document.body && !surface?.contains(focused)) return;\n if (previous?.isConnected) returnFocus(previous, ring);\n };\n\n const hide = () => {\n restoreFocus();\n if (surface?.matches(\":popover-open\")) surface.hidePopover();\n openedAbove = undefined;\n setShown(undefined);\n };\n\n const pressed = (event: PointerEvent) => {\n const anchor = shown();\n pressedAnchor = anchor && event.target instanceof Node && anchor.contains(event.target) ? anchor : undefined;\n };\n const clicked = (event: MouseEvent) => {\n const anchor = shown();\n if (!anchor || !(event.target instanceof Node) || !anchor.contains(event.target)) return;\n pressedAnchor = anchor;\n hide();\n props.onClose();\n };\n\n createEffect(() => {\n const anchor = props.anchor ?? undefined;\n untrack(() => {\n if (!anchor) {\n if (shown()) hide();\n return;\n }\n if (anchor === pressedAnchor) {\n pressedAnchor = undefined;\n props.onClose();\n return;\n }\n if (shown() === anchor || !surface) return;\n if (!shown()) {\n previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n ring = ringOnReturn(previous ?? anchor);\n }\n setSheet(props.sheet !== false && typeof matchMedia === \"function\" && matchMedia(sheetQuery).matches);\n setShown(anchor);\n if (!surface.matches(\":popover-open\")) surface.showPopover();\n place();\n queueMicrotask(() => (props.initialFocus?.() ?? surface)?.focus({ preventScroll: true }));\n });\n });\n\n const scrolled = (event: Event) => {\n if (!(event.target instanceof Node && surface?.contains(event.target))) place();\n };\n\n onMount(() => {\n window.addEventListener(\"resize\", place);\n window.addEventListener(\"scroll\", scrolled, true);\n window.visualViewport?.addEventListener(\"resize\", place);\n document.addEventListener(\"pointerdown\", pressed, true);\n document.addEventListener(\"click\", clicked, true);\n const observer = typeof ResizeObserver === \"function\" && surface ? new ResizeObserver(place) : undefined;\n if (surface) observer?.observe(surface);\n onCleanup(() => {\n observer?.disconnect();\n window.removeEventListener(\"resize\", place);\n window.removeEventListener(\"scroll\", scrolled, true);\n window.visualViewport?.removeEventListener(\"resize\", place);\n document.removeEventListener(\"pointerdown\", pressed, true);\n document.removeEventListener(\"click\", clicked, true);\n if (surface?.matches(\":popover-open\")) hide();\n });\n });\n\n return (\n <div\n ref={surface}\n popover=\"auto\"\n role=\"dialog\"\n aria-label={props.label}\n tabIndex={-1}\n class={[\"k2b-anchored-popover\", props.class].filter(Boolean).join(\" \")}\n data-sheet={sheet() ? \"\" : undefined}\n style={props.width ? { \"--k2b-anchored-popover-width\": props.width } : undefined}\n onToggle={(event) => {\n if ((event as ToggleEvent).newState === \"open\") return;\n if (shown()) {\n openedAbove = undefined;\n setShown(undefined);\n restoreFocus();\n props.onClose();\n }\n setTimeout(() => {\n pressedAnchor = undefined;\n });\n }}\n >\n <Show when={shown()}>{props.children}</Show>\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["layout/AnchoredPopover.tsx"],"sourcesContent":["import { createEffect, createSignal, type JSX, onCleanup, onMount, Show, untrack } from \"solid-js\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\n\nexport type AnchoredPopoverProps = {\n /** The control the panel belongs to. The panel is open while this is set. */\n anchor: HTMLElement | null | undefined;\n /** Called on Escape, a click outside, another press of the anchor, and when the anchor leaves the page. */\n onClose: () => void;\n /** The panel's accessible name; it is a non-modal dialog. */\n label: string;\n children: JSX.Element;\n /** Which edge lines up with the anchor. Defaults to `end`, like a menu at the end of a toolbar. */\n align?: \"start\" | \"end\";\n /** The side tried first; the panel flips only when the other side has more room. Defaults to `below`. */\n side?: \"below\" | \"above\";\n /**\n * The tallest the panel gets while open, in px, such as a list it can switch to. The side is chosen for this height\n * and kept, so a panel that grows never flips. Defaults to its height when it opens.\n */\n plannedHeight?: number;\n /** Width of the panel on wide screens, such as `21rem`. On a phone it is a bottom sheet across the screen. */\n width?: string;\n /**\n * `false` keeps a small notice beside its control on a phone too, inside the screen with a margin, instead of a\n * bottom sheet that would cover the control. Defaults to `true`.\n */\n sheet?: boolean;\n /** Moves the focus into the panel when it opens; defaults to the panel itself. */\n initialFocus?: () => HTMLElement | null | undefined;\n class?: string;\n};\n\nconst GAP = 6;\nconst MARGIN = 8;\nconst sheetQuery = \"(max-width: 47.999rem)\";\n\n/**\n * A panel anchored to a control, for content that is more than a menu, such as a card with a slider. It opens on the\n * side with room and keeps that side while open, so a panel that changes its content never jumps to the other side.\n * Escape, a click outside and another press of the anchor close it; the focus returns to where it was. On a phone it\n * is a bottom sheet.\n */\nexport function AnchoredPopover(props: AnchoredPopoverProps): JSX.Element {\n let surface: HTMLDivElement | undefined;\n let previous: HTMLElement | null = null;\n let ring = false;\n let pressedAnchor: HTMLElement | undefined;\n /** The side chosen when the panel opened; kept until it closes. */\n let openedAbove: boolean | undefined;\n const [shown, setShown] = createSignal<HTMLElement>();\n const [sheet, setSheet] = createSignal(false);\n\n const place = () => {\n const anchor = shown();\n if (!surface || !anchor) return;\n if (!anchor.isConnected) {\n hide();\n props.onClose();\n return;\n }\n if (sheet()) {\n surface.style.left = \"\";\n surface.style.top = \"\";\n return;\n }\n const viewport = window.visualViewport;\n const view = {\n top: (viewport?.offsetTop ?? 0) + MARGIN,\n bottom: (viewport ? viewport.offsetTop + viewport.height : window.innerHeight) - MARGIN,\n left: (viewport?.offsetLeft ?? 0) + MARGIN,\n right: (viewport ? viewport.offsetLeft + viewport.width : window.innerWidth) - MARGIN,\n };\n const box = anchor.getBoundingClientRect();\n const size = surface.getBoundingClientRect();\n const roomAbove = box.top - GAP - view.top;\n const roomBelow = view.bottom - box.bottom - GAP;\n if (openedAbove === undefined) {\n const planned = Math.max(size.height, props.plannedHeight ?? 0);\n openedAbove =\n (props.side ?? \"below\") === \"above\" ? planned <= roomAbove || roomAbove > roomBelow : planned > roomBelow && roomAbove > roomBelow;\n }\n surface.style.setProperty(\"--k2b-anchored-popover-room\", `${Math.round(Math.max(120, openedAbove ? roomAbove : roomBelow))}px`);\n const top = openedAbove ? box.top - GAP - size.height : box.bottom + GAP;\n const left = (props.align ?? \"end\") === \"end\" ? box.right - size.width : box.left;\n surface.style.left = `${Math.round(Math.max(view.left, Math.min(left, view.right - size.width)))}px`;\n surface.style.top = `${Math.round(Math.max(view.top, Math.min(top, view.bottom - size.height)))}px`;\n };\n\n const restoreFocus = () => {\n const focused = document.activeElement;\n if (focused && focused !== document.body && !surface?.contains(focused)) return;\n if (previous?.isConnected) returnFocus(previous, ring);\n };\n\n const hide = () => {\n restoreFocus();\n if (surface?.matches(\":popover-open\")) surface.hidePopover();\n openedAbove = undefined;\n setShown(undefined);\n };\n\n const pressed = (event: PointerEvent) => {\n const anchor = shown();\n pressedAnchor = anchor && event.target instanceof Node && anchor.contains(event.target) ? anchor : undefined;\n };\n const clicked = (event: MouseEvent) => {\n const anchor = shown();\n if (!anchor || !(event.target instanceof Node) || !anchor.contains(event.target)) return;\n pressedAnchor = anchor;\n hide();\n props.onClose();\n };\n\n createEffect(() => {\n const anchor = props.anchor ?? undefined;\n untrack(() => {\n if (!anchor) {\n if (shown()) hide();\n return;\n }\n if (anchor === pressedAnchor) {\n pressedAnchor = undefined;\n props.onClose();\n return;\n }\n if (shown() === anchor || !surface) return;\n if (!shown()) {\n previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n ring = ringOnReturn(previous ?? anchor);\n }\n setSheet(props.sheet !== false && typeof matchMedia === \"function\" && matchMedia(sheetQuery).matches);\n setShown(anchor);\n // Without the popover API, as in test DOMs, the panel stays in the flow instead of the top layer.\n if (!surface.matches(\":popover-open\") && typeof surface.showPopover === \"function\") surface.showPopover();\n place();\n queueMicrotask(() => (props.initialFocus?.() ?? surface)?.focus({ preventScroll: true }));\n });\n });\n\n const scrolled = (event: Event) => {\n if (!(event.target instanceof Node && surface?.contains(event.target))) place();\n };\n\n onMount(() => {\n window.addEventListener(\"resize\", place);\n window.addEventListener(\"scroll\", scrolled, true);\n window.visualViewport?.addEventListener(\"resize\", place);\n document.addEventListener(\"pointerdown\", pressed, true);\n document.addEventListener(\"click\", clicked, true);\n const observer = typeof ResizeObserver === \"function\" && surface ? new ResizeObserver(place) : undefined;\n if (surface) observer?.observe(surface);\n onCleanup(() => {\n observer?.disconnect();\n window.removeEventListener(\"resize\", place);\n window.removeEventListener(\"scroll\", scrolled, true);\n window.visualViewport?.removeEventListener(\"resize\", place);\n document.removeEventListener(\"pointerdown\", pressed, true);\n document.removeEventListener(\"click\", clicked, true);\n if (surface?.matches(\":popover-open\")) hide();\n });\n });\n\n return (\n <div\n ref={surface}\n popover=\"auto\"\n role=\"dialog\"\n aria-label={props.label}\n tabIndex={-1}\n class={[\"k2b-anchored-popover\", props.class].filter(Boolean).join(\" \")}\n data-sheet={sheet() ? \"\" : undefined}\n style={props.width ? { \"--k2b-anchored-popover-width\": props.width } : undefined}\n onToggle={(event) => {\n if ((event as ToggleEvent).newState === \"open\") return;\n if (shown()) {\n openedAbove = undefined;\n setShown(undefined);\n restoreFocus();\n props.onClose();\n }\n setTimeout(() => {\n pressedAnchor = undefined;\n });\n }}\n >\n <Show when={shown()}>{props.children}</Show>\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|