@crewlethq/ui 0.2.0 → 0.4.0

package/dist/OrgLabel/OrgLabel.d.ts

@@ -0,0 +1,117 @@
+/**
+ * What a node of an org chart and a row of an org table both say.
+ *
+ * ONE COMPONENT, BECAUSE IT WAS ALWAYS ONE THING. A chart node and a table row
+ * state the same four facts about the same organization: a mark for what kind
+ * of thing this is, its name, the word under the name saying that kind out
+ * loud, and the slot a push arrives in. They were written twice, under two
+ * class prefixes, and measured declaration by declaration the two stylesheets
+ * agreed on 38 of the 62 declarations they set across the six elements they
+ * both draw. Seventeen of the 24 that differed are one difference restated: A
+ * CHART NODE IS A BOX AS WIDE AS ITS OWN NAME AND A TABLE ROW IS A LINE IN A
+ * COLUMN. So the layout is the parameter and nothing else is. The other seven
+ * were the same rule written two ways, which is where both defects lived.
+ *
+ * WHAT THE LAYOUT DECIDES, and the whole of it:
+ *   - the name and its caption are CENTRED in a node and RANGED LEFT in a row,
+ *     because a node is read as a box and a column is read down its leading
+ *     edge: names centred in a column are a column nobody can scan;
+ *   - the mark's zone is a large control step in a node and a small one in a
+ *     row, and the mark inside it takes the step that half-fills or
+ *     three-quarter-fills whichever zone it is in;
+ *   - the push slot keeps a FIXED room in a node, because a node is
+ *     `width: max-content` and a slot that grew with its content would relay
+ *     the whole chart, and is content-sized in a row, where the grid already
+ *     decides the column;
+ *   - the ink comes from whatever publishes it: a chart card publishes its own
+ *     tone, and the table publishes the row's (`OrgTable.css`).
+ *
+ * THE NODE LAYOUT RENDERS NO WRAPPER, and cannot. `TreeCanvas`'s `node`
+ * appearance makes the element the caller spreads `ctx.item` on the flex row
+ * that lays the three zones out, so the zones have to be ITS children: a
+ * wrapper of this component's own would leave the chart laying out one box
+ * with everything inside it. The row layout does render one, because a table
+ * cell has nothing playing that part and because the row's tone has to be
+ * carried somewhere. That is why the base rules in `OrgLabel.css` are the
+ * NODE's and `--row` overrides them, rather than a neutral base and a modifier
+ * each: there is no element in a node layout for a modifier to sit on.
+ *
+ * TWO ALIASES KEEP THE OLD NAMES. `OrgNodeLabel` and `OrgTableName` are this
+ * component with the layout filled in, so no call site changed when the two
+ * became one.
+ */
+import type { ReactNode } from 'react';
+import type { TreeCardTone } from '../TreeCanvas/index.js';
+/**
+ * Which of the two things this label is: a card in a chart, or a line in a
+ * grid of them.
+ */
+export type OrgLabelLayout = 'node' | 'row';
+/** What both layouts say, in the order they say it. */
+export interface OrgLabelContent {
+    /** The mark in the leading zone: a glyph, a brand mark, an image. */
+    icon?: ReactNode | undefined;
+    /**
+     * A ring around that mark.
+     *
+     * `dashed` is the boundary something standing for somebody outside the
+     * system wears, the same mark a dashed card and a dashed row carry. The
+     * BOUNDARY says it rather than a hue, so it reads to somebody who cannot
+     * separate hues at all.
+     */
+    iconRing?: 'none' | 'dashed' | undefined;
+    /**
+     * How big the mark is drawn in its zone, as a proportion of the zone rather
+     * than as a size: `md` half-fills it, `lg` fills three quarters.
+     *
+     * `md` is what a container takes (a company, a unit, a group) and `lg` is
+     * for the mark that stands for the THING the chart is about, so a reader
+     * tells one from the other at the far end of a chart without reading either
+     * caption. The zone itself does not change either way, so this moves
+     * nothing: only what is drawn inside it.
+     */
+    iconSize?: 'md' | 'lg' | undefined;
+    /** The name, which takes the width the two fixed zones leave and truncates. */
+    name: ReactNode;
+    /** What kind of thing this is: "Department", "Human seat", "Crewlet agent". */
+    caption?: ReactNode | undefined;
+    /**
+     * Fixed-size marks riding the caption line, each one a glyph with an
+     * accessible name of its own. Anything that would change size belongs in
+     * `trailing`, which has a slot kept for it.
+     */
+    captionMarks?: ReactNode | undefined;
+    /**
+     * The slot on the name's line for what arrives from a push: a live state, a
+     * count.
+     *
+     * ASKING FOR IT IS WHAT RESERVES THE ROOM, in a node. The slot is a fixed
+     * width there, so what a push delivers cannot change the node's measured
+     * size; a node that can never carry one passes nothing here and is drawn
+     * with no slot at all, which is the console chart's own node.
+     */
+    trailing?: ReactNode | undefined;
+    /**
+     * Added to the outermost element this layout HAS: the row's own wrapper, and
+     * in a node the text column, which is the outermost element a layout that
+     * renders no wrapper can offer.
+     */
+    className?: string | undefined;
+}
+export interface OrgLabelNodeProps extends OrgLabelContent {
+    layout?: 'node' | undefined;
+    /**
+     * Refused on a node, because a node has no element to carry it. A chart card
+     * publishes its own tone to everything inside it (`TreeCanvas.css`), which
+     * is where a node's ink comes from; there is nothing here to tone.
+     */
+    tone?: never | undefined;
+}
+export interface OrgLabelRowProps extends OrgLabelContent {
+    layout: 'row';
+    /** The row's hue, which its mark and its name are drawn in. */
+    tone?: TreeCardTone | undefined;
+}
+export type OrgLabelProps = OrgLabelNodeProps | OrgLabelRowProps;
+/** The mark, the name and the caption of an org chart node or an org table row. */
+export declare function OrgLabel(props: OrgLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/OrgLabel/index.d.ts

@@ -0,0 +1,3 @@
+import './OrgLabel.css';
+export { OrgLabel } from './OrgLabel.js';
+export type { OrgLabelContent, OrgLabelLayout, OrgLabelProps, OrgLabelNodeProps, OrgLabelRowProps, } from './OrgLabel.js';

package/dist/OrgLabel/index.js

@@ -0,0 +1,2 @@
+export { OrgLabel } from '../chunk-5C5YMZQU.js';
+import '../chunk-ODEQTPFM.js';

package/dist/OrgLabel-D7U6QJZD.css

@@ -0,0 +1,293 @@
+/*
+ * What a node of an org chart and a row of an org table both say
+ * (OrgLabel.tsx).
+ *
+ * THE BASE RULES ARE THE NODE'S, AND `--row` OVERRIDES THEM. Not a neutral
+ * base with a modifier each, which is the shape this would take anywhere else:
+ * a node layout renders no wrapper at all (the chart lays out the zones
+ * itself, so they have to be its own children), so there is no element in a
+ * node for a modifier class to sit on. The node is therefore what a rule with
+ * no modifier draws, and every `--row` rule below is one of the seventeen
+ * declarations the two surfaces genuinely disagreed about.
+ *
+ * NOTHING HERE CHOOSES A COLOUR FOR A ROW. A node's ink is the chart card's
+ * own tone, published to everything inside the card, and read here with the
+ * chart's neutral ink as the fallback. A row's is the table's, which is a
+ * system of six hues this file knows nothing about: `OrgTable.css` points the
+ * row's mark and name at it, beside the rules that produce it.
+ *
+ * Every measurement is a proportion of the console org chart this package is
+ * drawn to match, taken up by the ratio between its 10px name and the smallest
+ * name step in this type scale, and then snapped to the token nearest the
+ * result.
+ */
+
+/* ---- The mark's zone ----------------------------------------------------- */
+
+/*
+ * A FIXED ZONE, so the name beside it starts in the same place on every node
+ * and every row. `align-self: stretch` is the node's: the zone is as tall as
+ * the card's first rank, which is what centres a mark against a name that has
+ * a caption under it.
+ */
+.crewlet-org-label__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-lg);
+  align-self: stretch;
+  font-size: var(--font-size-xl);
+  line-height: 1;
+  color: var(--crewlet-tree-canvas-card-accent, var(--color-text-tertiary));
+}
+
+/*
+ * A MARK THE SIZE OF WHAT IT STANDS FOR. The console chart draws a company and
+ * a unit at half its icon zone and an AGENT at three quarters of it, which is
+ * what lets a reader tell an agent seat from a unit at the far end of a chart
+ * without reading either caption. Drawn at one step for all three, the hue and
+ * the caption were carrying that difference alone. The zone does not change,
+ * so nothing here moves a node: only what is drawn in it.
+ */
+.crewlet-org-label__icon--lg {
+  font-size: var(--font-size-3xl);
+}
+
+/*
+ * THE ZONE IS ONE INK, and the mark in it takes that ink whatever it arrived
+ * painted in. A glyph already inherits, but a brand mark or an illustration
+ * carries its own fill, and on a toned node that is the one mark on the whole
+ * node still drawn in somebody else's colour: a rose node with a purple figure
+ * in its corner. Stated as the zone's own rule rather than asked of each
+ * caller, because the zone is what decides that a node is drawn in one colour.
+ */
+.crewlet-org-label__icon svg,
+.crewlet-org-label__icon svg g,
+.crewlet-org-label__icon svg path {
+  /* THE INK AS WELL AS THE FILL, which is what made the rule above true. A
+     mark may publish its own hue as a `color` on its own root (the Crewlet
+     figure does, from the brand token), and `currentcolor` under that root
+     then resolves to THAT: the fill was overridden and landed on exactly the
+     purple it started from, on every agent seat of a toned chart. The table
+     had the fill alone and therefore the same defect; one rule now answers for
+     both surfaces. */
+  color: inherit;
+  fill: currentColor;
+}
+
+/*
+ * THE DASHED RING is the boundary something standing for somebody outside the
+ * system wears, around the mark rather than instead of it: the card's own edge
+ * and the row's own mark carry the same dash, and the two together are what a
+ * reader recognises without reading a word.
+ */
+.crewlet-org-label__icon--dashed {
+  position: relative;
+}
+
+.crewlet-org-label__icon--dashed::before {
+  content: '';
+  position: absolute;
+  width: var(--size-target-min);
+  height: var(--size-target-min);
+  border: 1px dashed var(--color-border-hover);
+  border-radius: var(--radius-circle);
+}
+
+/* ---- The name and its caption -------------------------------------------- */
+
+/*
+ * CENTRED IN WHAT THE TWO FIXED ZONES LEAVE. Centred rather than ranged left
+ * because the zones are fixed: a name ranged left starts under the mark's
+ * right edge and a short one leaves the node looking like a label with an
+ * empty half. A ROW ranges left instead, below.
+ */
+.crewlet-org-label__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  text-align: center;
+}
+
+/*
+ * ONE LINE, ALWAYS. A name that wrapped would make the node a rank taller,
+ * which is a new layout for the whole chart, and would make one row of the
+ * table two ranks and push its rhythm off. The name truncates instead.
+ */
+.crewlet-org-label__name {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  color: var(--crewlet-tree-canvas-card-ink, var(--color-text-primary));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * THE CAPTION RECEDES BEHIND THE NAME, and on a toned node or a toned row it
+ * recedes in the neutral ink rather than in the hue.
+ *
+ * TWO REASONS, and either one is enough. It is a WORD, so it is read rather
+ * than made out, and the hue's own step measures 4.2:1 on both these grounds:
+ * over the floor for a drawing and under it for text. And the one word that
+ * names what a thing IS was drawn in two colours across the two surfaces of
+ * one page. The smallest step in this scale is 11px against the console
+ * chart's 7 on a 10px name, so the caption cannot recede by size here; it
+ * recedes by ink.
+ */
+.crewlet-org-label__caption {
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-org-label__kind {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * THE WIRING MARKS ride the caption as glyphs. Each is named for a reader who
+ * cannot see it and titled for one who can, and each keeps its size, so the
+ * node is the same height with three of them as with none.
+ *
+ * EVERY CHILD BUT THE WORD, which is the form the table arrived at and the
+ * chart did not: a mark arrives as a bare glyph or as a glyph inside a span
+ * that names it, and a rule reaching only the bare one let a named mark shrink
+ * with the strip around it. The word is the one child that may shrink, because
+ * it is the one that truncates.
+ */
+.crewlet-org-label__caption > * {
+  flex: none;
+}
+
+.crewlet-org-label__caption svg {
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-org-label__caption > .crewlet-org-label__kind {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* ---- The slot a push arrives in ------------------------------------------ */
+
+/*
+ * IT HOLDS ITS ROOM EMPTY, so a live state that changes twice a tool-loop
+ * round and a count that leaves while a check is out and comes back with its
+ * answer both change a word and never a measured size.
+ *
+ * A FIXED WIDTH, NOT A FLOOR. A `min-width` of one spacing step was not that
+ * promise: a node is `width: max-content`, so a badge arriving made the card
+ * 35px wider and relaid the chart, and a state that changed only its word
+ * ("idle" to "working") moved the node too. The slot is the same width whether
+ * it holds two marks, one or none, and anything wider is clipped inside it
+ * rather than pushing the card out. The room is one CONTROL STEP, which two
+ * fixed marks and the gap between them fit in (a state's dot and a count), and
+ * the slot is that plus its own separation either side.
+ *
+ * AND IT IS SEPARATED FROM THE NAME. The row this sits in has no gap (the
+ * zones either side of the name are fixed and the name is centred between
+ * them), so without this the name's box ended exactly where the badge's began.
+ */
+.crewlet-org-label__trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-1);
+  width: calc(var(--size-control-lg) + var(--spacing-2) + var(--spacing-1));
+  overflow: hidden;
+  padding-right: var(--spacing-1);
+  padding-left: var(--spacing-2);
+  white-space: nowrap;
+}
+
+/* ---- The row layout ------------------------------------------------------ */
+
+/*
+ * A ROW IS A LINE IN A COLUMN, and every rule from here down is one of the
+ * seventeen declarations that follow from that.
+ *
+ * IT FILLS THE CELL IT IS IN. At `0 1 auto` the group was as wide as its own
+ * name, so the text column had nothing to grow into and the slot sat wherever
+ * that name ended: two seats' live states never lined up, and the name never
+ * truncated because it never ran out of room.
+ */
+.crewlet-org-label--row {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * HALF THE NODE'S ZONE, and the mark inside it half-fills or three-quarter-
+ * fills that, which is the same proportion the chart draws at its own size.
+ * `align-self` goes back to the wrapper's own centring: a row is one rank, so
+ * there is no second line for a stretched zone to centre a mark against.
+ */
+.crewlet-org-label--row .crewlet-org-label__icon {
+  width: var(--size-control-sm);
+  align-self: auto;
+  font-size: var(--font-size-md);
+}
+
+.crewlet-org-label--row .crewlet-org-label__icon--lg {
+  font-size: var(--font-size-xl);
+}
+
+/*
+ * RANGED LEFT, where a node centres. They say the same things about the same
+ * thing, but a chart node is a box as wide as its own name, where a column of
+ * rows is read down its leading edge: names centred in a column are a column
+ * nobody can scan.
+ */
+.crewlet-org-label--row .crewlet-org-label__text {
+  align-items: stretch;
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.crewlet-org-label--row .crewlet-org-label__caption {
+  max-width: none;
+  justify-content: flex-start;
+}
+
+/*
+ * AND THE NAME IS BOUNDED BY THE CELL RATHER THAN BY ITSELF. A node is as wide
+ * as its own name up to the chart's ceiling, so the name is capped at the
+ * width it was given; a row's column is already a fixed width, and a cap of
+ * its own would stop the name using the room the grid handed it.
+ */
+.crewlet-org-label--row .crewlet-org-label__name {
+  max-width: none;
+}
+
+/*
+ * THE SLOT IS CONTENT-SIZED IN A ROW. The fixed room above exists because a
+ * node is measured and relaid whenever its size changes; a row sits in a grid
+ * that has already decided the column, so a slot holding its own width there
+ * would be a second, smaller column inside the first.
+ */
+.crewlet-org-label--row .crewlet-org-label__trailing {
+  justify-content: flex-start;
+  width: auto;
+  overflow: visible;
+  padding-right: 0;
+  padding-left: 0;
+}

package/dist/OrgNode/OrgNode.d.ts

@@ -0,0 +1,103 @@
+/**
+ * What an org chart node carries, beyond what it says.
+ *
+ * THE CHART DRAWS THE NODE, THIS DRAWS WHAT HANGS OFF IT. `TreeCanvas` owns
+ * the node's frame, its zones, the tone it may be tinted with, the actions
+ * column and the control under it. What a node SAYS, which is the part a table
+ * row says in the same words, is `OrgLabel`: the mark, the name, the caption
+ * under it and the slot a push arrives in were written once for each surface
+ * and are written once for both now, with `OrgNodeLabel` below the name a
+ * chart caller keeps using.
+ *
+ * WHAT IS LEFT HERE IS WHAT ONLY A NODE HAS. A row of a table has no disclosure
+ * on its leading edge, because a grid indents instead, and no strip along its
+ * bottom edge stating who leads the unit, because a column already says that
+ * on its own. Both are drawn as SIBLINGS of what the chart spreads `ctx.item`
+ * on rather than inside it, which is why each is a component rather than a
+ * slot: a tree's items hold nothing focusable.
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type OrgLabelContent } from '../OrgLabel/index.js';
+/**
+ * What a node says, which is what a ROW of the table beside it says too:
+ * `OrgLabel`, with the layout filled in.
+ *
+ * KEPT AS A NAME OF ITS OWN because a chart node is what a caller of this
+ * folder is drawing, and `OrgLabel layout="node"` at every call site would be
+ * the parameter repeated rather than a component named after its job. It adds
+ * nothing and takes nothing away: the props are the shared ones exactly.
+ */
+export type OrgNodeLabelProps = OrgLabelContent;
+/** The icon, name and caption of an org chart node. */
+export declare function OrgNodeLabel(props: OrgNodeLabelProps): import("react/jsx-runtime").JSX.Element;
+export interface OrgNodeDisclosureProps extends HTMLAttributes<HTMLDivElement> {
+    /** The control itself, named and carrying `tabIndex={-1}`. */
+    children: ReactNode;
+}
+/**
+ * The control that opens and closes what hangs under a node, on its LEADING
+ * EDGE.
+ *
+ * NOT ON THE BRANCH, which is the one place it must never be. What hangs under
+ * a node is the control that ADDS a child, on the node's own axis, and it is
+ * the only thing there: a second control beside it is two controls fighting
+ * for one place, and an add pill that splits open covers whatever was next to
+ * it. So a chart that can collapse puts the disclosure where every hierarchy a
+ * reader has used puts one, at the start of the row, and the branch keeps the
+ * add alone.
+ *
+ * BESIDE THE TREEITEM, NOT INSIDE IT, which is why this is a component of its
+ * own rather than a slot on the label. A tree's items hold nothing focusable:
+ * a control inside one is a control the tree pattern cannot navigate to and a
+ * screen reader reading element by element meets as a stray button. Drawn as
+ * part of the label it was inside the element the chart spreads `ctx.item` on,
+ * however it was marked. Render it as a SIBLING of that element, exactly where
+ * `ctx.actions` goes, and the chart's node appearance places it on the card's
+ * boundary from there; it hides itself, as that strip does.
+ *
+ * IT COSTS A READER NOTHING. Expansion is on the treeitem ITSELF, as
+ * `aria-expanded` and the Right and Left arrows, so what is hidden here is a
+ * DUPLICATE of something already reachable rather than a way in. Name the
+ * control anyway: "Collapse Engineering" is the tooltip a pointer gets.
+ *
+ * AND A PRESS IN IT BELONGS TO THE NODE. Every other control a chart draws
+ * hands its press to the treeitem, so that what holds focus afterwards is
+ * always a node a screen reader can announce and the arrows can move from; a
+ * disclosure that kept the focus on itself would leave it on an element the
+ * tree cannot navigate to and no reader can hear. This takes the chart's own
+ * press props and spreads them, which is exactly how the strip under a card
+ * takes them: the component owns what cannot be forgotten (the class, the
+ * hiding) and the caller passes the one thing only the chart knows, which id
+ * this is.
+ */
+export declare function OrgNodeDisclosure({ children, className, ...rest }: OrgNodeDisclosureProps): import("react/jsx-runtime").JSX.Element;
+export interface OrgNodeLeadProps {
+    /**
+     * Nothing is set, so the pill is drawn as the outline of one: a unit with no
+     * lead is a fact about the organization and a blank strip says nothing.
+     */
+    empty?: boolean | undefined;
+    /**
+     * The clear control, drawn inside the pill's right end.
+     *
+     * ONE PRESS to say this unit has no lead, which is what the console chart's
+     * own X does. It is quiet until the node is reached, like every other
+     * control on a node, and it is reached by FOCUS as well as by the pointer:
+     * the chart's own reveal rule covers it (`TreeCanvas.css`). Pass a named
+     * control, never a bare glyph: "Clear the lead of Engineering" is what a
+     * reader who cannot see which node this is hears.
+     */
+    clear?: ReactNode | undefined;
+    children: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * A unit's lead, along the bottom edge of its node.
+ *
+ * IT STAYS DRAWN, where the controls that edit the node do not: who leads a
+ * unit is a FACT ABOUT THE ORGANIZATION rather than a tool for changing it,
+ * and a chart that hid it until the pointer arrived would be a chart you could
+ * not read the leads off. Separated from the name above by a hairline, so the
+ * node reads as a thing with a lead rather than as two lines of text.
+ */
+export declare function OrgNodeLead({ empty, clear, children, className }: OrgNodeLeadProps): import("react/jsx-runtime").JSX.Element;

package/dist/OrgNode/index.d.ts

@@ -0,0 +1,3 @@
+import './OrgNode.css';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './OrgNode.js';
+export type { OrgNodeDisclosureProps, OrgNodeLabelProps, OrgNodeLeadProps, } from './OrgNode.js';

package/dist/OrgNode/index.js

@@ -0,0 +1,3 @@
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IAJLHVUA.js';
+import '../chunk-5C5YMZQU.js';
+import '../chunk-ODEQTPFM.js';