@cognite/reveal-components 1.0.0

package/dist/ui/components/commandBased/hooks/useCommandProperty.js

@@ -0,0 +1,20 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/hooks/useCommandProperty.tsx
+function r(r, i) {
+	let [a, o] = n(i), s = e(() => {
+		o(i());
+	}, [r]);
+	return t(() => (s(), r?.addEventListener(s), () => {
+		r?.removeEventListener(s);
+	}), [r, s]), a;
+}
+function i(r, i) {
+	let [a, o] = n(i), s = e(() => {
+		o(i());
+	}, [r]);
+	return t(() => (s(), r.addEventListener(s), () => {
+		r.removeEventListener(s);
+	}), [r, s]), a;
+}
+//#endregion
+export { i as useCommandProperty, r as useNullableCommandProperty };

package/dist/ui/components/commandBased/hooks/useCommandProps.d.ts

@@ -0,0 +1,20 @@
+import { BaseSliderCommand } from '../../../../domains';
+import { BaseCommand } from '../../../../foundation/commands/BaseCommand';
+import { ButtonType, IconName, UniqueId } from '../../../../foundation/utilities/types';
+type CommonCommandProps = {
+    icon: IconName;
+    uniqueId: UniqueId;
+    isVisible: boolean;
+    isEnabled: boolean;
+    isChecked: boolean;
+    buttonType: ButtonType;
+};
+export declare function useCommandProps(command: BaseCommand): CommonCommandProps;
+export declare function useCommandIcon(command: BaseCommand): IconName;
+export declare function useCommandUniqueId(command: BaseCommand): UniqueId;
+export declare function useCommandVisible(command: BaseCommand): boolean;
+export declare function useCommandEnable(command: BaseCommand): boolean;
+export declare function useCommandChecked(command: BaseCommand): boolean;
+export declare function useCommandButtonType(command: BaseCommand): ButtonType;
+export declare function useSliderCommandValue(command: BaseSliderCommand): number;
+export {};

package/dist/ui/components/commandBased/hooks/useCommandProps.js

@@ -0,0 +1,35 @@
+import { useCommandProperty as e } from "./useCommandProperty.js";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/hooks/useCommandProps.tsx
+function t(e) {
+	return {
+		icon: n(e),
+		uniqueId: r(e),
+		isVisible: i(e),
+		isEnabled: a(e),
+		isChecked: o(e),
+		buttonType: s(e)
+	};
+}
+function n(t) {
+	return e(t, () => t.icon);
+}
+function r(t) {
+	return e(t, () => t.uniqueId);
+}
+function i(t) {
+	return e(t, () => t.isVisible);
+}
+function a(t) {
+	return e(t, () => t.isEnabled);
+}
+function o(t) {
+	return e(t, () => t.isChecked);
+}
+function s(t) {
+	return e(t, () => t.buttonType);
+}
+function c(t) {
+	return e(t, () => t.value);
+}
+//#endregion
+export { s as useCommandButtonType, o as useCommandChecked, a as useCommandEnable, n as useCommandIcon, t as useCommandProps, r as useCommandUniqueId, i as useCommandVisible, c as useSliderCommandValue };

package/dist/ui/components/commandBased/hooks/useOnUpdateDomainObject.d.ts

@@ -0,0 +1,2 @@
+import { DomainObject } from '../../../../domains';
+export declare const useOnUpdateDomainObject: (domainObject: DomainObject | undefined, update: () => void) => void;

package/dist/ui/components/commandBased/hooks/useOnUpdateDomainObject.js

@@ -0,0 +1,12 @@
+import { useCallback as e, useEffect as t } from "react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/hooks/useOnUpdateDomainObject.tsx
+var n = (n, r) => {
+	let i = e(r, [n]);
+	t(() => {
+		if (n !== void 0) return i(), n.views.addEventListener(i), () => {
+			n.views.removeEventListener(i);
+		};
+	}, [n, i]);
+};
+//#endregion
+export { n as useOnUpdateDomainObject };

package/dist/ui/components/commandBased/hooks/useSyncLayersState.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from 'react';
+import { LayersUrlStateParam } from '../../../../domains/reveal/utils/layersUrlStateParam';
+export declare const useSyncLayersState: (layersState: LayersUrlStateParam | undefined, setLayersState: Dispatch<SetStateAction<LayersUrlStateParam | undefined>> | undefined) => void;

package/dist/ui/components/commandBased/hooks/useSyncLayersState.js

@@ -0,0 +1,34 @@
+import { useRenderTarget as e } from "../../RevealCanvas/ViewerContext.js";
+import { getRenderTarget as t } from "../../../../foundation/domainObjects/getRoot.js";
+import { Changes as n } from "../../../../foundation/domainObjectsHelpers/Changes.js";
+import { RevealDomainObject as r } from "../../../../domains/reveal/RevealDomainObject.js";
+import { getLayerStateFromViewer as i, updateVisibilityFromURL as a } from "../../../../domains/reveal/utils/updateLayerState.js";
+import { useCallback as o, useEffect as s } from "react";
+import { isEqual as c } from "lodash-es";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/hooks/useSyncLayersState.tsx
+var l = (l, u) => {
+	let d = o((e, a) => {
+		if (u !== void 0 && a.isChanged(n.visibleState) && e instanceof r) {
+			let n = t(e);
+			n !== void 0 && u(i(n));
+		}
+	}, [u]), f = e();
+	s(() => {
+		let { root: e } = f, t = i(f);
+		if (!c(l ?? {}, t) && l !== void 0) {
+			let t = e.views.removeEventListener(d);
+			a(l, f), t && e.views.addEventListener(d);
+		}
+	}, [
+		f,
+		l,
+		d
+	]), s(() => {
+		let { root: e } = f;
+		return e.views.addEventListener(d), () => {
+			e.views.removeEventListener(d);
+		};
+	}, [f, d]);
+};
+//#endregion
+export { l as useSyncLayersState };

package/dist/ui/components/commandBased/index.d.ts

@@ -0,0 +1,11 @@
+export { RevealButtons } from './RevealButtons';
+export type { PlacementType } from './utils/types';
+export { IconFactory } from './Factories/IconFactory';
+export { ToolUI } from './main/ToolUI';
+export { useCommandProperty } from './hooks/useCommandProperty';
+export { PoiInfoPanelContent, PoiList, useFilterPointsOfInterest, usePoiCreateFlowState, usePoiDomainObject, usePointsOfInterest, usePointsOfInterestTool, useSyncSelectedPoi, } from './pointsOfInterest';
+export type { LayersUrlStateParam } from '../../../domains/reveal/utils/layersUrlStateParam';
+export { CadTreeView } from './treeView/CadTreeView/CadTreeView';
+export { useSyncLayersState } from './hooks/useSyncLayersState';
+export { TreeView } from './treeView/TreeView/tree-view';
+export { DomainObjectTreeView } from './treeView/DomainObjectTreeView/DomainObjectTreeView';

package/dist/ui/components/commandBased/index.js

@@ -0,0 +1,18 @@
+import { useCommandProperty as e } from "./hooks/useCommandProperty.js";
+import { IconFactory as t } from "./Factories/IconFactory.js";
+import { TreeView as n } from "./treeView/TreeView/tree-view.js";
+import { DomainObjectTreeView as r } from "./treeView/DomainObjectTreeView/DomainObjectTreeView.js";
+import { RevealButtons as i } from "./RevealButtons.js";
+import { ToolUI as a } from "./main/ToolUI.js";
+import { usePoiDomainObject as o } from "./pointsOfInterest/usePoiDomainObject.js";
+import { usePointsOfInterestTool as s } from "./pointsOfInterest/usePointsOfInterestTool.js";
+import { PoiInfoPanelContent as c } from "./pointsOfInterest/PoiInfoPanelContent.js";
+import { useFilterPointsOfInterest as l } from "./pointsOfInterest/useFilterPointsOfInterest.js";
+import { usePoiCreateFlowState as u } from "./pointsOfInterest/usePoiCreateFlowState.js";
+import { usePointsOfInterest as d } from "./pointsOfInterest/usePointsOfInterest.js";
+import { useSyncSelectedPoi as f } from "./pointsOfInterest/useSyncSelectedPoi.js";
+import { PoiList as p } from "./pointsOfInterest/PoiList.js";
+import "./pointsOfInterest/index.js";
+import { CadTreeView as m } from "./treeView/CadTreeView/CadTreeView.js";
+import { useSyncLayersState as h } from "./hooks/useSyncLayersState.js";
+export { m as CadTreeView, r as DomainObjectTreeView, t as IconFactory, c as PoiInfoPanelContent, p as PoiList, i as RevealButtons, a as ToolUI, n as TreeView, e as useCommandProperty, l as useFilterPointsOfInterest, u as usePoiCreateFlowState, o as usePoiDomainObject, d as usePointsOfInterest, s as usePointsOfInterestTool, h as useSyncLayersState, f as useSyncSelectedPoi };

package/dist/ui/components/commandBased/main/AnchoredDialog.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const AnchoredDialog: () => ReactNode;

package/dist/ui/components/commandBased/main/AnchoredDialog.js

@@ -0,0 +1,30 @@
+import { useRenderTarget as e } from "../../RevealCanvas/ViewerContext.js";
+import "../../RevealCanvas/index.js";
+import { useComponentFactory as t } from "../../RevealCanvas/ComponentFactoryContext.js";
+import { ViewerAnchor as n } from "../../ViewerAnchor/ViewerAnchor.js";
+import { SuppressRevealEvents as r } from "../../../higher-order-components/withSuppressRevealEvents.js";
+import { useEffect as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { signal as o } from "@cognite/signal-utils";
+import { useSignalValue as s } from "@cognite/signal-utils/react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/main/AnchoredDialog.tsx
+var c = o(), l = () => {
+	let o = e(), l = s(o.commandsController.activeToolSignal), u = l === void 0 ? c : l.getAnchoredDialogContent(), d = s(u), f = d?.contentCommands.some((e) => e.isEnabled);
+	i(() => (d?.customListeners?.forEach((e) => {
+		window.addEventListener(e.eventName, e.callback, !0);
+	}), () => {
+		d?.customListeners?.forEach((e) => {
+			window.removeEventListener(e.eventName, e.callback, !0);
+		});
+	}), [d]);
+	let p = t();
+	if (d !== void 0 && f === !0) return /* @__PURE__ */ a(n, {
+		position: d?.position,
+		children: /* @__PURE__ */ a(r, {
+			className: "flex flex-col bg-white rounded-md shadow-md p-1",
+			children: d.contentCommands.map((e) => p.createElement(e, "right"))
+		})
+	});
+};
+//#endregion
+export { l as AnchoredDialog };

package/dist/ui/components/commandBased/main/CommandButtons.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { BaseCommand } from '../../../../foundation/commands/BaseCommand';
+import { ButtonProp } from '../RevealButtons';
+import { PlacementType } from '../utils/types';
+export declare function createButtonFromCommandConstructor(commandConstructor: () => BaseCommand, prop: ButtonProp): ReactElement;
+export declare const CommandButtons: ({ commands, placement, }: {
+    commands: Array<BaseCommand | undefined>;
+    placement: PlacementType;
+}) => ReactElement;

package/dist/ui/components/commandBased/main/CommandButtons.js

@@ -0,0 +1,15 @@
+import { createDividerByKey as e } from "../buttons/DividerCreator.js";
+import { useComponentFactory as t } from "../../RevealCanvas/ComponentFactoryContext.js";
+import { useMemo as n } from "react";
+import { Fragment as r, jsx as i } from "react/jsx-runtime";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/main/CommandButtons.tsx
+function a(e, r) {
+	let i = n(e, []);
+	return t().createElement(i, r.toolbarPlacement ?? "right");
+}
+var o = ({ commands: n, placement: a }) => {
+	let o = t();
+	return /* @__PURE__ */ i(r, { children: n.map((t, n) => t === void 0 ? e(`undefined${n.toString()}`, a) : o.createElement(t, a)) });
+};
+//#endregion
+export { o as CommandButtons, a as createButtonFromCommandConstructor };

package/dist/ui/components/commandBased/main/Comment.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+export type CommentProps = {
+    placeholder?: string;
+    message: string | undefined;
+    setMessage: (message: string) => void;
+    onPostMessage: () => void;
+    postButtonText: string | undefined;
+    postButtonDisabled: boolean;
+    cancelButtonText: string | undefined;
+    cancelButtonDisabled: boolean;
+    onCancel?: () => void;
+    showButtons: boolean;
+};
+export declare const Comment: ({ placeholder, message, setMessage, onPostMessage, postButtonText, postButtonDisabled, cancelButtonText, cancelButtonDisabled, onCancel, showButtons, }: CommentProps) => ReactElement;

package/dist/ui/components/commandBased/main/Comment.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Button as n } from "@cognite/aura/components/button";
+import { Textarea as r } from "@cognite/aura/components/textarea";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/main/Comment.tsx
+var i = ({ placeholder: i, message: a, setMessage: o, onPostMessage: s, postButtonText: c, postButtonDisabled: l, cancelButtonText: u, cancelButtonDisabled: d, onCancel: f, showButtons: p }) => /* @__PURE__ */ t("div", {
+	className: "flex flex-col gap-2",
+	children: [/* @__PURE__ */ e(r, {
+		placeholder: i,
+		value: a,
+		onChange: (e) => {
+			o(e.target.value);
+		}
+	}), p && /* @__PURE__ */ t("div", {
+		className: "flex flex-row justify-end gap-2",
+		children: [f && /* @__PURE__ */ e(n, {
+			variant: "secondary",
+			disabled: d,
+			onClick: f,
+			children: u
+		}), /* @__PURE__ */ e(n, {
+			style: { color: "white" },
+			disabled: l,
+			onClick: s,
+			children: c
+		})]
+	})]
+});
+//#endregion
+export { i as Comment };

package/dist/ui/components/commandBased/main/ToolUI.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare const ToolUI: () => ReactElement;

package/dist/ui/components/commandBased/main/ToolUI.js

@@ -0,0 +1,12 @@
+import { ActiveToolToolbar as e } from "./Toolbar.js";
+import { DomainObjectPanel as t } from "../domainObjectPanel/DomainObjectPanel.js";
+import { AnchoredDialog as n } from "./AnchoredDialog.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/main/ToolUI.tsx
+var o = () => /* @__PURE__ */ a(r, { children: [
+	/* @__PURE__ */ i(e, {}),
+	/* @__PURE__ */ i(t, {}),
+	/* @__PURE__ */ i(n, {})
+] });
+//#endregion
+export { o as ToolUI };

package/dist/ui/components/commandBased/main/Toolbar.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import { CommandButtons } from './CommandButtons';
+export declare const TopToolbar: () => ReactElement;
+export declare const MainToolbar: () => ReactElement;
+export declare const ActiveToolToolbar: () => ReactElement;
+export { CommandButtons };

package/dist/ui/components/commandBased/main/Toolbar.js

@@ -0,0 +1,55 @@
+import { useRenderTarget as e } from "../../RevealCanvas/ViewerContext.js";
+import { CommandButtons as t } from "./CommandButtons.js";
+import { withSuppressRevealEvents as n } from "../../../higher-order-components/withSuppressRevealEvents.js";
+import "react";
+import { Fragment as r, jsx as i } from "react/jsx-runtime";
+import { useSignalValue as a } from "@cognite/signal-utils/react";
+import { cn as o } from "@cognite/aura/utils";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/main/Toolbar.tsx
+var s = () => {
+	let t = e();
+	if (t === void 0) return /* @__PURE__ */ i(r, {});
+	let n = a(t.commandsController.activeToolSignal);
+	if (n === void 0) return /* @__PURE__ */ i(r, {});
+	let o = n.getToolbar();
+	if (o === void 0) return /* @__PURE__ */ i(r, {});
+	let s = n.getToolbarStyle();
+	return /* @__PURE__ */ i(c, {
+		commands: o,
+		style: s
+	});
+}, c = ({ commands: e, style: n }) => {
+	if (e.length === 0) return /* @__PURE__ */ i(r, {});
+	let a = l(n);
+	return /* @__PURE__ */ i("div", {
+		className: "z-[1000] absolute block",
+		style: {
+			left: n.leftPx,
+			right: n.rightPx,
+			top: n.topPx,
+			bottom: n.bottomPx,
+			margin: n.marginPx
+		},
+		children: /* @__PURE__ */ i(u, {
+			style: {
+				flexFlow: n.flexFlow,
+				padding: 2
+			},
+			children: /* @__PURE__ */ i(t, {
+				commands: e,
+				placement: a
+			})
+		})
+	});
+};
+function l(e) {
+	return e.isHorizontal ? e.top === void 0 ? "bottom" : "top" : e.left === void 0 ? "right" : "left";
+}
+var u = n(({ style: e, className: t, children: n, ...r }) => /* @__PURE__ */ i("div", {
+	...r,
+	className: o("flex gap-2 p-1 rounded-lg bg-white outline outline-1 outline-[rgba(83,88,127,0.24)]", t),
+	style: e,
+	children: n
+}));
+//#endregion
+export { s as ActiveToolToolbar, t as CommandButtons };

package/dist/ui/components/commandBased/pointsOfInterest/PoiCommentSection.context.d.ts

@@ -0,0 +1,11 @@
+import { Context } from 'react';
+import { useCommentsForPoiQuery } from './useCommentsForPoiQuery';
+import { usePoiDomainObject } from './usePoiDomainObject';
+import { useSelectedPoi } from './useSelectedPoi';
+export type PoiCommentSectionDependencies = {
+    useSelectedPoi: typeof useSelectedPoi;
+    useCommentsForPoiQuery: typeof useCommentsForPoiQuery;
+    usePoiDomainObject: typeof usePoiDomainObject;
+};
+export declare const defaultPoiCommentSectionDependencies: PoiCommentSectionDependencies;
+export declare const PoiCommentSectionContext: Context<PoiCommentSectionDependencies>;

package/dist/ui/components/commandBased/pointsOfInterest/PoiCommentSection.context.js

@@ -0,0 +1,12 @@
+import { usePoiDomainObject as e } from "./usePoiDomainObject.js";
+import { useCommentsForPoiQuery as t } from "./useCommentsForPoiQuery.js";
+import { useSelectedPoi as n } from "./useSelectedPoi.js";
+import { createContext as r } from "react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/pointsOfInterest/PoiCommentSection.context.ts
+var i = {
+	useSelectedPoi: n,
+	useCommentsForPoiQuery: t,
+	usePoiDomainObject: e
+}, a = r(i);
+//#endregion
+export { a as PoiCommentSectionContext, i as defaultPoiCommentSectionDependencies };

package/dist/ui/components/commandBased/pointsOfInterest/PoiCommentSection.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { UseQueryResult } from '@tanstack/react-query';
+import { PointOfInterest } from '../../../../domains';
+import { CommentProperties } from '../../../../domains/pointsOfInterest/models';
+export declare const PoiCommentSection: () => ReactNode;
+export declare const PoiCommentsScrollArea: ({ comments, }: {
+    comments: UseQueryResult<CommentProperties[] | null>;
+}) => ReactNode;
+export declare const PoiCommentWriteField: ({ poi, refetchComments, }: {
+    poi: PointOfInterest<unknown>;
+    refetchComments: () => void;
+}) => ReactNode;
+export declare const SingleCommentDisplay: ({ comment, }: {
+    comment: CommentProperties;
+}) => ReactNode;
+export declare const CreateCommentField: ({ poi, refetchComments, }: {
+    poi: PointOfInterest<unknown>;
+    refetchComments: () => void;
+}) => ReactNode;

package/dist/ui/components/commandBased/pointsOfInterest/PoiCommentSection.js

@@ -0,0 +1,131 @@
+import { useTranslation as e } from "../../i18n/I18n.js";
+import { getRelativeDateTime as t } from "../../../../utilities/date-time-utils/format-date-time.js";
+import "../../../../utilities/date-time-utils/index.js";
+import { TextWithClickableLink as n } from "../../../../utilities/TextWithClickableLink.js";
+import { getAvatarInitials as r, getAvatarVariant as i } from "./avatarUtils.js";
+import { PoiCommentSectionContext as a } from "./PoiCommentSection.context.js";
+import { useContext as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { IconLoader2 as u, IconSend as d } from "@tabler/icons-react";
+import { Separator as f } from "@cognite/aura/components/separator";
+import { Label as p } from "@cognite/aura/components/label";
+import { Avatar as m, AvatarFallback as h } from "@cognite/aura/components/avatar";
+import { EmptyState as g, EmptyStateIcon as _, EmptyStateTitle as v } from "@cognite/aura/components/empty-state";
+import { InputGroup as y, InputGroupAddon as b, InputGroupButton as x, InputGroupTextarea as S } from "@cognite/aura/components/input-group";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/pointsOfInterest/PoiCommentSection.tsx
+var C = () => {
+	let { useSelectedPoi: e, useCommentsForPoiQuery: t } = o(a), n = e(), r = t(n);
+	return n === void 0 ? null : /* @__PURE__ */ l("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [
+			/* @__PURE__ */ c(f, { className: "shrink-0 -mx-4 data-[orientation=horizontal]:w-[calc(100%+2rem)]" }),
+			/* @__PURE__ */ c("div", {
+				className: "flex min-h-0 flex-1 flex-col overflow-y-auto",
+				children: /* @__PURE__ */ c(w, { comments: r })
+			}),
+			/* @__PURE__ */ c(f, { className: "my-2 shrink-0 -mx-4 data-[orientation=horizontal]:w-[calc(100%+2rem)]" }),
+			/* @__PURE__ */ c("div", {
+				className: "shrink-0",
+				children: /* @__PURE__ */ c(T, {
+					poi: n,
+					refetchComments: r.refetch
+				})
+			})
+		]
+	});
+}, w = ({ comments: t }) => {
+	let { t: n } = e(), r = t.data !== void 0 && t.data !== null && t.data.length > 0;
+	return t.isLoading ? /* @__PURE__ */ c("div", {
+		className: "flex min-h-full flex-col items-center justify-center px-2 py-3",
+		role: "status",
+		"aria-label": n({ key: "LOADING" }),
+		children: /* @__PURE__ */ c(u, {
+			className: "size-4 animate-spin text-muted-foreground",
+			"aria-hidden": !0
+		})
+	}) : r ? /* @__PURE__ */ l("div", {
+		className: "flex flex-col gap-2 pt-3",
+		children: [/* @__PURE__ */ c(p, { children: n({ key: "COMMENTS" }) }), /* @__PURE__ */ c("div", {
+			className: "flex flex-col gap-2",
+			children: t.data?.map((e) => /* @__PURE__ */ c(E, { comment: e }, `${e.ownerId}/${e.content}`))
+		})]
+	}) : /* @__PURE__ */ c("div", {
+		className: "flex min-h-full flex-col items-center justify-center px-2 py-3",
+		children: /* @__PURE__ */ l(g, {
+			variant: "compact",
+			type: "new-chat",
+			children: [/* @__PURE__ */ c(_, {}), /* @__PURE__ */ c(v, {
+				as: "p",
+				children: n({ key: "POINT_OF_INTEREST_NO_COMMENTS_YET" })
+			})]
+		})
+	});
+}, T = ({ poi: e, refetchComments: t }) => /* @__PURE__ */ c(D, {
+	poi: e,
+	refetchComments: t
+}), E = ({ comment: a }) => {
+	let { currentLanguage: o } = e();
+	return /* @__PURE__ */ l("div", {
+		className: "flex flex-row gap-2 items-start",
+		children: [/* @__PURE__ */ c(m, {
+			variant: i(a.ownerId),
+			children: /* @__PURE__ */ c(h, { children: r(a.ownerId) })
+		}), /* @__PURE__ */ l("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-1",
+			children: [/* @__PURE__ */ c("div", {
+				className: "whitespace-pre-wrap break-words rounded-md bg-muted-background px-3 py-2",
+				children: /* @__PURE__ */ c(n, { content: a.content })
+			}), a.createdTime !== void 0 && /* @__PURE__ */ c("span", {
+				className: "self-end text-xs text-muted-foreground",
+				children: t({
+					date: a.createdTime,
+					language: o
+				})
+			})]
+		})]
+	});
+}, D = ({ poi: t, refetchComments: n }) => {
+	let { t: r } = e(), { usePoiDomainObject: i } = o(a), u = i(), [f, p] = s(""), [m, h] = s(!1), [g, _] = s(), v = f.trim(), C = v.length > 0 && !m && u !== void 0;
+	return /* @__PURE__ */ l("form", {
+		onSubmit: (e) => {
+			e?.preventDefault(), !(!C || u === void 0) && (h(!0), _(void 0), u.postCommentForPoi(t, v).then(() => {
+				p(""), n();
+			}).catch((e) => {
+				console.error(e), _(r({ key: "POINT_OF_INTEREST_COMMENT_POST_FAILED" }));
+			}).finally(() => {
+				h(!1);
+			}));
+		},
+		children: [g !== void 0 && /* @__PURE__ */ c("p", {
+			className: "mb-2 text-sm text-destructive-foreground",
+			role: "alert",
+			children: g
+		}), /* @__PURE__ */ l(y, {
+			className: "bg-muted-background",
+			children: [/* @__PURE__ */ c(S, {
+				placeholder: r({ key: "COMMENT_PLACEHOLDER" }),
+				value: f,
+				rows: 3,
+				disabled: m,
+				className: "overflow-y-hidden py-2 [&::-webkit-resizer]:hidden",
+				onChange: (e) => {
+					p(e.target.value);
+				}
+			}), /* @__PURE__ */ c(b, {
+				align: "block-end",
+				className: "justify-end px-2 pb-2 [&:has(button)]:cursor-default",
+				children: /* @__PURE__ */ c(x, {
+					type: "submit",
+					size: "icon-sm",
+					variant: "default",
+					style: { color: "white" },
+					disabled: !C,
+					"aria-label": r({ key: "SEND" }),
+					children: /* @__PURE__ */ c(d, { className: "size-4" })
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { D as CreateCommentField, C as PoiCommentSection, T as PoiCommentWriteField, w as PoiCommentsScrollArea, E as SingleCommentDisplay };

package/dist/ui/components/commandBased/pointsOfInterest/PoiHeader.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const PoiHeader: () => ReactNode;

package/dist/ui/components/commandBased/pointsOfInterest/PoiHeader.js

@@ -0,0 +1,71 @@
+import { useTranslation as e } from "../../i18n/I18n.js";
+import { PointsOfInterestStatus as t } from "../../../../domains/pointsOfInterest/types.js";
+import { usePoiDomainObject as n } from "./usePoiDomainObject.js";
+import { useSelectedPoi as r } from "./useSelectedPoi.js";
+import { PoiSharePanel as i } from "./PoiSharePanel.js";
+import { usePoiToolIsSaving as a, usePointsOfInterestTool as o } from "./usePointsOfInterestTool.js";
+import { useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Button as d } from "@cognite/aura/components/button";
+import { IconPencil as f, IconShare as p, IconTrash as m } from "@tabler/icons-react";
+import { DropdownMenu as h, DropdownMenuContent as g, DropdownMenuTrigger as _ } from "@cognite/aura/components/dropdown-menu";
+import { Dialog as v, DialogClose as y, DialogContent as b, DialogDescription as x, DialogFooter as S, DialogHeader as C, DialogTitle as w, DialogTrigger as T } from "@cognite/aura/components/dialog";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/pointsOfInterest/PoiHeader.tsx
+var E = () => {
+	let { t: E } = e(), D = n(), O = o(), k = a(), A = r(), [j, M] = s(!1);
+	if (A === void 0) return;
+	let N = A.status === t.PendingCreation, P = A.status === t.PendingEditing;
+	return /* @__PURE__ */ l("div", {
+		className: "flex flex-row justify-end items-center",
+		children: /* @__PURE__ */ l("div", {
+			className: "flex flex-row items-center gap-2",
+			children: !N && !P && /* @__PURE__ */ u(c, { children: [
+				/* @__PURE__ */ u(h, { children: [/* @__PURE__ */ l(_, { render: /* @__PURE__ */ l(d, {
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": E({ key: "SHARE" }),
+					children: /* @__PURE__ */ l(p, {})
+				}) }), /* @__PURE__ */ l(g, {
+					align: "end",
+					side: "bottom",
+					className: "z-[10000]",
+					children: /* @__PURE__ */ l(i, {})
+				})] }),
+				/* @__PURE__ */ u(v, {
+					open: j,
+					onOpenChange: M,
+					children: [/* @__PURE__ */ l(T, { render: /* @__PURE__ */ l(d, {
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": E({ key: "POINT_OF_INTEREST_DELETE_THIS" }),
+						children: /* @__PURE__ */ l(m, {})
+					}) }), /* @__PURE__ */ u(b, {
+						className: "z-[10000]",
+						children: [/* @__PURE__ */ u(C, { children: [/* @__PURE__ */ l(w, { children: E({ key: "POINT_OF_INTEREST_DELETE_CONFIRM_TITLE" }) }), /* @__PURE__ */ l(x, { children: E({ key: "POINT_OF_INTEREST_DELETE_CONFIRM_DESCRIPTION" }) })] }), /* @__PURE__ */ u(S, { children: [/* @__PURE__ */ l(y, { render: /* @__PURE__ */ l(d, {
+							variant: "outline",
+							children: E({ key: "CANCEL" })
+						}) }), /* @__PURE__ */ l(d, {
+							variant: "destructive",
+							onClick: () => {
+								D?.removePointsOfInterest(A), D?.setSelectedPointOfInterest(void 0), D?.save(), M(!1);
+							},
+							children: E({ key: "DELETE" })
+						})] })]
+					})]
+				}),
+				/* @__PURE__ */ l(d, {
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": E({ key: "EDIT" }),
+					disabled: k,
+					onClick: () => {
+						O?.startEditingSelectedPoi();
+					},
+					children: /* @__PURE__ */ l(f, {})
+				})
+			] })
+		})
+	});
+};
+//#endregion
+export { E as PoiHeader };

package/dist/ui/components/commandBased/pointsOfInterest/PoiInfoPanelContent.context.d.ts

@@ -0,0 +1,13 @@
+import { Context } from 'react';
+import { PoiCommentSection } from './PoiCommentSection';
+import { PoiHeader } from './PoiHeader';
+import { PoiInfoSection } from './PoiInfoSection';
+import { useSelectedPoi } from './useSelectedPoi';
+export type PoiInfoPanelContentDependencies = {
+    useSelectedPoi: typeof useSelectedPoi;
+    PoiHeader: typeof PoiHeader;
+    PoiInfoSection: typeof PoiInfoSection;
+    PoiCommentSection: typeof PoiCommentSection;
+};
+export declare const defaultPoiInfoPanelContentDependencies: PoiInfoPanelContentDependencies;
+export declare const PoiInfoPanelContentContext: Context<PoiInfoPanelContentDependencies>;

package/dist/ui/components/commandBased/pointsOfInterest/PoiInfoPanelContent.context.js

@@ -0,0 +1,14 @@
+import { useSelectedPoi as e } from "./useSelectedPoi.js";
+import { PoiCommentSection as t } from "./PoiCommentSection.js";
+import { PoiHeader as n } from "./PoiHeader.js";
+import { PoiInfoSection as r } from "./PoiInfoSection.js";
+import { createContext as i } from "react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/pointsOfInterest/PoiInfoPanelContent.context.ts
+var a = {
+	useSelectedPoi: e,
+	PoiHeader: n,
+	PoiInfoSection: r,
+	PoiCommentSection: t
+}, o = i(a);
+//#endregion
+export { o as PoiInfoPanelContentContext, a as defaultPoiInfoPanelContentDependencies };

package/dist/ui/components/commandBased/pointsOfInterest/PoiInfoPanelContent.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const PoiInfoPanelContent: () => ReactNode;