@cratis/components 0.1.9 → 0.1.12

package/dist/esm/PivotViewer/index.d.ts

@@ -1,4 +1,5 @@
 import { PivotViewer } from './PivotViewer';
 export { PivotViewer, PivotViewer as PivotViewerOptimized };
-export type { PivotViewerProps, PivotDimension, PivotFilter, PivotFilterOption, PivotGroup, PivotPrimitive } from './types';
+export type { PivotViewerProps, PivotDimension, PivotFilter, PivotFilterOption, PivotGroup, PivotPrimitive, PropertyAccessor } from './types';
+export { getPropertyPath, getValueByPath } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/PivotViewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../PivotViewer/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,WAAW,IAAI,oBAAoB,EAAE,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../PivotViewer/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,WAAW,IAAI,oBAAoB,EAAE,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC9I,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/PivotViewer/index.js

@@ -1,2 +1,3 @@
 export { PivotViewer, PivotViewer as PivotViewerOptimized } from './PivotViewer.js';
+export { getPropertyPath, getValueByPath } from './types.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/PivotViewer/types.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
 export type PivotPrimitive = string | number | boolean | Date | null | undefined;
+export type PropertyAccessor<TItem> = (item: TItem) => unknown;
+export declare function getPropertyPath<TItem>(accessor: PropertyAccessor<TItem>): string;
+export declare function getValueByPath<TItem>(item: TItem, path: string): unknown;
 export interface PivotGroup<TItem extends object> {
     key: string;
     label: string;
@@ -37,7 +40,7 @@ export interface PivotViewerProps<TItem extends object> {
     defaultDimensionKey?: string;
     cardRenderer?: (item: TItem) => ReactNode;
     getItemId?: (item: TItem, index: number) => string | number;
-    searchFields?: (keyof TItem)[];
+    searchFields?: PropertyAccessor<TItem>[];
     className?: string;
     emptyContent?: ReactNode;
     isLoading?: boolean;

package/dist/esm/PivotViewer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../PivotViewer/types.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAEjF,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,MAAM;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc,CAAC,KAAK,SAAS,MAAM;IAClD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,cAAc,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAChD,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC;CAC/D;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW,CAAC,KAAK,SAAS,MAAM;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,cAAc,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,EAAE,CAAC,EAAE,iBAAiB,KAAK,MAAM,CAAC;IAE9D,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB,CAAC,KAAK,SAAS,MAAM;IACpD,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACpC,OAAO,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,SAAS,CAAC;IAC1C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../PivotViewer/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/PivotViewer/types.js

@@ -1,2 +1,19 @@
-export {};
-//# sourceMappingURL=types.js.map
+function getPropertyPath(accessor) {
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/(?:=>|return)\s*[a-zA-Z_$][a-zA-Z0-9_$]*\.([a-zA-Z_$][a-zA-Z0-9_$.]*)/);
+    return match ? match[1] : '';
+}
+function getValueByPath(item, path) {
+    const parts = path.split('.');
+    let value = item;
+    for (const part of parts) {
+        if (value === null || value === undefined) {
+            return undefined;
+        }
+        value = value[part];
+    }
+    return value;
+}
+
+export { getPropertyPath, getValueByPath };
+//# sourceMappingURL=types.js.map

package/dist/esm/PivotViewer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../PivotViewer/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sources":["../../../PivotViewer/types.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { ReactNode } from 'react';\n\nexport type PivotPrimitive = string | number | boolean | Date | null | undefined;\n\n/**\n * Type-safe property accessor for accessing properties, including nested ones\n */\nexport type PropertyAccessor<TItem> = (item: TItem) => unknown;\n\n/**\n * Extract property path from a property accessor function\n * Supports nested properties like item => item.address.city\n */\nexport function getPropertyPath<TItem>(accessor: PropertyAccessor<TItem>): string {\n    const fnStr = accessor.toString();\n    // Match patterns like: item => item.prop or item => item.prop.nested or (item) => item.prop\n    const match = fnStr.match(/(?:=>|return)\\s*[a-zA-Z_$][a-zA-Z0-9_$]*\\.([a-zA-Z_$][a-zA-Z0-9_$.]*)/)\n    return match ? match[1] : '';\n}\n\n/**\n * Get the value from an item using a property path string\n * Supports nested properties like \"address.city\"\n */\nexport function getValueByPath<TItem>(item: TItem, path: string): unknown {\n    const parts = path.split('.');\n    let value: any = item;\n    for (const part of parts) {\n        if (value === null || value === undefined) {\n            return undefined;\n        }\n        value = value[part];\n    }\n    return value;\n}\n\nexport interface PivotGroup<TItem extends object> {\n  key: string;\n  label: string;\n  value: PivotPrimitive;\n  items: TItem[];\n  count?: number;\n}\n\nexport interface PivotDimension<TItem extends object> {\n  key: string;\n  label: string;\n  getValue: (item: TItem) => PivotPrimitive;\n  formatValue?: (value: PivotPrimitive) => string;\n  sort?: (a: PivotGroup<TItem>, b: PivotGroup<TItem>) => number;\n}\n\nexport interface PivotFilterOption {\n  key: string;\n  label: string;\n  value: PivotPrimitive;\n  count: number;\n}\n\nexport interface PivotFilter<TItem extends object> {\n  key: string;\n  label: string;\n  getValue: (item: TItem) => PivotPrimitive;\n  multi?: boolean;\n  options?: PivotFilterOption[];\n  sort?: (a: PivotFilterOption, b: PivotFilterOption) => number;\n  /** For numeric filters, enables range picker with histogram */\n  type?: 'string' | 'number' | 'date';\n  /** Number of buckets for the histogram in range filters */\n  buckets?: number;\n}\n\nexport interface PivotViewerProps<TItem extends object> {\n  data: TItem[];\n  dimensions: PivotDimension<TItem>[];\n  filters?: PivotFilter<TItem>[];\n  defaultDimensionKey?: string;\n  cardRenderer?: (item: TItem) => ReactNode;\n  getItemId?: (item: TItem, index: number) => string | number;\n  searchFields?: PropertyAccessor<TItem>[];\n  className?: string;\n  emptyContent?: ReactNode;\n  isLoading?: boolean;\n}\n\nexport type FilterState = Record<string, Set<string>>;\n\nexport type RangeFilterState = Record<string, [number, number] | null>;\n"],"names":[],"mappings":"AAgBM,SAAU,eAAe,CAAQ,QAAiC,EAAA;AACpE,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE;IAEjC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,uEAAuE,CAAC;AAClG,IAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE;AAChC;AAMM,SAAU,cAAc,CAAQ,IAAW,EAAE,IAAY,EAAA;IAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;IAC7B,IAAI,KAAK,GAAQ,IAAI;AACrB,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACtB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;AACvC,YAAA,OAAO,SAAS;QACpB;AACA,QAAA,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;IACvB;AACA,IAAA,OAAO,KAAK;AAChB;;;;"}

package/dist/esm/TimeMachine/EventsView.css

@@ -0,0 +1,213 @@
+/* Events View Container */
+.events-view-container {
+    position: absolute;
+    inset: 0;
+    padding: 5rem 2rem 2rem;
+    overflow-y: auto;
+    background: transparent;
+    z-index: 1;
+}
+
+/* Timeline customization */
+.events-view-timeline {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2.5rem 0 3rem;
+}
+
+.events-view-timeline .p-timeline {
+    display: flex;
+    flex-direction: column;
+}
+
+.events-view-scroll-button {
+    position: relative;
+    margin-right: 0.5rem;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: rgba(15, 23, 42, 0.75);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    z-index: 5;
+    pointer-events: auto;
+}
+
+.events-view-scroll-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
+}
+
+.events-view-scroll-button:active {
+    transform: translateY(0);
+}
+
+.events-view-scroll-button--top {
+    top: auto;
+}
+
+.events-view-scroll-button--bottom {
+    bottom: auto;
+}
+
+.events-view-scroll-button-wrapper {
+    position: sticky;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 0.5rem;
+    pointer-events: none;
+    z-index: 5;
+    height: 0;
+    overflow: visible;
+}
+
+.events-view-scroll-button-wrapper--top {
+    top: 4.5rem;
+}
+
+.events-view-scroll-button-wrapper--bottom {
+    bottom: 2.5rem;
+}
+
+/* Event Card */
+.events-view-event-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 1.5rem;
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+    max-width: 380px;
+}
+
+.events-view-event-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(100, 150, 255, 0.3);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* Event Header */
+.events-view-event-header {
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.events-view-event-name {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #fff;
+    margin: 0 0 0.5rem 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
+}
+
+.events-view-event-timestamp {
+    font-size: 0.875rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
+}
+
+.events-view-event-header--right {
+    text-align: right;
+}
+
+.events-view-event-name--right,
+.events-view-event-timestamp--right {
+    text-align: right;
+}
+
+/* Event Properties */
+.events-view-event-properties {
+    margin-top: 1rem;
+}
+
+/* Custom Marker */
+.events-view-marker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: linear-gradient(135deg, rgba(100, 150, 255, 0.2), rgba(100, 150, 255, 0.1));
+    border: 2px solid rgba(100, 150, 255, 0.5);
+    border-radius: 50%;
+    position: relative;
+    backdrop-filter: blur(5px);
+    transition: all 0.3s ease;
+}
+
+.events-view-marker:hover {
+    background: linear-gradient(135deg, rgba(100, 150, 255, 0.4), rgba(100, 150, 255, 0.2));
+    border-color: rgba(100, 150, 255, 0.8);
+    transform: scale(1.1);
+}
+
+.events-view-marker-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    background: rgba(100, 150, 255, 0.9);
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(100, 150, 255, 0.5);
+}
+
+/* PrimeReact Timeline connector styling */
+.events-view-timeline .p-timeline-event-connector {
+    background: linear-gradient(to bottom, rgba(100, 150, 255, 0.6), rgba(100, 150, 255, 0.4));
+}
+
+.events-view-timeline .p-timeline-event:last-child .p-timeline-event-connector {
+    visibility: hidden;
+}
+
+/* Remove default padding from PrimeReact timeline content areas */
+.events-view-timeline .p-timeline-event-opposite,
+.events-view-timeline .p-timeline-event-content {
+    padding: 0 1.5rem;
+    display: flex;
+    align-items: center;
+}
+
+/* Ensure cards hug the timeline on both sides */
+.events-view-timeline .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+    justify-content: flex-start;
+}
+
+.events-view-timeline .p-timeline-event:nth-child(even) .p-timeline-event-content {
+    justify-content: flex-end;
+}
+
+.events-view-timeline .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+    justify-content: flex-end;
+}
+
+.events-view-timeline .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+    justify-content: flex-start;
+}
+
+.events-view-event-card--left,
+.events-view-event-card--right {
+    max-width: 380px;
+}
+
+/* Right-align content in left-side cards */
+.events-view-timeline .p-timeline-event-opposite .events-view-event-card {
+    text-align: right;
+}
+
+.events-view-timeline .p-timeline-event-opposite .events-view-event-card table {
+    margin-left: auto;
+    direction: rtl;
+}
+
+.events-view-timeline .p-timeline-event-opposite .events-view-event-card table td {
+    direction: ltr;
+    text-align: right;
+}
+