@graphysdk/theme-shiny 0.0.0-stage → 0.1.0

package/dist/renderer/area.d.ts

@@ -0,0 +1,9 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+import { Finish } from './finish';
+/**
+ * Each area a sheet in the finish in its group's colour, its rim widest along its upper edge, the edge
+ * that is its value. The hovered reading wears a round piece of the finish.
+ */
+export declare const defineArea: (finish: Finish) => ResolvedGeomRenderer;
+/** A filled radar as a sheet in the finish, its widest rim all the way round. */
+export declare const defineRadarArea: (finish: Finish) => ResolvedGeomRenderer;

package/dist/renderer/bar.d.ts

@@ -0,0 +1,8 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+import { Finish } from './finish';
+/**
+ * Each bar a piece in the finish filling exactly the bar's own rectangle. Its corners round inside the
+ * rectangle, so its end is flat at exactly its value. A bar in a stack is a piece of its own. The
+ * hovered bar is ruled in light.
+ */
+export declare const defineBar: (finish: Finish) => ResolvedGeomRenderer;

package/dist/renderer/finish.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { StyleState } from '@graphysdk/react';
+import { PixelSize } from './utils/projections';
+import { MaterialIds } from './material';
+import { LinePaint, ShapePaint } from './paint';
+/** One filled piece: a bar, a slice, a tile, a point or an area. */
+export interface CellProps {
+    /** Unique to the piece, for the clip and the gradients it defines. */
+    id: string;
+    ids: MaterialIds;
+    /** The piece's outline, which is the data's shape. */
+    path: string;
+    paint: ShapePaint;
+    /** How wide the finish's rim is round this piece, as the piece's size asks. */
+    rimWidth: number;
+    /** A path along an edge where the rim runs wider: a pin's bezel, or an area's upper edge. */
+    cap?: string;
+    capWidth?: number;
+    /** A bar's end that is its value, which a finish may mark; only a bar that ends its stack has one. */
+    valueEnd?: string;
+    /** Whether the piece's colour is its value, as a tile's is, so the finish keeps it even. */
+    isEven?: boolean;
+    state?: StyleState;
+}
+/** One line, through its readings. */
+export interface TubeProps {
+    /** Unique to the line, for any gradient it defines. */
+    id: string;
+    ids: MaterialIds;
+    path: string;
+    paint: LinePaint;
+    panel: PixelSize;
+    /** The blur a finish may glow the line with, written once for the layer. */
+    glowId: string;
+}
+/** How wide a finish draws its rims on each kind of mark, from the mark's size in pixels. */
+export interface FinishRims {
+    bar: (breadth: number) => number;
+    /** How round a bar's corners are; they curve inside its rectangle, so its end stays at its value. */
+    barCorner: (breadth: number) => number;
+    tile: (size: number) => number;
+    tileCorner: number;
+    /** The card left showing between two tiles. */
+    tileGap: number;
+    bead: (diameter: number) => number;
+    /** A slice of a pie or a donut, from the ring's width. */
+    ringSlice: (width: number) => number;
+    /** A rose's petal or a radial bar's track, from its width. */
+    petal: (width: number) => number;
+    areaSide: number;
+    areaValue: number;
+}
+/** What a pie or a donut adds round its slices, as an enamel pin. */
+export interface FinishPin {
+    /** Whether its outer edge is a wide bezel of the holographic colours cut with rays. */
+    hasBezel: boolean;
+    /** Whether it glows behind in the pink to blue of the mascot's ring. */
+    hasGlow: boolean;
+    /** The enamel a donut's hole is filled with, or `null` to leave the card showing. */
+    hole: string | null;
+}
+export interface Finish {
+    Cell: (props: CellProps) => ReactNode;
+    Tube: (props: TubeProps) => ReactNode;
+    rims: FinishRims;
+    pin: FinishPin;
+}

package/dist/renderer/finishes/flat.d.ts

@@ -0,0 +1,3 @@
+import { Finish } from '../finish';
+/** Flat colours with no finish on any mark, the card's foil border being the one holographic moment. */
+export declare const FLAT_FINISH: Finish;

package/dist/renderer/line.d.ts

@@ -0,0 +1,9 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+import { Finish } from './finish';
+/**
+ * A line drawn in the finish in its group's colour, its middle through every reading. The hovered
+ * reading wears a round piece of the finish.
+ */
+export declare const defineLine: (finish: Finish) => ResolvedGeomRenderer;
+/** A radar's outline as a closed line in the finish. */
+export declare const defineRadarLine: (finish: Finish) => ResolvedGeomRenderer;

package/dist/renderer/material.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { PixelSize } from './utils/projections';
+export declare const MOST_RIM = 6;
+/** The white of the light caught on the glass. */
+export declare const LIGHT: "#FFFBFF";
+/** The near-black of the glass's shadowed rim, and of a pin's black enamel. */
+export declare const SHADE: "#0C0B0F";
+/** An id a `url()` can name: React's own holds characters one cannot. */
+export declare const useDefId: (prefix: string) => string;
+/** The thick rim of a piece of glass `breadth` pixels across its narrow way. */
+export declare const readRimWidth: (breadth: number) => number;
+/** `color` moved `amount` of the way to `target`; a colour that is not six-digit hex is returned as it is. */
+export declare const mixColors: (color: string, target: string, amount: number) => string;
+/** The ids of the light a layer's pieces are drawn with, written once for the layer. */
+export interface MaterialIds {
+    foil: string;
+    rimLight: string;
+    rimShade: string;
+    gloss: string;
+    catchlight: string;
+    reflection: string;
+}
+export declare const toMaterialIds: (id: string) => MaterialIds;
+/**
+ * The rim's refracted colours and the light on the glass. The colours are measured on the panel and
+ * repeat, reflected, so they flow without a seam; the light is measured on each piece, so every piece
+ * is lit from its own top left, as each of a tray of glass beads catches the light.
+ */
+export declare const Material: ({ ids, panel }: {
+    ids: MaterialIds;
+    panel: PixelSize;
+}) => ReactNode;
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * A closed path round a rectangle in panel pixels, its corners rounded by `radius`. Each straight side
+ * still lies on the rectangle's own edge, so a bar's end is flat at exactly its value.
+ */
+export declare const toRoundedRectPath: ({ x, y, width, height }: Rect, radius: number) => string;
+/** A closed path round a circle, as two half arcs. */
+export declare const toCirclePath: (cx: number, cy: number, radius: number) => string;
+export {};

package/dist/renderer/paint.d.ts

@@ -0,0 +1,21 @@
+import { Observation, SceneLayerFor, StyleState } from '@graphysdk/react';
+/** What a filled shape is drawn with. */
+export interface ShapePaint {
+    color: string;
+    opacity: number;
+    fillOpacity: number;
+    /** The edge that parts it from its neighbours, or rules it when hovered. */
+    edge: string;
+    edgeWidth: number;
+}
+/** What a line is drawn with. */
+export interface LinePaint {
+    color: string;
+    opacity: number;
+    width: number;
+    dashArray: string | undefined;
+}
+export type ReadShapePaint = (observation: Observation, state?: StyleState) => ShapePaint;
+export type ReadLinePaint = (observation: Observation, state?: StyleState) => LinePaint;
+export declare const useShapePaint: (layer: SceneLayerFor<"bar" | "point" | "tile" | "area">) => ReadShapePaint;
+export declare const useLinePaint: (layer: SceneLayerFor<"line">) => ReadLinePaint;

package/dist/renderer/plugins.d.ts

@@ -0,0 +1,10 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+import { Finish } from './finish';
+/**
+ * Every built-in geom a version of the theme repaints, under each coordinate system it is drawn in, all
+ * in one finish. Positions, scales and axes come from the compiled layer unchanged, and colour and
+ * opacity come from the stylesheet, so `style.geom.*` still decides each piece's colour.
+ */
+export declare const createShinyPlugins: (finish: Finish) => readonly ResolvedGeomRenderer[];
+/** The repaints of every built-in geom, as flat marks inside the card's foil border. */
+export declare const shinyPlugins: readonly ResolvedGeomRenderer[];

package/dist/renderer/point.d.ts

@@ -0,0 +1,9 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+import { Finish } from './finish';
+/**
+ * Scatter and bubble: each point a round piece in the finish, centred exactly on its reading and as
+ * wide as its size. The hovered point grows and is ruled in light.
+ */
+export declare const definePoint: (finish: Finish) => ResolvedGeomRenderer;
+/** A radar's vertices as round pieces in the finish. */
+export declare const defineRadarPoint: (finish: Finish) => ResolvedGeomRenderer;

package/dist/renderer/slice.d.ts

@@ -0,0 +1,8 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+import { Finish } from './finish';
+/**
+ * Pie, donut, rose and radial bar as pieces in the finish, each in its group's colour; a pie or a donut
+ * made as a pin where the finish asks. Every slice keeps its angle and radius. The hovered slice is
+ * ruled in light.
+ */
+export declare const defineSlice: (finish: Finish) => ResolvedGeomRenderer;

package/dist/renderer/tile.d.ts

@@ -0,0 +1,7 @@
+import { ResolvedGeomRenderer } from '@graphysdk/react';
+import { Finish } from './finish';
+/**
+ * Heatmap and waffle as small tiles in the finish, each kept one even colour from the colormap so its
+ * value reads true, parted from its neighbours by a sliver of the card. The hovered tile is ruled in light.
+ */
+export declare const defineTile: (finish: Finish) => ResolvedGeomRenderer;

package/dist/renderer/trace.d.ts

@@ -0,0 +1,19 @@
+import { Observation, SceneLayer, XYPoint } from '@graphysdk/react';
+import { PixelSize, Projection } from './utils/projections';
+/** One group's path in panel pixels, with the observation its paint is read for. */
+export interface Trace {
+    key: string;
+    path: string;
+    observation: Observation;
+}
+/** One trace per group, from whatever turns a group's observations into its path. */
+export declare const readTraces: (layer: SceneLayer, buildPath: (observations: Observation[]) => string | null) => Trace[];
+/** A radar group's vertices in panel pixels, in angular order so its outline never crosses itself. */
+export declare const readRadarPoints: (observations: Observation[], panel: PixelSize) => XYPoint[];
+export declare const buildRadarPath: (observations: Observation[], panel: PixelSize) => string | null;
+/** Each reading of every group in panel pixels, with the observation it is read from. */
+export declare const readReadings: (layer: SceneLayer, panel: PixelSize, project: Projection) => Array<{
+    key: string;
+    observation: Observation;
+    point: XYPoint;
+}>;

package/dist/renderer/utils/paths.d.ts

@@ -0,0 +1,7 @@
+import { PixelSize } from './projections';
+/**
+ * A path written in the unit square, in the panel's pixels. A shape is measured in pixels on every
+ * side, which a path stretched by a transform is not. Reads the commands a line or an area is written
+ * in; an arc is not one of them.
+ */
+export declare const scalePathToPanel: (path: string, panel: PixelSize) => string;

package/dist/renderer/utils/projections.d.ts

@@ -0,0 +1,16 @@
+import { Observation, XYPoint } from '@graphysdk/react';
+export interface PixelSize {
+    width: number;
+    height: number;
+}
+export interface PixelRect extends PixelSize {
+    x: number;
+    y: number;
+}
+/** Where an observation is drawn in the panel, in pixels; `null` for one missing a position. */
+export type Projection = (observation: Observation, panel: PixelSize) => XYPoint | null;
+export declare const projectCartesian: Projection;
+export declare const projectPolar: Projection;
+/** The whole panel, for a shape that may reach any part of it. */
+export declare const toPanelBounds: (panel: PixelSize) => PixelRect;
+export declare const toClosedPath: (points: XYPoint[]) => string;

package/dist/shiny.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@graphysdk/react';
+/**
+ * Graphs on a dark card scattered with faint stars, inside one holographic border: a band of foil running
+ * round the card's edge, as an enamel pin wears an iridescent rim round its black disc, and nothing
+ * holographic inside it. Every mark is one clean flat colour, slices and stacked bars parted by a hairline
+ * of the card, lines with a soft glow. Groups take the theme's named colours, Pulse pink, Sirius cyan and
+ * Lagoon violet first. Notes are set in terminal windows, and whatever an author points at is in Pulse.
+ * Drawn for the dark scheme only.
+ *
+ * Headings are set in Inter Tight and small type in JetBrains Mono. Import
+ * `@graphysdk/theme-shiny/fonts.css` once to load them.
+ *
+ * @example
+ *   const kit = createGraphyKit({ theme: shiny });
+ */
+export declare const shiny: Theme;

package/dist/styles.d.ts

@@ -0,0 +1,78 @@
+import { Stylesheet } from '@graphysdk/react';
+/** The theme's named colours. */
+export declare const SHINY_NAMED: {
+    readonly pulse: "#E94FF3";
+    readonly nebula: "#EC9BFF";
+    readonly starlight: "#FFFBFF";
+    readonly sirius: "#9AF2FF";
+    readonly lagoon: "#9F98FF";
+    readonly void: "#0C0B0F";
+    readonly obsidian: "#1A1721";
+};
+/**
+ * The holographic colours the glass refracts into, lilac to pink to cyan to mint to lavender, as
+ * a glass rim and a foil edge do. A finish on marks, never a
+ * group's colour.
+ */
+export declare const FOIL_COLORS: readonly ["#B9A2FF", "#FF9DE4", "#8DEEFF", "#9FFCCD", "#C6ADFF"];
+export declare const SHINY_COLORS: {
+    readonly ground: "#1A1721";
+    readonly window: "#121017";
+    readonly text: "#FFFBFF";
+    readonly secondary: "#B3ABC4";
+    readonly edge: "rgba(255, 251, 255, 0.12)";
+    readonly grid: "rgba(236, 155, 255, 0.11)";
+    readonly baseline: "rgba(255, 251, 255, 0.32)";
+    readonly star: "#FFFBFF";
+    readonly accent: "#E94FF3";
+    readonly accentEdge: "rgba(233, 79, 243, 0.6)";
+};
+export declare const CARD_CORNER_RADIUS = 20;
+/**
+ * The order groups take their colours in: Pulse pink first, then Sirius cyan and Lagoon
+ * violet, which differ from it and each other in hue and lightness, then Nebula and a mint caught from
+ * the glass. Starlight, nearly white, comes last, so it only appears when six groups need it and never
+ * sits as a stark white piece among the first five.
+ */
+export declare const SHINY_PALETTE: readonly string[];
+/** For a colour that stands for a number: from a violet barely off the card, through Pulse, to a pale blush. */
+export declare const SHINY_COLORMAP: readonly string[];
+/** How much of its colour an area's glass shows, so the grid behind it is softened but not lost. */
+export declare const AREA_FILL_ALPHA = 0.88;
+/** Everything the stylesheet takes from the card it is drawn on. */
+export interface Tone {
+    /** The card, as a data URI for the graph's fill, and the one colour that stands for it. */
+    card: string;
+    ground: string;
+    edge: string;
+    text: string;
+    secondary: string;
+    grid: string;
+    baseline: string;
+    /** What an author points at, and its hairline. */
+    accent: string;
+    accentEdge: string;
+    /** The terminal window notes are set in, and the glow it throws. */
+    window: string;
+    windowGlow: string;
+    hoverGuideFill: string;
+    tooltipPrimaryRow: string;
+    /** How strongly a shaded period's holographic wash shows on the card. */
+    washAlpha: number;
+}
+/** The sizes a version of the theme gives its lines and points, which its finish asks for. */
+export interface MarkSizes {
+    lineWidth: number;
+    pointSize: number;
+}
+/** The dark Obsidian card with faint stars, and the colours that read on it. */
+export declare const DARK_TONE: Tone;
+/**
+ * The Shiny look on a card: no frame, a faint grid for the values and a baseline, headings in a
+ * heavy grotesk and everything small in a monospace, the accent for whatever an author points at, and
+ * notes in terminal windows. The marks are drawn by the finish; the stylesheet
+ * gives each its colour and size.
+ */
+export declare const buildShinyStyles: (tone: Tone, marks: MarkSizes) => Stylesheet;
+/** The dark starred card with the holographic foil border drawn over its edge in place of a stroke. */
+export declare const shinyStyles: Stylesheet;

package/fonts.css

@@ -0,0 +1,2 @@
+/* Inter Tight for headings and JetBrains Mono for small type, the faces the theme's stylesheet names. Import this once, before the first graph is measured. */
+@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

package/licenses/PolyForm-Free-Trial-1.0.0.md

@@ -0,0 +1,93 @@
+# PolyForm Free Trial License 1.0.0
+
+<https://polyformproject.org/licenses/free-trial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the software
+to do everything you might do with the software that would
+otherwise infringe the licensor's copyright in it for any
+permitted purpose. However, you may only make changes or
+new works based on the software according to [Changes and New
+Works License](#changes-and-new-works-license), and you may
+not distribute copies of the software.
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## Free Trial
+
+Use to evaluate whether the software suits a particular
+application for less than 32 consecutive calendar days, on
+behalf of you or your company, is use for a permitted purpose.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else. These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+If you violate any of these terms, or do anything with the
+software not covered by your licenses, all your licenses
+end immediately.
+
+## No Liability
+
+_**As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.**_
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization. **Control**
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise. Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.

package/licenses/PolyForm-NonCommercial-1.0.0.md

@@ -0,0 +1,131 @@
+# PolyForm Noncommercial License 1.0.0
+
+<https://polyformproject.org/licenses/noncommercial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the
+software to do everything you might do with the software
+that would otherwise infringe the licensor's copyright
+in it for any permitted purpose. However, you may
+only distribute the software according to [Distribution
+License](#distribution-license) and make changes or new works
+based on the software according to [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license
+to distribute copies of the software. Your license
+to distribute covers distributing the software with
+changes and new works permitted by [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of
+the software from you also gets a copy of these terms or the
+URL for them above, as well as copies of any plain-text lines
+beginning with `Required Notice:` that the licensor provided
+with the software. For example:
+
+> Required Notice: Copyright Graphy Technologies Ltd. (https://graphy.dev)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Noncommercial Purposes
+
+Any noncommercial purpose is a permitted purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for
+the benefit of public knowledge, personal study, private
+entertainment, hobby projects, amateur pursuits, or religious
+observance, without any anticipated commercial application,
+is use for a permitted purpose.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution,
+public research organization, public safety or health
+organization, environmental protection organization,
+or government institution is use for a permitted purpose
+regardless of the source of funding or obligations resulting
+from the funding.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else. These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have
+violated any of these terms, or done anything with the software
+not covered by your licenses, your licenses can nonetheless
+continue if you come into full compliance with these terms,
+and take practical steps to correct past violations, within
+32 days of receiving notice. Otherwise, all your licenses
+end immediately.
+
+## No Liability
+
+_**As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.**_
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization. **Control**
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise. Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.