@robert-stackflow/oneui 0.1.0 → 0.3.0

package/components/ToastProvider.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { type ToastController, type ToastNotify } from "./createToaster";
 export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export type ToastTone = "neutral" | "success" | "info" | "warning" | "error";
 export type ToastAction = {
@@ -27,9 +28,8 @@ export type ToastMessage = {
     options?: ToastOptions;
     closing?: boolean;
 };
-type Notify = (message: string, options?: ToastOptions | ToastTone) => () => void;
-export declare function ToastProvider({ children }: {
+export declare function ToastProvider({ children, controller, }: {
     children: ReactNode;
+    controller?: ToastController;
 }): import("react").JSX.Element;
-export declare const useToast: () => Notify;
-export {};
+export declare const useToast: () => ToastNotify;

package/components/ToastProvider.js

@@ -1,42 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  useCallback,
   useContext,
-  useRef,
-  useState
+  useState,
+  useSyncExternalStore
 } from "react";
 import { useUIConfig } from "./UIProvider.js";
 import { Toast } from "./Toast.js";
+import {
+  createToaster
+} from "./createToaster.js";
 const Context = createContext(() => () => {
 });
-function ToastProvider({ children }) {
+const serverSnapshot = () => null;
+function ToastProvider({
+  children,
+  controller
+}) {
   const config = useUIConfig();
-  const [toast, setToast] = useState(null), counter = useRef(0);
-  const notify = useCallback((message, options) => {
-    const id = ++counter.current;
-    setToast({
-      message,
-      id,
-      options: typeof options === "string" ? { tone: options } : options
-    });
-    return () => setToast(
-      (current) => current?.id === id ? { ...current, closing: true } : current
-    );
-  }, []);
-  const clear = useCallback(
-    (id) => setToast((current) => current?.id === id ? null : current),
-    []
+  const [local] = useState(createToaster), source = controller || local;
+  const toast = useSyncExternalStore(
+    source.subscribe,
+    source.getSnapshot,
+    serverSnapshot
   );
-  return /* @__PURE__ */ jsxs(Context, { value: notify, children: [
+  return /* @__PURE__ */ jsxs(Context, { value: source.notify, children: [
     children,
     /* @__PURE__ */ jsx(
       Toast,
       {
         toast,
         position: toast?.options?.position || config.toastPosition,
-        onDismiss: clear
-      }
+        onDismiss: source.clear
+      },
+      source.id
     )
   ] });
 }

package/components/TreeGuides.d.ts

@@ -0,0 +1,9 @@
+/** Shared connector geometry for hierarchy menus and tables. */
+export declare function TreeGuides({ depth, continuations, last, expanded, indent, offset, }: {
+    depth: number;
+    continuations: boolean[];
+    last: boolean;
+    expanded?: boolean;
+    indent?: number;
+    offset?: number;
+}): import("react").JSX.Element;

package/components/TreeGuides.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./TreeGuides.module.css";
+function TreeGuides({
+  depth,
+  continuations,
+  last,
+  expanded,
+  indent = 24,
+  offset = 12
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: s.guides,
+      style: {
+        "--tree-indent": indent + "px",
+        "--tree-offset": offset + "px"
+      },
+      children: [
+        continuations.map(
+          (visible, i) => visible && /* @__PURE__ */ jsx("i", { className: s.line, style: { left: i * indent } }, i)
+        ),
+        depth > 0 && /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: s.elbow,
+            "data-last": last,
+            style: { left: (depth - 1) * indent }
+          }
+        ),
+        expanded && /* @__PURE__ */ jsx("i", { className: s.stem, style: { left: depth * indent } })
+      ]
+    }
+  );
+}
+export {
+  TreeGuides
+};

package/components/TreeGuides.module.css

@@ -0,0 +1,45 @@
+.guides {
+  position: absolute;
+  inset-block: 0;
+  left: var(--tree-offset);
+  width: 0;
+  pointer-events: none;
+  color: var(--line);
+}
+.line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid currentColor;
+}
+.elbow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--tree-indent);
+}
+.elbow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 50%;
+  left: 0;
+  right: var(--tree-elbow-gap, 0px);
+  border-left: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  border-bottom-left-radius: 8px;
+}
+.elbow:not([data-last="true"])::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid currentColor;
+}
+.stem {
+  position: absolute;
+  top: calc(50% + var(--tree-stem-inset, 0px));
+  bottom: 0;
+  border-left: 1px solid currentColor;
+}

package/components/TreeSelect.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type FieldOptions } from "./field";
 import { type HierarchyLoader, type HierarchyOption } from "./hierarchy";
 type Base = FieldOptions & {
@@ -8,6 +9,8 @@ type Base = FieldOptions & {
     placeholder?: string;
     loadChildren?: HierarchyLoader;
     defaultExpanded?: string[];
+    variant?: "tree" | "category";
+    icon?: ReactNode;
 };
 export type TreeSelectProps = Base & ({
     multiple?: false;

package/components/TreeSelect.js

@@ -1,5 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useRef, useState } from "react";
+import {
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { ChevronDown, Minus } from "lucide-react";
 import { SelectTrigger } from "./SelectTrigger.js";
 import { Popover } from "./Popover.js";
@@ -14,6 +19,8 @@ import {
   hierarchyMatches
 } from "./hierarchy.js";
 import s from "./HierarchyPicker.module.css";
+import { Badge } from "./Badge.js";
+import { TreeGuides } from "./TreeGuides.js";
 function TreeSelect(props) {
   const {
     options,
@@ -22,7 +29,8 @@ function TreeSelect(props) {
     clearable = true,
     placeholder = "\u8BF7\u9009\u62E9",
     loadChildren,
-    defaultExpanded = []
+    defaultExpanded = [],
+    variant = "tree"
   } = props;
   const field = useFieldControl(props), pop = usePopover(field.disabled || field.readOnly), id = useId(), list = useRef(null), [query, setQuery] = useState(""), [expanded, setExpanded] = useState(new Set(defaultExpanded)), [focused, setFocused] = useState("");
   const data = useHierarchy(options, loadChildren), selected = props.multiple ? props.value : props.value ? [props.value] : [];
@@ -34,6 +42,8 @@ function TreeSelect(props) {
       (entry) => (!matches || matches.has(entry.node.value)) && (query.trim() || entry.path.slice(0, -1).every((node) => expanded.has(node.value)))
     );
   }, [data.entries, query, expanded]);
+  const siblings = (entry) => entry.parent ? data.children(data.entries.get(entry.parent).node) || [] : options;
+  const last = (entry) => siblings(entry).at(-1)?.value === entry.node.value;
   const close = pop.closeAndFocus;
   const show = () => {
     if (field.disabled || field.readOnly) return;
@@ -115,6 +125,7 @@ function TreeSelect(props) {
         ...fieldTriggerProps(field),
         ref: pop.anchor,
         expanded: pop.open,
+        icon: props.icon,
         className: s.trigger,
         "aria-haspopup": "dialog",
         "aria-controls": id,
@@ -229,11 +240,13 @@ function TreeSelect(props) {
                         "aria-disabled": entry.disabled || void 0,
                         tabIndex: entry.node.value === active ? 0 : -1,
                         "data-value": entry.node.value,
-                        className: `${s.row} ${s.treeRow}`,
+                        className: `${s.row} ${s.treeRow} ${variant === "category" ? s.categoryRow : ""}`,
+                        "data-branch": entry.branch,
                         style: { "--level": entry.path.length - 1 },
                         label: entry.node.label,
                         description: query.trim() ? entry.path.slice(0, -1).map((n) => n.label).join(" / ") : void 0,
                         icon: entry.node.icon,
+                        meta: variant === "category" && entry.branch ? /* @__PURE__ */ jsx(Badge, { children: entry.node.count ?? data.children(entry.node)?.length ?? 0 }) : void 0,
                         selected: state === true,
                         selection: props.multiple ? "checkbox" : "check",
                         disabled: entry.disabled,
@@ -244,23 +257,38 @@ function TreeSelect(props) {
                           focus(entry.node.value);
                           choose(entry);
                         },
-                        prefix: entry.branch ? /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            tabIndex: -1,
-                            className: s.expander,
-                            "data-expanded": isExpanded,
-                            "aria-label": `${isExpanded ? "\u6298\u53E0" : "\u5C55\u5F00"} ${entry.node.label}`,
-                            disabled: entry.disabled || data.loading.has(entry.node.value),
-                            onClick: (event) => {
-                              event.stopPropagation();
-                              focus(entry.node.value);
-                              toggleExpand(entry);
-                            },
-                            children: data.loading.has(entry.node.value) ? /* @__PURE__ */ jsx(Spinner, { size: 12, decorative: true }) : /* @__PURE__ */ jsx(ChevronDown, {})
-                          }
-                        ) : /* @__PURE__ */ jsx("span", { className: s.spacer })
+                        prefix: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          variant === "category" && /* @__PURE__ */ jsx(
+                            TreeGuides,
+                            {
+                              depth: entry.path.length - 1,
+                              indent: 18,
+                              offset: 20,
+                              last: last(entry),
+                              expanded: entry.branch && isExpanded,
+                              continuations: entry.path.slice(1, -1).map(
+                                (node) => !last(data.entries.get(node.value))
+                              )
+                            }
+                          ),
+                          entry.branch ? /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              tabIndex: -1,
+                              className: s.expander,
+                              "data-expanded": isExpanded,
+                              "aria-label": `${isExpanded ? "\u6298\u53E0" : "\u5C55\u5F00"} ${entry.node.label}`,
+                              disabled: entry.disabled || data.loading.has(entry.node.value),
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                focus(entry.node.value);
+                                toggleExpand(entry);
+                              },
+                              children: data.loading.has(entry.node.value) ? /* @__PURE__ */ jsx(Spinner, { size: 12, decorative: true }) : /* @__PURE__ */ jsx(ChevronDown, {})
+                            }
+                          ) : /* @__PURE__ */ jsx("span", { className: s.spacer })
+                        ] })
                       }
                     ),
                     isExpanded && error && /* @__PURE__ */ jsxs("div", { role: "alert", className: s.error, children: [
@@ -282,7 +310,7 @@ function TreeSelect(props) {
           ),
           /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
             /* @__PURE__ */ jsx("span", { children: props.multiple ? `${selected.length} \u9879\u5DF2\u9009` : "" }),
-            /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: s.footerActions, children: [
               clearable && /* @__PURE__ */ jsx(
                 Button,
                 {

package/components/TreeTable.d.ts

@@ -0,0 +1,15 @@
+import { type Column } from "./Table";
+export type TreeTableProps<T, K extends string | number> = {
+    rows: T[];
+    columns: Column<T>[];
+    rowKey(row: T): K;
+    getChildren(row: T): T[] | undefined;
+    rowLabel(row: T): string;
+    label?: string;
+    treeColumn?: string;
+    expanded?: K[];
+    defaultExpanded?: K[];
+    defaultExpandAll?: boolean;
+    onExpandedChange?(keys: K[]): void;
+};
+export declare function TreeTable<T, K extends string | number>({ rows, columns, rowKey, getChildren, rowLabel, label, treeColumn, expanded, defaultExpanded, defaultExpandAll, onExpandedChange, }: TreeTableProps<T, K>): import("react").JSX.Element;

package/components/TreeTable.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { Table } from "./Table.js";
+import { IconButton } from "./IconButton.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import { TreeGuides } from "./TreeGuides.js";
+import s from "./TreeTable.module.css";
+function TreeTable({
+  rows,
+  columns,
+  rowKey,
+  getChildren,
+  rowLabel,
+  label = "\u5C42\u7EA7\u8868\u683C",
+  treeColumn = columns[0]?.key,
+  expanded,
+  defaultExpanded = [],
+  defaultExpandAll = false,
+  onExpandedChange
+}) {
+  const [local, setLocal] = useState(() => {
+    if (!defaultExpandAll) return defaultExpanded;
+    const keys2 = [], seen = /* @__PURE__ */ new Set();
+    const walk = (nodes) => nodes.forEach((row) => {
+      const key = rowKey(row);
+      if (seen.has(key)) return;
+      seen.add(key);
+      const children = getChildren(row);
+      if (children?.length) {
+        keys2.push(key);
+        walk(children);
+      }
+    });
+    walk(rows);
+    return keys2;
+  });
+  const keys = expanded ?? local, open = new Set(keys);
+  const root = useRef(null), [focused, setFocused] = useState();
+  const visible = useMemo(() => {
+    const entries = [], seen = /* @__PURE__ */ new Set();
+    const walk = (nodes, depth, continuations) => nodes.forEach((row, i) => {
+      const key = rowKey(row);
+      if (seen.has(key)) return;
+      seen.add(key);
+      const children = getChildren(row) || [], last = i === nodes.length - 1;
+      entries.push({
+        row,
+        key,
+        depth,
+        last,
+        continuations,
+        children,
+        position: i + 1,
+        size: nodes.length
+      });
+      if (children.length && open.has(key))
+        walk(
+          children,
+          depth + 1,
+          depth === 0 ? [] : [...continuations, !last]
+        );
+    });
+    walk(rows, 0, []);
+    return entries;
+  }, [rows, getChildren, rowKey, keys]);
+  const toggle = (key) => {
+    const next = open.has(key) ? keys.filter((k) => k !== key) : [...keys, key];
+    if (expanded === void 0) setLocal(next);
+    onExpandedChange?.(next);
+  };
+  const focus = (key) => {
+    setFocused(key);
+    const index = visible.findIndex((entry) => entry.key === key);
+    root.current?.querySelectorAll("tbody tr")[index]?.focus();
+  };
+  const active = visible.some((entry) => entry.key === focused) ? focused : visible[0]?.key;
+  return /* @__PURE__ */ jsx("div", { className: s.root, ref: root, children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      label,
+      role: "treegrid",
+      rows: visible,
+      rowKey: (entry) => typeof entry.key + ":" + String(entry.key),
+      rowAttributes: (entry) => ({
+        "aria-level": entry.depth + 1,
+        "aria-posinset": entry.position,
+        "aria-setsize": entry.size,
+        "aria-expanded": entry.children.length ? open.has(entry.key) : void 0,
+        "data-tree-root": entry.depth === 0,
+        tabIndex: entry.key === active ? 0 : -1,
+        onFocus: (event) => {
+          if (event.target === event.currentTarget) setFocused(entry.key);
+        },
+        onKeyDown: (event) => {
+          if (event.target !== event.currentTarget) return;
+          const index = visible.indexOf(entry);
+          let next;
+          if (event.key === "ArrowDown")
+            next = visible[Math.min(visible.length - 1, index + 1)];
+          else if (event.key === "ArrowUp")
+            next = visible[Math.max(0, index - 1)];
+          else if (event.key === "Home") next = visible[0];
+          else if (event.key === "End") next = visible.at(-1);
+          else if (event.key === "ArrowRight") {
+            if (entry.children.length && !open.has(entry.key))
+              toggle(entry.key);
+            else if (visible[index + 1]?.depth > entry.depth)
+              next = visible[index + 1];
+          } else if (event.key === "ArrowLeft") {
+            if (entry.children.length && open.has(entry.key))
+              toggle(entry.key);
+            else
+              next = visible.slice(0, index).reverse().find((parent) => parent.depth < entry.depth);
+          } else return;
+          event.preventDefault();
+          if (next) focus(next.key);
+        }
+      }),
+      columns: columns.map((column) => ({
+        key: column.key,
+        title: column.title,
+        align: column.align,
+        width: column.width,
+        render: (entry) => column.key !== treeColumn ? column.render(entry.row) : /* @__PURE__ */ jsxs("div", { className: s.cell, style: { paddingLeft: entry.depth * 24 }, children: [
+          /* @__PURE__ */ jsx(
+            TreeGuides,
+            {
+              depth: entry.depth,
+              continuations: entry.continuations,
+              last: entry.last
+            }
+          ),
+          entry.children.length ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: `${open.has(entry.key) ? "\u6298\u53E0" : "\u5C55\u5F00"} ${rowLabel(entry.row)}`,
+              className: s.expander,
+              onClick: () => toggle(entry.key),
+              "aria-expanded": open.has(entry.key),
+              children: /* @__PURE__ */ jsx(DisclosureChevron, { expanded: open.has(entry.key) })
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: s.spacer }),
+          /* @__PURE__ */ jsx("div", { className: s.content, children: column.render(entry.row) })
+        ] })
+      }))
+    }
+  ) });
+}
+export {
+  TreeTable
+};

package/components/TreeTable.module.css

@@ -0,0 +1,53 @@
+.root {
+  border: 1px solid var(--line);
+  border-radius: var(--card-radius);
+  background: var(--surface);
+  overflow: hidden;
+  box-shadow: var(--card-shadow, none);
+}
+.root table td {
+  padding: 0 18px;
+  border-bottom: 0;
+}
+.root table th {
+  padding: 14px 18px;
+}
+.root tr:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+.root table tr[data-tree-root="true"]:not(:first-child) td {
+  border-top: 1px solid var(--line);
+}
+.cell {
+  --tree-elbow-gap: 8px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 72px;
+  padding-block: 14px;
+  min-width: 260px;
+  white-space: normal;
+}
+.expander,
+.spacer {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 26px;
+}
+.content {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.expander svg {
+  width: 14px;
+  height: 14px;
+}
+.expander[aria-expanded="false"] svg {
+  rotate: -90deg;
+}
+.expander[aria-expanded="true"] svg {
+  rotate: 0deg;
+}

package/components/VirtualPickerList.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type LucideIconData } from "lucide-react";
 export type PickerCatalogItem = {
     id: string;
@@ -5,6 +6,7 @@ export type PickerCatalogItem = {
     search: string;
     glyph?: string;
     icon?: LucideIconData;
+    content?: ReactNode;
     variants?: {
         glyph: string;
         label: string;

package/components/VirtualPickerList.js

@@ -44,7 +44,7 @@ const Cell = memo(function Cell2({
         }
       },
       children: [
-        item.icon ? /* @__PURE__ */ jsx(Icon, { icon: item.icon }) : item.glyph,
+        item.content !== void 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.content }) : item.icon ? /* @__PURE__ */ jsx(Icon, { icon: item.icon }) : item.glyph,
         item.variants && item.variants.length > 1 && /* @__PURE__ */ jsx("span", { className: s.variantMark, "aria-hidden": "true" })
       ]
     }

package/components/VirtualPickerList.module.css

@@ -1,4 +1,8 @@
 .body {
+  --blocked-background: transparent;
+  --blocked-border: 0;
+  --blocked-selected: var(--selected);
+  --blocked-shadow: none;
   display: flex;
   gap: 12px;
   min-height: 0;

package/components/appearance.d.ts

@@ -1,6 +1,7 @@
 import type { UITheme, ColorMode } from "./ThemeProvider";
 import type { UIConfig } from "./UIProvider";
 export interface AppearancePreferences {
+    paletteVersion?: 2;
     designTheme: UITheme;
     mode: ColorMode;
     accent: string;

package/components/appearance.js

@@ -1,13 +1,14 @@
 function appearanceDefaults(designTheme = "minimal") {
   const blue = designTheme === "blue";
   return {
+    paletteVersion: 2,
     designTheme,
     mode: "system",
-    accent: blue ? "#5269b6" : "#303030",
+    accent: blue ? "#5067b8" : "#303030",
     lightBackground: "#ffffff",
-    darkBackground: blue ? "#19212e" : "#1e1e1f",
-    lightForeground: blue ? "#263149" : "#202020",
-    darkForeground: blue ? "#e0e7f2" : "#f4f4f5",
+    darkBackground: blue ? "#19212f" : "#1e1e1f",
+    lightForeground: blue ? "#25324a" : "#202020",
+    darkForeground: blue ? "#e1e8f4" : "#f4f4f5",
     font: "system",
     density: "comfortable",
     radius: blue ? 9 : 10,
@@ -21,6 +22,12 @@ function normalizeAppearance(input, fallback = "minimal") {
   const d = appearanceDefaults(
     x.designTheme === "minimal" || x.designTheme === "blue" ? x.designTheme : fallback
   );
+  const legacyBlue = d.designTheme === "blue" && x.paletteVersion !== 2 ? {
+    accent: "#5269b6",
+    darkBackground: "#19212e",
+    lightForeground: "#263149",
+    darkForeground: "#e0e7f2"
+  } : {};
   if (["light", "dark", "system"].includes(String(x.mode)))
     d.mode = x.mode;
   for (const key of [
@@ -30,8 +37,10 @@ function normalizeAppearance(input, fallback = "minimal") {
     "lightForeground",
     "darkForeground"
   ])
-    if (typeof x[key] === "string" && /^#[\da-f]{6}$/i.test(x[key]))
-      d[key] = x[key];
+    if (typeof x[key] === "string" && /^#[\da-f]{6}$/i.test(x[key])) {
+      if (x[key].toLowerCase() !== legacyBlue[key])
+        d[key] = x[key];
+    }
   if (["system", "Segoe UI", "Microsoft YaHei UI", "sans-serif"].includes(
     String(x.font)
   ))

package/components/calendarNow.d.ts

@@ -0,0 +1,5 @@
+/** Calendar fields, not an instant conversion; keep entered wall-clock values intact. */
+export declare function calendarNow(timeZone?: string, instant?: Date): {
+    date: string;
+    time: string;
+};

package/components/calendarNow.js

@@ -0,0 +1,27 @@
+import { dateKey } from "./dateConstraints.js";
+function calendarNow(timeZone, instant = /* @__PURE__ */ new Date()) {
+  if (!timeZone)
+    return {
+      date: dateKey(instant),
+      time: [instant.getHours(), instant.getMinutes(), instant.getSeconds()].map((part2) => String(part2).padStart(2, "0")).join(":")
+    };
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    numberingSystem: "latn",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hourCycle: "h23"
+  }).formatToParts(instant);
+  const part = (type) => parts.find((item) => item.type === type).value;
+  return {
+    date: part("year").padStart(4, "0") + "-" + part("month") + "-" + part("day"),
+    time: part("hour") + ":" + part("minute") + ":" + part("second")
+  };
+}
+export {
+  calendarNow
+};