panelui-native 0.61.1 → 0.63.0

package/src/index.ts

@@ -556,6 +556,87 @@ export {
   type PieChartStatus,
   type PieDatum,
 } from './components/pie-chart';
+export {
+  LiveLineChart,
+  useLiveLineChart,
+  type LiveLineChartProps,
+  type LiveLineChartHandle,
+  type LiveLineChartHeaderProps,
+  type LiveLineChartGridProps,
+  type LiveLineChartAreaProps,
+  type LiveLineChartLineProps,
+  type LiveLineChartTipProps,
+  type LiveLineChartXAxisProps,
+  type LiveLineChartYAxisProps,
+  type LiveLineChartTooltipProps,
+  type LiveLineChartSkeletonProps,
+  type LiveLineChartStatus,
+  type LiveLineMomentum,
+  type LiveLineMomentumColors,
+  type LiveLinePoint,
+} from './components/live-line-chart';
+export {
+  PolarAreaChart,
+  usePolarAreaChart,
+  type PolarAreaChartProps,
+  type PolarAreaChartHandle,
+  type PolarAreaChartHeaderProps,
+  type PolarAreaChartGridProps,
+  type PolarAreaChartWedgesProps,
+  type PolarAreaChartLabelsProps,
+  type PolarAreaChartTooltipProps,
+  type PolarAreaChartLegendProps,
+  type PolarAreaChartSkeletonProps,
+  type PolarAreaChartStatus,
+  type PolarAreaScale,
+  type PolarAreaDatum,
+} from './components/polar-area-chart';
+export {
+  Plot,
+  usePlot,
+  usePlotCursor,
+  type PlotProps,
+  type PlotHandle,
+  type PlotGeometry,
+  type PlotHeaderProps,
+  type PlotLegendProps,
+  type PlotGridProps,
+  type PlotSeriesProps,
+  type PlotLineProps,
+  type PlotAreaProps,
+  type PlotBarsProps,
+  type PlotDotsProps,
+  type PlotRuleProps,
+  type PlotLayerProps,
+  type PlotOverlayProps,
+  type PlotXAxisProps,
+  type PlotYAxisProps,
+  type PlotCursorProps,
+  type PlotTooltipProps,
+  type PlotDatum,
+  type PlotStatus,
+  type PlotCurve,
+  type PlotScale,
+  type PlotBound,
+  type PlotBox,
+} from './components/plot';
+/*
+ * The scale functions, alongside the component they exist for. Every one is a
+ * worklet, which is what lets a mark somebody writes themselves be rebuilt on
+ * the UI thread on the same frames `Plot`'s own are.
+ */
+export {
+  areaPath,
+  bandOf,
+  barPath,
+  compactNumber,
+  linePath,
+  segment,
+  xAt,
+  xOf,
+  yOf,
+  type ChartPoint,
+} from './components/plot';
 export { Textarea, type TextareaProps } from './components/textarea';
 export {
   TagInput,

package/src/utils/chart.ts

@@ -130,6 +130,50 @@ const INK_FLOOR = 3;
  * the colour it was given. Compositing happens in gamma space, the way the
  * renderer does it, before the luminance is taken.
  */
+/** A colour moved `amount` of the way towards white, or towards black when negative. */
+function tone(color: string, amount: number): string {
+  const rgb = channelsOf(color);
+  if (!rgb) return color;
+
+  const target = amount >= 0 ? 255 : 0;
+  const t = Math.min(Math.abs(amount), 0.85);
+  const [r, g, b] = rgb.map((c) => Math.round(c + (target - c) * t));
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+/**
+ * The colour for the `index`th thing in a chart that draws an unbounded number
+ * of them.
+ *
+ * There are five series tokens, and a chart is routinely asked to draw six
+ * things. Taking the palette modulo its length hands two of them the identical
+ * colour, which in a chart whose whole job is telling parts apart is a bug the
+ * theme decides the severity of — on a theme whose first token is green, the
+ * sixth wedge is a second green one.
+ *
+ * So each further lap through the palette is drawn a step further along a tone
+ * run, keeping the theme's own hues rather than inventing new ones.
+ *
+ * The run goes *away* from whichever end the colour already sits near, and
+ * always in that one direction. Alternating lighter and darker would be the
+ * obvious thing and it reintroduces the bug on the themes that matter: a token
+ * of `#fafafa` lightened is `#fafafa` back again, so the second lap of a
+ * near-white palette entry is the same colour it was trying not to be.
+ */
+export function seriesColorAt(palette: string[], index: number): string {
+  if (!palette.length) return FALLBACK_SERIES[0]!;
+
+  const base = palette[index % palette.length]!;
+  const lap = Math.floor(index / palette.length);
+  if (lap <= 0) return base;
+
+  const rgb = channelsOf(base);
+  const away = rgb && luminanceOf(rgb) > 0.4 ? -1 : 1;
+  // Each lap covers two thirds of what is left, so every one lands somewhere
+  // the last did not.
+  return tone(base, away * (1 - 0.66 ** lap));
+}
+
 export function inkOn(fill: string, behind?: string, opacity = 1): ChartInk {
   const front = channelsOf(fill);
   if (!front) return LIGHT_INK;

package/theme.css

@@ -56,6 +56,18 @@
    */
   --color-overlay: unset;
   --color-overlay-foreground: unset;
+  /*
+   * A band set *into* a surface rather than raised off it — the footer of
+   * actions under a card or a dialog.
+   *
+   * A translucent black in every theme, rather than a colour of its own,
+   * because it has to come out darker than whatever it is drawn on and that
+   * changes: a card, a popover, or a surface the caller passed in. `--color-
+   * muted` cannot do this job — it is white in a dark theme, so the band it
+   * draws floats forward instead of sinking, which is the opposite of what a
+   * footer is saying.
+   */
+  --color-inset: unset;
   --color-primary: unset;
   --color-primary-foreground: unset;
   --color-secondary: unset;
@@ -194,6 +206,8 @@
 
       --color-overlay: #ffffff;
       --color-overlay-foreground: #262626;
+      /* the sunken band under a card or dialog: black at 3.5% */
+      --color-inset: rgba(0, 0, 0, 0.035);
 
       --color-primary: #262626;
       --color-primary-foreground: #fafafa;
@@ -289,6 +303,8 @@
       /* color-mix(background 92%, white) — one step past the popover */
       --color-overlay: #232323;
       --color-overlay-foreground: #f5f5f5;
+      /* the sunken band under a card or dialog: black at 22% */
+      --color-inset: rgba(0, 0, 0, 0.22);
 
       --color-primary: #f5f5f5;
       --color-primary-foreground: #262626;
@@ -413,6 +429,8 @@
 
       --color-overlay: #ffffff;
       --color-overlay-foreground: #08090a;
+      /* the sunken band under a card or dialog: black at 3.5% */
+      --color-inset: rgba(0, 0, 0, 0.035);
 
       --color-primary: #5e6ad2;
       --color-primary-foreground: #ffffff;
@@ -496,6 +514,8 @@
 
       --color-overlay: #18191a;
       --color-overlay-foreground: #f7f8f8;
+      /* the sunken band under a card or dialog: black at 22% */
+      --color-inset: rgba(0, 0, 0, 0.22);
 
       --color-primary: #5e6ad2;
       --color-primary-foreground: #ffffff;
@@ -583,6 +603,8 @@
 
       --color-overlay: #ffffff;
       --color-overlay-foreground: #171717;
+      /* the sunken band under a card or dialog: black at 3.5% */
+      --color-inset: rgba(0, 0, 0, 0.035);
 
       /* Brand green is too light for white text; light mode uses the
          darker ramp step so the contrast ratio holds. */
@@ -668,6 +690,8 @@
 
       --color-overlay: #2a2a2a;
       --color-overlay-foreground: #ededed;
+      /* the sunken band under a card or dialog: black at 22% */
+      --color-inset: rgba(0, 0, 0, 0.22);
 
       --color-primary: #3ecf8e;
       --color-primary-foreground: #052e1b;