@canonical/react-ds-app-launchpad 0.9.0-experimental.5 → 0.9.0-experimental.7

package/dist/esm/ui/EditableBlock/Context.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const EditingContext = createContext(undefined);
+export default EditingContext;
+//# sourceMappingURL=Context.js.map

package/dist/esm/ui/EditableBlock/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,cAAc,GAAG,aAAa,CAAiC,SAAS,CAAC,CAAC;AAEhF,eAAe,cAAc,CAAC"}

package/dist/esm/ui/EditableBlock/EditableBlock.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import EditingContext from "./Context.js";
+import "./styles.css";
+/**
+ * Component that renders toggling edit mode block
+ * @returns {React.ReactElement}      - Rendered EditableBlock
+ */
+const EditableBlock = ({ id, EditComponent, className: userClassName, style, title, tag: TitleTag = "h3", }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const isFocusedRef = useRef(false);
+    const toggleEditing = useCallback(() => {
+        setIsEditing((editing) => !editing);
+    }, []);
+    const handleBlur = useCallback(() => {
+        isFocusedRef.current = false;
+    }, []);
+    const handleFocus = useCallback(() => {
+        isFocusedRef.current = true;
+    }, []);
+    const handleKeyUp = useCallback((event) => {
+        if ((isFocusedRef.current && event.key === "Enter") ||
+            event.key === " ") {
+            toggleEditing();
+        }
+    }, [toggleEditing]);
+    const componentCssClassName = "ds editable-block";
+    return (_jsx(EditingContext.Provider, { value: { isEditing, toggleEditing }, children: _jsxs("div", { className: [componentCssClassName, userClassName]
+                .filter(Boolean)
+                .join(" "), style: style, id: id, children: [_jsxs("header", { children: [_jsx(TitleTag, { className: "title", children: title }), _jsx("div", { className: `icon ${isEditing ? "icon-close" : "icon-edit"}`, onClick: toggleEditing, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: handleFocus, role: "button", tabIndex: 0 })] }), _jsx("div", { className: "content", children: EditComponent && (_jsx(EditComponent, { ...{ isEditing, toggleEditing } })) })] }) }));
+};
+export default EditableBlock;
+//# sourceMappingURL=EditableBlock.js.map

package/dist/esm/ui/EditableBlock/EditableBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableBlock.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,cAAc,MAAM,cAAc,CAAC;AAG1C,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AAEH,MAAM,aAAa,GAAG,CAA6B,EACjD,EAAE,EACF,aAAa,EACb,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,KAAK,EACL,GAAG,EAAE,QAAQ,GAAG,IAAI,GACE,EAAsB,EAAE;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,YAAY,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA0B,EAAE,EAAE;QAC7B,IACE,CAAC,YAAY,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC;YAC/C,KAAK,CAAC,GAAG,KAAK,GAAG,EACjB,CAAC;YACD,aAAa,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,qBAAqB,GAAG,mBAAmB,CAAC;IAElD,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAC1D,eACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,aAAa,CAAC;iBAC9C,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,EACZ,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,aAEN,6BACE,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,YAAE,KAAK,GAAY,EAC9C,cACE,SAAS,EAAE,QAAQ,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,EAC3D,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,GACX,IACK,EACT,cAAK,SAAS,EAAC,SAAS,YACrB,aAAa,IAAI,CAChB,KAAC,aAAa,OAAM,EAAE,SAAS,EAAE,aAAa,EAAQ,GAAI,CAC3D,GACG,IACF,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/esm/ui/EditableBlock/EditableBlock.test.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* @canonical/generator-ds 0.8.0-experimental.0 */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import EditableBlock from "./EditableBlock.js";
+import { useEditableBlock } from "./hooks/useEditableBlock.js";
+const SampleEditComponent = () => {
+    return _jsx("div", { children: "Sample" });
+};
+describe("EditableBlock component", () => {
+    it("renders children content", () => {
+        render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
+        const sampleElement = screen.getByText("Sample");
+        expect(sampleElement).not.toBeNull();
+        expect(document.body.contains(sampleElement)).toBe(true);
+    });
+    it("toggles editing state when icon is clicked", () => {
+        render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
+        const editIcon = screen.getByRole("button");
+        fireEvent.click(editIcon);
+        expect(editIcon.classList.contains("icon-close")).toBe(true);
+        fireEvent.click(editIcon);
+        expect(editIcon.classList.contains("icon-edit")).toBe(true);
+    });
+    it("toggles editing state when Enter key is pressed", () => {
+        render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
+        const editIcon = screen.getByRole("button");
+        fireEvent.keyUp(editIcon, { key: "Enter", code: "Enter", charCode: 13 });
+        expect(editIcon.classList.contains("icon-close")).toBe(true);
+        fireEvent.keyUp(editIcon, { key: "Enter", code: "Enter", charCode: 13 });
+        expect(editIcon.classList.contains("icon-edit")).toBe(true);
+    });
+    it("toggles editing state when Space key is pressed", () => {
+        render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
+        const editIcon = screen.getByRole("button");
+        fireEvent.keyUp(editIcon, { key: " ", code: "Space", charCode: 32 });
+        expect(editIcon.classList.contains("icon-close")).toBe(true);
+        fireEvent.keyUp(editIcon, { key: " ", code: "Space", charCode: 32 });
+        expect(editIcon.classList.contains("icon-edit")).toBe(true);
+    });
+    it("provides editing context to children", () => {
+        const ChildComponent = () => {
+            const { isEditing } = useEditableBlock();
+            return _jsx("div", { children: isEditing ? "Editing" : "Not Editing" });
+        };
+        render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: ChildComponent }));
+        const notEditingElement = screen.getByText("Not Editing");
+        expect(notEditingElement).not.toBeNull();
+        expect(document.body.contains(notEditingElement)).toBe(true);
+        const editIcon = screen.getByRole("button");
+        fireEvent.click(editIcon);
+        const editingElement = screen.getByText("Editing");
+        expect(editingElement).not.toBeNull();
+        expect(document.body.contains(editingElement)).toBe(true);
+    });
+});
+//# sourceMappingURL=EditableBlock.test.js.map

package/dist/esm/ui/EditableBlock/EditableBlock.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableBlock.test.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.test.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ui/EditableBlock/hooks/index.js

@@ -0,0 +1,2 @@
+export * from "./useEditableBlock.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/EditableBlock/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/esm/ui/EditableBlock/hooks/useEditableBlock.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import EditingContext from "../Context.js";
+export const useEditableBlock = () => {
+    const context = useContext(EditingContext);
+    if (!context) {
+        throw new Error("useEditing cannot be used directly.");
+    }
+    return context;
+};
+export default useEditableBlock;
+//# sourceMappingURL=useEditableBlock.js.map

package/dist/esm/ui/EditableBlock/hooks/useEditableBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableBlock.js","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/useEditableBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,cAAc,MAAM,eAAe,CAAC;AAG3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAuB,EAAE;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;IACzD,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/ui/EditableBlock/index.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.8.0-experimental.0 */
+export { default as EditableBlock } from "./EditableBlock.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/EditableBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/esm/ui/EditableBlock/styles.css

@@ -0,0 +1,41 @@
+.ds.editable-block {
+  --editable-block-header-icon-size: 16px;
+  --editable-block-header-icon-edit-url: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 13.25v1.5H2v-1.5h12zM11.907 1.676l.58.58a2 2 0 010 2.829l-5.133 5.133c-.038.038-.079.073-.122.104l.01.008a3.77 3.77 0 01-1.718.983l-3.52.914.863-3.583c.138-.57.41-1.099.795-1.54l.17-.183.01.01c.03-.043.065-.084.103-.122l5.133-5.133a2 2 0 012.829 0zm-3.309 2.6L5.036 7.84l-.593.82 1.062 1.063.814-.591 3.567-3.568-1.288-1.288zm1.61-1.597l-.07.057-.479.48 1.288 1.288.48-.48a.5.5 0 00.057-.638l-.057-.069-.581-.58a.5.5 0 00-.638-.058z' fill='%23000000' fill-rule='nonzero'/%3E%3C/svg%3E");
+  --editable-block-header-icon-close-url: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
+  --editable-block-header-title-font-weight: 550;
+
+  > header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > .icon {
+      width: var(--editable-block-header-icon-size);
+      height: var(--editable-block-header-icon-size);
+      background-size: contain;
+      background-repeat: no-repeat;
+      cursor: pointer;
+    }
+
+    > .icon-edit {
+      background-image: var(--editable-block-header-icon-edit-url);
+    }
+
+    > .icon-close {
+      background-image: var(--editable-block-header-icon-close-url);
+    }
+
+    > .title {
+      flex: 1;
+      text-align: left;
+      font-weight: var(--editable-block-header-title-font-weight);
+    }
+  }
+
+  > .content {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/dist/esm/ui/EditableBlock/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/EditableBlock/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/RelativeTime/RelativeTime.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { formatHumanTime, getOptimalUpdateInterval, parseInstant, } from "./utils/index.js";
+const componentCssClassName = "ds relative-time";
+/**
+ * The RelativeTime component displays timestamps in a human-readable relative format (like "2 hours ago" or "in 3 days").
+ *
+ * It features automatic live updates with interval optimization based on time distance, configurable "now" threshold,
+ * and renders as proper semantic HTML using the <time> element. The component leverages the Temporal API for calculations and Intl.RelativeTimeFormat for localization.
+ */
+const RelativeTime = ({ id, className, style, time, relativeTimeFormat, nowThreshold = 10, disableLiveUpdate = false, nowKeyword = "now", invalidDateKeyword = "invalid date", }) => {
+    const [relativeTime, setRelativeTime] = useState("");
+    const [localeTimeString, setLocaleTimeString] = useState("");
+    const [stringTime, setStringTime] = useState("");
+    const intervalRef = useRef(null);
+    const instantTime = useMemo(() => {
+        try {
+            return parseInstant(time);
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
+    }, [time]);
+    const updateRelativeTime = useCallback(() => {
+        if (instantTime === null) {
+            setRelativeTime(invalidDateKeyword);
+            setLocaleTimeString("");
+            setStringTime("");
+            return null;
+        }
+        const timeFormatter = relativeTimeFormat ||
+            new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+        setRelativeTime(formatHumanTime(instantTime, {
+            nowThreshold,
+            nowKeyword,
+            relativeTimeFormat: timeFormatter,
+        }));
+        setLocaleTimeString(instantTime.toLocaleString());
+        setStringTime(instantTime.toString());
+    }, [
+        instantTime,
+        relativeTimeFormat,
+        nowThreshold,
+        nowKeyword,
+        invalidDateKeyword,
+    ]);
+    useEffect(() => {
+        // initial calculation
+        updateRelativeTime();
+        if (disableLiveUpdate || instantTime === null)
+            return;
+        const updateInterval = getOptimalUpdateInterval(instantTime);
+        // SSR check
+        if (typeof window === "undefined")
+            return;
+        intervalRef.current = window.setInterval(updateRelativeTime, updateInterval);
+        return () => {
+            if (intervalRef.current)
+                window.clearInterval(intervalRef.current);
+        };
+    }, [instantTime, disableLiveUpdate, updateRelativeTime]);
+    return (_jsx("time", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), title: localeTimeString, dateTime: stringTime, children: relativeTime }));
+};
+export default RelativeTime;
+//# sourceMappingURL=RelativeTime.js.map

package/dist/esm/ui/RelativeTime/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/RelativeTime.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ui/RelativeTime/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as RelativeTime } from "./RelativeTime.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/RelativeTime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,cAAc,YAAY,CAAC"}

package/dist/esm/ui/RelativeTime/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/RelativeTime/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/RelativeTime/utils/constants.js

@@ -0,0 +1,6 @@
+export const MINUTE_IN_SECONDS = 60;
+export const HOUR_IN_SECONDS = MINUTE_IN_SECONDS * 60;
+export const DAY_IN_SECONDS = HOUR_IN_SECONDS * 24;
+export const MONTH_IN_SECONDS = DAY_IN_SECONDS * 30;
+export const YEAR_IN_SECONDS = DAY_IN_SECONDS * 365;
+//# sourceMappingURL=constants.js.map

package/dist/esm/ui/RelativeTime/utils/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,CAAC;AACpC,MAAM,CAAC,MAAM,eAAe,GAAG,iBAAiB,GAAG,EAAE,CAAC;AACtD,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,GAAG,EAAE,CAAC;AACnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,cAAc,GAAG,EAAE,CAAC;AACpD,MAAM,CAAC,MAAM,eAAe,GAAG,cAAc,GAAG,GAAG,CAAC"}

package/dist/esm/ui/RelativeTime/utils/formatHumanTime.js

@@ -0,0 +1,43 @@
+import { Temporal } from "@js-temporal/polyfill";
+/**
+ * Formats a given instant as a human-readable time relative to the current time.
+ * @param instant The instant to format.
+ * @param options The options to use for formatting.
+ * @returns A human-readable relative time string
+ */
+function formatHumanTime(instant, options) {
+    const now = Temporal.Now.instant();
+    const deltaSeconds = instant.epochSeconds - now.epochSeconds;
+    const absDeltaSeconds = Math.abs(deltaSeconds);
+    if (absDeltaSeconds < options.nowThreshold) {
+        return options.nowKeyword;
+    }
+    const timeZone = Temporal.Now.timeZoneId() || "UTC";
+    const instantZDT = instant.toZonedDateTimeISO(timeZone);
+    const nowZDT = now.toZonedDateTimeISO(timeZone);
+    const diff = instantZDT.since(nowZDT, { largestUnit: "years" });
+    const units = [
+        "years",
+        "months",
+        "days",
+        "hours",
+        "minutes",
+        "seconds",
+    ];
+    let rtfUnit = "seconds";
+    let rtfValue = 0;
+    for (const unit of units) {
+        const value = diff[unit];
+        if (value !== 0) {
+            rtfUnit = unit;
+            rtfValue = value;
+            break;
+        }
+    }
+    if (rtfValue === 0) {
+        return options.nowKeyword;
+    }
+    return options.relativeTimeFormat.format(rtfValue, rtfUnit);
+}
+export default formatHumanTime;
+//# sourceMappingURL=formatHumanTime.js.map

package/dist/esm/ui/RelativeTime/utils/formatHumanTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatHumanTime.js","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/formatHumanTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAgBjD;;;;;GAKG;AACH,SAAS,eAAe,CACtB,OAAyB,EACzB,OAAyB;IAEzB,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,GAAG,CAAC,YAAY,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAE/C,IAAI,eAAe,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC;QAC3C,OAAO,OAAO,CAAC,UAAU,CAAC;IAC5B,CAAC;IAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,KAAK,CAAC;IACpD,MAAM,UAAU,GAAG,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,MAAM,GAAG,GAAG,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC;IAEhE,MAAM,KAAK,GAAG;QACZ,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,SAAS;QACT,SAAS;KAC8B,CAAC;IAE1C,IAAI,OAAO,GAAgC,SAAS,CAAC;IACrD,IAAI,QAAQ,GAAG,CAAC,CAAC;IAEjB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,OAAO,GAAG,IAAI,CAAC;YACf,QAAQ,GAAG,KAAK,CAAC;YACjB,MAAM;QACR,CAAC;IACH,CAAC;IAED,IAAI,QAAQ,KAAK,CAAC,EAAE,CAAC;QACnB,OAAO,OAAO,CAAC,UAAU,CAAC;IAC5B,CAAC;IAED,OAAO,OAAO,CAAC,kBAAkB,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC;AAED,eAAe,eAAe,CAAC"}

package/dist/esm/ui/RelativeTime/utils/getOptimalUpdateInterval.js

@@ -0,0 +1,24 @@
+import { Temporal } from "@js-temporal/polyfill";
+import * as constants from "./constants.js";
+/**
+ * Calcualte the optimal update interval for a given instant based on the time distance from now.
+ * @returns The optimal update interval in milliseconds.
+ */
+function getOptimalUpdateInterval(instant) {
+    const now = Temporal.Now.instant();
+    const deltaSeconds = instant.epochSeconds - now.epochSeconds;
+    const absDeltaSeconds = Math.abs(deltaSeconds);
+    if (absDeltaSeconds < constants.MINUTE_IN_SECONDS) {
+        return 1000;
+    }
+    if (absDeltaSeconds < constants.HOUR_IN_SECONDS) {
+        return constants.MINUTE_IN_SECONDS * 1000;
+    }
+    if (absDeltaSeconds < constants.DAY_IN_SECONDS) {
+        return constants.HOUR_IN_SECONDS * 1000;
+    }
+    // for any other time distance, update once a day
+    return constants.DAY_IN_SECONDS * 1000;
+}
+export default getOptimalUpdateInterval;
+//# sourceMappingURL=getOptimalUpdateInterval.js.map

package/dist/esm/ui/RelativeTime/utils/getOptimalUpdateInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOptimalUpdateInterval.js","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/getOptimalUpdateInterval.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAC;AAE5C;;;GAGG;AACH,SAAS,wBAAwB,CAAC,OAAyB;IACzD,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,GAAG,CAAC,YAAY,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAE/C,IAAI,eAAe,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,eAAe,GAAG,SAAS,CAAC,eAAe,EAAE,CAAC;QAChD,OAAO,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC5C,CAAC;IAED,IAAI,eAAe,GAAG,SAAS,CAAC,cAAc,EAAE,CAAC;QAC/C,OAAO,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC;IAC1C,CAAC;IACD,iDAAiD;IACjD,OAAO,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC;AACzC,CAAC;AAED,eAAe,wBAAwB,CAAC"}

package/dist/esm/ui/RelativeTime/utils/index.js

@@ -0,0 +1,4 @@
+export { default as formatHumanTime } from "./formatHumanTime.js";
+export { default as getOptimalUpdateInterval } from "./getOptimalUpdateInterval.js";
+export { default as parseInstant } from "./parseInstant.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/RelativeTime/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/ui/RelativeTime/utils/parseInstant.js

@@ -0,0 +1,22 @@
+import { Temporal } from "@js-temporal/polyfill";
+/**
+ * Parser for Temporal.Instant.
+ * @param time - instance, date or string to parse
+ * @throws Error if time is invalid
+ */
+function parseInstant(time) {
+    if (time instanceof Temporal.Instant) {
+        return time;
+    }
+    if (time instanceof Date) {
+        return Temporal.Instant.fromEpochMilliseconds(time.getTime());
+    }
+    try {
+        return Temporal.Instant.from(time);
+    }
+    catch (e) {
+        throw new Error(`Invalid time string (ISO string or Date object expected): ${time}`);
+    }
+}
+export default parseInstant;
+//# sourceMappingURL=parseInstant.js.map

package/dist/esm/ui/RelativeTime/utils/parseInstant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseInstant.js","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/parseInstant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;GAIG;AACH,SAAS,YAAY,CAAC,IAAsC;IAC1D,IAAI,IAAI,YAAY,QAAQ,CAAC,OAAO,EAAE,CAAC;QACrC,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;QACzB,OAAO,QAAQ,CAAC,OAAO,CAAC,qBAAqB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IAChE,CAAC;IACD,IAAI,CAAC;QACH,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CACb,6DAA6D,IAAI,EAAE,CACpE,CAAC;IACJ,CAAC;AACH,CAAC;AAED,eAAe,YAAY,CAAC"}

package/dist/esm/ui/index.js

@@ -1,2 +1,3 @@
 export * from "./GitDiffViewer/index.js";
+export * from "./EditableBlock/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}

package/dist/types/ui/EditableBlock/Context.d.ts

@@ -0,0 +1,4 @@
+import type { EditingContextType } from "./types.js";
+declare const EditingContext: import("react").Context<EditingContextType | undefined>;
+export default EditingContext;
+//# sourceMappingURL=Context.d.ts.map

package/dist/types/ui/EditableBlock/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/Context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,QAAA,MAAM,cAAc,yDAA2D,CAAC;AAEhF,eAAe,cAAc,CAAC"}

package/dist/types/ui/EditableBlock/EditableBlock.d.ts

@@ -0,0 +1,10 @@
+import type React from "react";
+import type { EditElementProps, EditableBlockProps } from "./types.js";
+import "./styles.css";
+/**
+ * Component that renders toggling edit mode block
+ * @returns {React.ReactElement}      - Rendered EditableBlock
+ */
+declare const EditableBlock: <T extends EditElementProps>({ id, EditComponent, className: userClassName, style, title, tag: TitleTag, }: EditableBlockProps<T>) => React.ReactElement;
+export default EditableBlock;
+//# sourceMappingURL=EditableBlock.d.ts.map

package/dist/types/ui/EditableBlock/EditableBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableBlock.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEvE,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AAEH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,gBAAgB,iFAO9C,kBAAkB,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YA2DhC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/types/ui/EditableBlock/EditableBlock.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EditableBlock.test.d.ts.map

package/dist/types/ui/EditableBlock/EditableBlock.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableBlock.test.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.test.tsx"],"names":[],"mappings":""}

package/dist/types/ui/EditableBlock/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useEditableBlock.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/EditableBlock/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/types/ui/EditableBlock/hooks/useEditableBlock.d.ts

@@ -0,0 +1,4 @@
+import type { EditingContextType } from "../types.js";
+export declare const useEditableBlock: () => EditingContextType;
+export default useEditableBlock;
+//# sourceMappingURL=useEditableBlock.d.ts.map

package/dist/types/ui/EditableBlock/hooks/useEditableBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableBlock.d.ts","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/useEditableBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,gBAAgB,QAAO,kBAMnC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/types/ui/EditableBlock/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EditableBlock } from "./EditableBlock.js";
+export type { default as EditableBlockProps } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/EditableBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,YAAY,CAAC"}

package/dist/types/ui/EditableBlock/types.d.ts

@@ -0,0 +1,24 @@
+import type React from "react";
+import type { JSX } from "react";
+export interface EditingContextType {
+    isEditing: boolean;
+    toggleEditing: () => void;
+}
+export type EditElementProps = EditingContextType;
+export type EditElement<T extends EditElementProps> = (props: T) => React.ReactNode;
+export interface EditableBlockProps<T extends EditElementProps> {
+    /** Unique identifier for the editable block */
+    id?: string;
+    /** Component to render when in edit mode, must implement EditElement interface */
+    EditComponent: EditElement<T>;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Inline CSS styles to apply to the component */
+    style?: React.CSSProperties;
+    /** Title text for the editable block */
+    title?: string;
+    /** HTML element type to render as the title component (e.g., 'div', 'section') */
+    tag?: keyof JSX.IntrinsicElements;
+}
+export default EditableBlockProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/EditableBlock/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AAElD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,gBAAgB,IAAI,CACpD,KAAK,EAAE,CAAC,KACL,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,gBAAgB;IAC5D,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kFAAkF;IAClF,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAC9B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CACnC;AAED,eAAe,kBAAkB,CAAC"}

package/dist/types/ui/RelativeTime/RelativeTime.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+import type { RelativeTimeProps } from "./types.js";
+/**
+ * The RelativeTime component displays timestamps in a human-readable relative format (like "2 hours ago" or "in 3 days").
+ *
+ * It features automatic live updates with interval optimization based on time distance, configurable "now" threshold,
+ * and renders as proper semantic HTML using the <time> element. The component leverages the Temporal API for calculations and Intl.RelativeTimeFormat for localization.
+ */
+declare const RelativeTime: ({ id, className, style, time, relativeTimeFormat, nowThreshold, disableLiveUpdate, nowKeyword, invalidDateKeyword, }: RelativeTimeProps) => React.ReactElement;
+export default RelativeTime;
+//# sourceMappingURL=RelativeTime.d.ts.map

package/dist/types/ui/RelativeTime/RelativeTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.d.ts","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AASpD;;;;;GAKG;AACH,QAAA,MAAM,YAAY,yHAUf,iBAAiB,KAAG,KAAK,CAAC,YA0E5B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/types/ui/RelativeTime/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RelativeTime } from "./RelativeTime.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/RelativeTime/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,cAAc,YAAY,CAAC"}

package/dist/types/ui/RelativeTime/types.d.ts

@@ -0,0 +1,36 @@
+import type { Temporal } from "@js-temporal/polyfill";
+import type React from "react";
+export interface RelativeTimeProps {
+    /** A unique identifier for the RelativeTime */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /**
+     * The time to be displayed as a relative time (ISO string or Date object).
+     */
+    time: string | Date | Temporal.Instant;
+    /**
+     * Disable live duration updates (default: false).
+     */
+    disableLiveUpdate?: boolean;
+    /**
+     * custom relative time format (default: local language and narrow style).
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+     */
+    relativeTimeFormat?: Intl.RelativeTimeFormat;
+    /**
+     * The threshold in seconds for when to display the relative time as "just now" (default is 10).
+     */
+    nowThreshold?: number;
+    /**
+     * The keyword to use for "now" (default: "now")
+     */
+    nowKeyword?: string;
+    /**
+     * The keyword to use when the given time is not a valid. (default: "invalid date")
+     */
+    invalidDateKeyword?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/RelativeTime/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC;IAE7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/dist/types/ui/RelativeTime/utils/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const MINUTE_IN_SECONDS = 60;
+export declare const HOUR_IN_SECONDS: number;
+export declare const DAY_IN_SECONDS: number;
+export declare const MONTH_IN_SECONDS: number;
+export declare const YEAR_IN_SECONDS: number;
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/ui/RelativeTime/utils/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,eAAe,QAAyB,CAAC;AACtD,eAAO,MAAM,cAAc,QAAuB,CAAC;AACnD,eAAO,MAAM,gBAAgB,QAAsB,CAAC;AACpD,eAAO,MAAM,eAAe,QAAuB,CAAC"}

package/dist/types/ui/RelativeTime/utils/formatHumanTime.d.ts

@@ -0,0 +1,21 @@
+import { Temporal } from "@js-temporal/polyfill";
+type FormatterOptions = {
+    /** The threshold in seconds for considering the time as "now". */
+    nowThreshold: number;
+    /** The keyword to use for "now". */
+    nowKeyword: string;
+    /**
+     * The Intl.RelativeTimeFormat instance to use for formatting.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+     */
+    relativeTimeFormat: Intl.RelativeTimeFormat;
+};
+/**
+ * Formats a given instant as a human-readable time relative to the current time.
+ * @param instant The instant to format.
+ * @param options The options to use for formatting.
+ * @returns A human-readable relative time string
+ */
+declare function formatHumanTime(instant: Temporal.Instant, options: FormatterOptions): string;
+export default formatHumanTime;
+//# sourceMappingURL=formatHumanTime.d.ts.map

package/dist/types/ui/RelativeTime/utils/formatHumanTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatHumanTime.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/formatHumanTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,KAAK,gBAAgB,GAAG;IACtB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;IAErB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;CAC7C,CAAC;AAEF;;;;;GAKG;AACH,iBAAS,eAAe,CACtB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,gBAAgB,GACxB,MAAM,CAwCR;AAED,eAAe,eAAe,CAAC"}

package/dist/types/ui/RelativeTime/utils/getOptimalUpdateInterval.d.ts

@@ -0,0 +1,8 @@
+import { Temporal } from "@js-temporal/polyfill";
+/**
+ * Calcualte the optimal update interval for a given instant based on the time distance from now.
+ * @returns The optimal update interval in milliseconds.
+ */
+declare function getOptimalUpdateInterval(instant: Temporal.Instant): number;
+export default getOptimalUpdateInterval;
+//# sourceMappingURL=getOptimalUpdateInterval.d.ts.map

package/dist/types/ui/RelativeTime/utils/getOptimalUpdateInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOptimalUpdateInterval.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/getOptimalUpdateInterval.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD;;;GAGG;AACH,iBAAS,wBAAwB,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,GAAG,MAAM,CAkBnE;AAED,eAAe,wBAAwB,CAAC"}

package/dist/types/ui/RelativeTime/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { default as formatHumanTime } from "./formatHumanTime.js";
+export { default as getOptimalUpdateInterval } from "./getOptimalUpdateInterval.js";
+export { default as parseInstant } from "./parseInstant.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/RelativeTime/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/types/ui/RelativeTime/utils/parseInstant.d.ts

@@ -0,0 +1,9 @@
+import { Temporal } from "@js-temporal/polyfill";
+/**
+ * Parser for Temporal.Instant.
+ * @param time - instance, date or string to parse
+ * @throws Error if time is invalid
+ */
+declare function parseInstant(time: Temporal.Instant | Date | string): Temporal.Instant;
+export default parseInstant;
+//# sourceMappingURL=parseInstant.d.ts.map

package/dist/types/ui/RelativeTime/utils/parseInstant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseInstant.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/parseInstant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;GAIG;AACH,iBAAS,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,MAAM,oBAc3D;AAED,eAAe,YAAY,CAAC"}

package/dist/types/ui/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./GitDiffViewer/index.js";
+export * from "./EditableBlock/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-ds-app-launchpad",
-  "version": "0.9.0-experimental.5",
+  "version": "0.9.0-experimental.7",
   "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -41,6 +41,7 @@
     "@canonical/storybook-config": "^0.9.0-experimental.5",
     "@canonical/styles": "^0.9.0-experimental.2",
     "@canonical/utils": "^0.9.0-experimental.4",
+    "@js-temporal/polyfill": "^0.4.4",
     "highlight.js": "^11.11.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -68,5 +69,5 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^2.1.8"
   },
-  "gitHead": "bc797d0c134200c372d31a8db89659caba2d6384"
+  "gitHead": "33b2a02e8c6c1befb93d206175a321c33c2064e5"
 }