@orianatech/pire 0.9.0 → 0.11.0

package/dist/components.css

@@ -481,6 +481,24 @@
 .pire-menu-section-title{display:block;padding:var(--sp-1) var(--sp-3);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary)}
 .pire-menu-separator{border:0;border-top:var(--border-w-hairline) solid var(--border-subtle);margin:var(--sp-1) 0}
 
+/* ---- DateRangePicker ------------------------------------------------------ */
+.pire-daterange-control{gap:var(--sp-1)}
+.pire-daterange-dash{color:var(--text-tertiary);flex:0 0 auto}
+/* Presets sit beside the calendar, and before it in the DOM so the keyboard reaches a shortcut
+   without arrowing through a month first. */
+.pire-daterange-dialog{display:flex;align-items:stretch}
+.pire-daterange-presets{display:flex;flex-direction:column;gap:var(--sp-0h);padding:var(--sp-2);border-right:1px solid var(--border-subtle);min-width:140px}
+.pire-daterange-preset{display:flex;align-items:center;min-height:var(--row-h-condensed);padding:0 var(--sp-2);border:0;border-radius:var(--radius-1);background:transparent;color:var(--text-primary);font:var(--type-body);text-align:left;cursor:pointer}
+.pire-daterange-preset[data-hovered]{background:var(--surface-hover)}
+.pire-daterange-preset[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:calc(var(--focus-offset) * -1)}
+/* Range highlighting comes off the data attributes React Aria puts on each cell. The two ends
+   carry the accent; the span between them uses the subtle pair so the ends stay legible as ends. */
+.pire-calendar-cell[data-selected]{background:var(--accent-subtle-bg);color:var(--accent-subtle-fg);border-radius:0}
+.pire-calendar-cell[data-selection-start]{background:var(--accent-bg);color:var(--text-on-accent);border-radius:var(--radius-1) 0 0 var(--radius-1)}
+.pire-calendar-cell[data-selection-end]{background:var(--accent-bg);color:var(--text-on-accent);border-radius:0 var(--radius-1) var(--radius-1) 0}
+.pire-calendar-cell[data-selection-start][data-selection-end]{border-radius:var(--radius-1)}
+.pire-calendar-cell[data-outside-visible-range]{visibility:hidden}
+
 /* ---- FileUpload / FileDropZone ------------------------------------------- */
 .pire-fileupload-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
 .pire-fileupload-item{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--row-h-condensed);padding:0 var(--sp-2);border:1px solid var(--border-subtle);border-radius:var(--radius-1);background:var(--surface-card)}
@@ -530,6 +548,96 @@
    the real header stays mounted above — which is what stops the grid resizing mid-reload. */
 .pire-table-loading{display:flex;flex-direction:column}
 
+/* ---- Charts --------------------------------------------------------------- */
+/* width:100% is load-bearing, not cosmetic. Bar lengths are percentages of the track, and a
+   percentage cannot resolve against an indefinite width — drop the chart into a flex container
+   with `align-items:flex-start` and every bar collapses to its 2px floor. */
+.pire-chart{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;min-width:0;width:100%}
+.pire-chart-head{display:flex;flex-direction:column;gap:var(--sp-1)}
+.pire-chart-title{font:var(--type-body-strong);color:var(--text-primary)}
+.pire-chart-desc{font:var(--type-caption);color:var(--text-secondary)}
+.pire-chart-empty{padding:var(--sp-10);text-align:center;color:var(--text-secondary);font:var(--type-body)}
+
+/* Legend text stays in ink; the swatch beside it is what carries identity. Colouring the label
+   to match its series is the commonest way a chart fails contrast. */
+.pire-chart-legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:0;padding:0;list-style:none}
+.pire-chart-legend-item{display:inline-flex;align-items:center;gap:var(--sp-2);font:var(--type-caption);color:var(--text-secondary)}
+.pire-chart-swatch{width:10px;height:10px;border-radius:var(--radius-1);flex:0 0 auto}
+
+/* ---- Charts: bars --------------------------------------------------------- */
+.pire-chart-bars{display:flex;gap:var(--sp-2)}
+.pire-chart-bars[data-orientation="horizontal"]{flex-direction:column}
+.pire-chart-bars[data-orientation="vertical"]{flex-direction:row;align-items:stretch;height:var(--pire-chart-height)}
+
+.pire-chart-group{display:flex;min-width:0}
+.pire-chart-bars[data-orientation="horizontal"] .pire-chart-group{align-items:center;gap:var(--sp-3)}
+.pire-chart-bars[data-orientation="vertical"] .pire-chart-group{flex:1 1 0;flex-direction:column-reverse;justify-content:flex-start;gap:var(--sp-2);min-width:0}
+
+.pire-chart-cat{font:var(--type-caption);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pire-chart-bars[data-orientation="horizontal"] .pire-chart-cat{flex:0 0 auto;width:var(--pire-chart-cat-width,120px);text-align:right}
+.pire-chart-bars[data-orientation="vertical"] .pire-chart-cat{text-align:center;width:100%}
+
+.pire-chart-val{font:var(--type-caption);font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
+.pire-chart-bars[data-orientation="horizontal"] .pire-chart-val{flex:0 0 auto;text-align:right;min-width:64px}
+/* Rides on top of its own bar, so the figure moves with the mark it describes. */
+.pire-chart-barval{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-block-end:var(--sp-1);font:var(--type-caption);font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
+
+/* The 2px gap is the spacer that keeps adjacent fills from reading as one mark. */
+.pire-chart-track{display:flex;gap:var(--sp-0h);flex:1 1 auto;min-width:0}
+.pire-chart-bars[data-orientation="horizontal"] .pire-chart-track{flex-direction:column;min-height:12px}
+/* The top padding is where a vertical bar's own value label sits — without it the tallest
+   bar's figure is clipped by the top of the plot. */
+.pire-chart-bars[data-orientation="vertical"] .pire-chart-track{flex-direction:row;align-items:flex-end;justify-content:center;flex:1 1 auto;min-height:0;padding-block-start:var(--sp-5)}
+.pire-chart-bars[data-stacked="true"][data-orientation="horizontal"] .pire-chart-track{flex-direction:row}
+/* flex-start, not the centre the unstacked rule sets: under column-reverse the main axis starts
+   at the bottom, which is where a stack has to sit. Centred, the whole column floats off its
+   own zero line and the shortest stacks drift furthest. */
+.pire-chart-bars[data-stacked="true"][data-orientation="vertical"] .pire-chart-track{flex-direction:column-reverse;align-items:stretch;justify-content:flex-start}
+
+/* Only the data end is rounded. Rounding the baseline end would lift the mark off its own
+   zero line and read as a value slightly above zero. */
+.pire-chart-bar{position:relative;background:var(--pire-bar-color);flex:0 0 auto}
+.pire-chart-bars[data-orientation="horizontal"] .pire-chart-bar{width:var(--pire-bar-size);min-height:10px;flex:1 1 auto;border-radius:0 var(--radius-2) var(--radius-2) 0;min-width:2px}
+.pire-chart-bars[data-orientation="vertical"] .pire-chart-bar{height:var(--pire-bar-size);flex:1 1 auto;max-width:40px;border-radius:var(--radius-2) var(--radius-2) 0 0;min-height:2px}
+.pire-chart-bars[data-stacked="true"][data-orientation="horizontal"] .pire-chart-bar{flex:0 0 var(--pire-bar-size);width:auto;border-radius:0}
+.pire-chart-bars[data-stacked="true"][data-orientation="vertical"] .pire-chart-bar{flex:0 0 var(--pire-bar-size);height:auto;border-radius:0}
+
+/* ---- Charts: lines -------------------------------------------------------- */
+.pire-chart-lines{position:relative;width:100%;min-width:0}
+.pire-chart-svg{display:block;overflow:visible}
+.pire-chart-grid line{stroke:var(--viz-grid);stroke-width:1}
+.pire-chart-tick text{font:var(--type-micro);fill:var(--text-tertiary);font-variant-numeric:tabular-nums}
+.pire-chart-line path{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.pire-chart-area{opacity:.14}
+/* A ring in the surface colour keeps overlapping markers from merging into one blob. */
+.pire-chart-marker circle{stroke:var(--surface-card);stroke-width:2}
+
+/* ---- Charts: hover -------------------------------------------------------- */
+.pire-chart-hover{position:absolute;display:flex}
+.pire-chart-band{position:relative;flex:1 1 0}
+.pire-chart-band::before{content:"";position:absolute;inset-block:0;left:50%;width:1px;background:var(--border-strong);opacity:0}
+.pire-chart-band:hover::before{opacity:1}
+
+/* CSS-only, because the plot is aria-hidden and the data table already carries every value —
+   this is a pointer affordance, not the accessible path to the numbers. */
+.pire-chart-tip{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px);display:flex;flex-direction:column;gap:2px;padding:var(--sp-2) var(--sp-3);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-2);box-shadow:var(--shadow-2);font:var(--type-caption);color:var(--text-primary);white-space:nowrap;opacity:0;pointer-events:none;z-index:1}
+.pire-chart-tip-row{font-variant-numeric:tabular-nums;color:var(--text-secondary)}
+.pire-chart-band:hover .pire-chart-tip,.pire-chart-bar:hover .pire-chart-tip{opacity:1}
+.pire-chart-bar .pire-chart-tip{bottom:auto;top:50%;left:100%;transform:translate(var(--sp-2),-50%)}
+
+/* ---- Charts: donut -------------------------------------------------------- */
+.pire-chart-donut{position:relative;display:flex;align-items:center;justify-content:center}
+.pire-chart-arc{fill:none;transition:opacity var(--dur-base) var(--ease-standard)}
+.pire-chart-arc[data-hovered="true"]{opacity:.78}
+.pire-chart-donut-center{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;pointer-events:none}
+.pire-chart-donut-value{font:var(--type-numeric);font-variant-numeric:tabular-nums;color:var(--text-primary)}
+.pire-chart-donut-caption{font:var(--type-caption);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
+
+.pire-chart-table table{width:100%;border-collapse:collapse;font:var(--type-caption)}
+.pire-chart-table caption{text-align:left;padding-block-end:var(--sp-2);color:var(--text-secondary)}
+.pire-chart-table th,.pire-chart-table td{padding:var(--sp-1) var(--sp-2);border-block-end:1px solid var(--border-subtle);text-align:left;color:var(--text-primary)}
+.pire-chart-table td{font-variant-numeric:tabular-nums}
+
 /* ---- Reduced motion --------------------------------------------------- */
 @media (prefers-reduced-motion: reduce){.pire-modal,.pire-toast,.pire-popover,.pire-tooltip,.pire-sidepanel{animation:none}
 /* The skeleton also drops its background sweep, not just the animation: an infinite shimmer is

package/dist/i18n/messages.d.cts

@@ -39,6 +39,8 @@ export interface PireMessages {
     datePickerOpenCalendar: string;
     datePickerPreviousMonth: string;
     datePickerNextMonth: string;
+    /** Groups the shortcut buttons beside the range calendar. */
+    dateRangePresetsLabel: string;
     /** Accessible names of the NumberField steppers. */
     numberFieldIncrease: string;
     numberFieldDecrease: string;
@@ -71,6 +73,12 @@ export interface PireMessages {
     fileUploadUploading: string;
     /** Instruction inside the drop surface. */
     fileDropZonePrompt: string;
+    /** Heading of the category column in a chart's data table. */
+    chartCategoryHeader: string;
+    /** Cell text where a chart series has no reading for a category. Never "0" — a gap is not a zero. */
+    chartNoValue: string;
+    /** Shown in place of the plot when a chart has nothing to draw. */
+    chartEmpty: string;
 }
 export declare const enMessages: PireMessages;
 export declare const esMessages: PireMessages;

package/dist/i18n/messages.d.ts

@@ -39,6 +39,8 @@ export interface PireMessages {
     datePickerOpenCalendar: string;
     datePickerPreviousMonth: string;
     datePickerNextMonth: string;
+    /** Groups the shortcut buttons beside the range calendar. */
+    dateRangePresetsLabel: string;
     /** Accessible names of the NumberField steppers. */
     numberFieldIncrease: string;
     numberFieldDecrease: string;
@@ -71,6 +73,12 @@ export interface PireMessages {
     fileUploadUploading: string;
     /** Instruction inside the drop surface. */
     fileDropZonePrompt: string;
+    /** Heading of the category column in a chart's data table. */
+    chartCategoryHeader: string;
+    /** Cell text where a chart series has no reading for a category. Never "0" — a gap is not a zero. */
+    chartNoValue: string;
+    /** Shown in place of the plot when a chart has nothing to draw. */
+    chartEmpty: string;
 }
 export declare const enMessages: PireMessages;
 export declare const esMessages: PireMessages;

package/dist/i18n/messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/i18n/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,cAAc,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,iBAAiB,EAAE,MAAM,CAAC;IAE1B,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oDAAoD;IACpD,gBAAgB,EAAE,MAAM,CAAC;IAEzB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,cAAc,EAAE,MAAM,CAAC;IAEvB,6DAA6D;IAC7D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,gBAAgB,EAAE,MAAM,CAAC;IAEzB,kEAAkE;IAClE,uBAAuB,EAAE,MAAM,CAAC;IAChC,mEAAmE;IACnE,eAAe,EAAE,MAAM,CAAC;IAExB,qEAAqE;IACrE,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAE5B,oDAAoD;IACpD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAE5B,kEAAkE;IAClE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qFAAqF;IACrF,uBAAuB,EAAE,MAAM,CAAC;IAChC,uEAAuE;IACvE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,yDAAyD;IACzD,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,qBAAqB,EAAE,MAAM,CAAC;IAE9B,mDAAmD;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,eAAe,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;IAE9B,0FAA0F;IAC1F,YAAY,EAAE,MAAM,CAAC;IAErB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,EAAE,YA6CxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YA6CxB,CAAC"}
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/i18n/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,cAAc,EAAE,MAAM,CAAC;IACvB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,iBAAiB,EAAE,MAAM,CAAC;IAE1B,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oDAAoD;IACpD,gBAAgB,EAAE,MAAM,CAAC;IAEzB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,cAAc,EAAE,MAAM,CAAC;IAEvB,6DAA6D;IAC7D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,gBAAgB,EAAE,MAAM,CAAC;IAEzB,kEAAkE;IAClE,uBAAuB,EAAE,MAAM,CAAC;IAChC,mEAAmE;IACnE,eAAe,EAAE,MAAM,CAAC;IAExB,qEAAqE;IACrE,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,qBAAqB,EAAE,MAAM,CAAC;IAE9B,oDAAoD;IACpD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAE5B,kEAAkE;IAClE,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qFAAqF;IACrF,uBAAuB,EAAE,MAAM,CAAC;IAChC,uEAAuE;IACvE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,yDAAyD;IACzD,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,qBAAqB,EAAE,MAAM,CAAC;IAE9B,mDAAmD;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,eAAe,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;IAE9B,0FAA0F;IAC1F,YAAY,EAAE,MAAM,CAAC;IAErB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAE3B,8DAA8D;IAC9D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,qGAAqG;IACrG,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,YAkDxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAkDxB,CAAC"}