@visuno/angular 0.0.0-stage → 0.1.0

package/inline-text-diff/inline-text-diff.component.d.ts

@@ -0,0 +1,76 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/** One of the agent's edits to the copy. */
+export interface TextEdit {
+    key: string;
+    /** The words the copy has now, shown struck. */
+    from: string;
+    /** The words the agent suggests instead. */
+    to: string;
+    /** Why the agent isn't sure of this one. The edit is marked and the note shows above its buttons. */
+    note?: string;
+}
+/** A run of the copy as it stands, or one of the agent's edits to it. */
+export type TextPart = string | TextEdit;
+/** What was decided for an edit. */
+export type EditDecision = 'accepted' | 'rejected';
+/** Optional button label overrides. */
+export interface InlineTextDiffLabels {
+    accept?: string;
+    reject?: string;
+    acceptAll?: string;
+    rejectAll?: string;
+}
+export declare class InlineTextDiffComponent implements AfterViewInit, OnDestroy {
+    /** What the copy is, like "Pricing intro". */
+    title: string;
+    /** The copy in order: plain strings, with the edits between them. */
+    parts: TextPart[];
+    /** The initial decisions by edit key; edits left out wait for a decision. */
+    defaultDecisions: Record<string, EditDecision>;
+    /** The line that replaces the buttons once every edit is decided. */
+    doneLabel: string;
+    /** Button label overrides. */
+    set labels(v: InlineTextDiffLabels);
+    /** Extra class on the root wrapper. */
+    className: string;
+    /** Emitted whenever the decisions change, with the full map by key. */
+    decisionsChange: EventEmitter<Record<string, EditDecision>>;
+    root: ElementRef<HTMLDivElement>;
+    bar: ElementRef<HTMLDivElement>;
+    private readonly motion;
+    L: Required<InlineTextDiffLabels>;
+    dec: Record<string, EditDecision>;
+    cur: string | null;
+    at: {
+        left: number;
+        top: number;
+    };
+    /** The card keeps the height it had with every edit open once decisions begin. */
+    held: number | null;
+    /** The toolbar keeps the last edit's note while it fades out. */
+    lastNote: string;
+    private openHeight;
+    private onDocDown;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get edits(): TextEdit[];
+    get left(): number;
+    get fresh(): boolean;
+    get open(): TextEdit | undefined;
+    get status(): string;
+    asEdit(p: TextPart): TextEdit | null;
+    editLabel(e: TextEdit): string;
+    toggle(key: string): void;
+    onChunkKeydown(ev: KeyboardEvent, key: string): void;
+    onBarKeydown(ev: KeyboardEvent): void;
+    onRootKeydown(ev: KeyboardEvent): void;
+    decide(s: EditDecision): void;
+    all(s: EditDecision): void;
+    private set;
+    private commit;
+    private position;
+    private chunkEl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InlineTextDiffComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InlineTextDiffComponent, "vo-inline-text-diff", never, { "title": { "alias": "title"; "required": true; }; "parts": { "alias": "parts"; "required": true; }; "defaultDecisions": { "alias": "defaultDecisions"; "required": false; }; "doneLabel": { "alias": "doneLabel"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, { "decisionsChange": "decisionsChange"; }, never, never, true, never>;
+}

package/launch-checklist/launch-checklist.component.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from '@angular/core';
+import { type VoIconName } from '../core/icon.component';
+import * as i0 from "@angular/core";
+/** The state of one check: waiting, running (checking or fixing), passed or failed. */
+export type CheckState = 'wait' | 'run' | 'ok' | 'bad';
+/** One row in the checklist. */
+export interface LaunchCheck {
+    /** What is checked, like "Contrast meets AA". */
+    label: string;
+    /** wait (not run yet), run (checking or fixing now), ok or bad. */
+    state: CheckState;
+    /** The quiet line under the label, like "All 14 text pairs pass" or what is wrong. */
+    note?: string;
+    /** When true on a failed check, a Fix button is shown (emits `fix` with the index). */
+    canFix?: boolean;
+}
+/** The button beside the title, like Run checks, Run again or Ship it. */
+export interface LaunchAction {
+    label: string;
+    icon?: VoIconName;
+    /** The accent (ship) colour, for the step that ships. */
+    accent?: boolean;
+    disabled?: boolean;
+}
+export declare class LaunchChecklistComponent {
+    /** Like "Ready to ship pricing?". */
+    title: string;
+    /** The checks, one row (and one bar segment) each. */
+    checks: LaunchCheck[];
+    /** The line under the title. Defaults to a count, "Checking" while one runs, then what is left to fix. */
+    status?: string;
+    /** The button beside the title; omit for no button. */
+    action: LaunchAction | null;
+    /** Sits flat in a chat thread (the default). Set false to give it a card of its own. */
+    bare: boolean;
+    /** Emitted when the action button is clicked (Run checks / Run again / Ship it). */
+    run: EventEmitter<void>;
+    /** Emitted with the check index when its Fix button is clicked. */
+    fix: EventEmitter<number>;
+    /** The default status line, mirroring the React summary(). */
+    summary(): string;
+    /** Checks that have a result, for the progress bar's aria-valuenow. */
+    done(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LaunchChecklistComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LaunchChecklistComponent, "vo-launch-checklist", never, { "title": { "alias": "title"; "required": false; }; "checks": { "alias": "checks"; "required": false; }; "status": { "alias": "status"; "required": false; }; "action": { "alias": "action"; "required": false; }; "bare": { "alias": "bare"; "required": false; }; }, { "run": "run"; "fix": "fix"; }, never, never, true, never>;
+}

package/line-chart/line-chart.component.d.ts

@@ -0,0 +1,89 @@
+import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** One series of the chart. */
+export interface LineChartSeries {
+    /** Names the series in `visible`. */
+    key: string;
+    /** The legend's label, like "This year". */
+    label: string;
+    /** One value per point, oldest first. */
+    values: number[];
+    /** Defaults to the chart palette: the accent for the first series, then violet, green and so on. */
+    color?: string;
+}
+/** Internal per-series render state. */
+interface SeriesView {
+    series: LineChartSeries;
+    index: number;
+    d: string;
+    points: [number, number][];
+    color: string;
+    dash: string | null;
+    shown: boolean;
+    ptLeft: number;
+    ptTop: number;
+}
+export declare class LineChartComponent implements AfterViewInit, OnDestroy {
+    private readonly reduced;
+    private readonly cdr;
+    /** The name over the big number, like "Active editors". */
+    label: string;
+    /** The first series is the main one; the others are dashed, to compare against. */
+    series: LineChartSeries[];
+    /** One name per point, shown in the hover readout, like the months. */
+    points: string[];
+    /** Labels spread along the bottom. Defaults to every other point. */
+    axis?: string[];
+    /** The values at the bottom and top of the chart. Defaults to the data's range with a little room. */
+    range?: [number, number];
+    /** What the values count, like "editors" in "1,620 editors". */
+    unit?: string;
+    /** Ends the readout's comparison of the first two series, like "vs last year". */
+    compareLabel?: string;
+    /** Writes a value. Defaults to whole numbers like 1,620. */
+    format: (n: number) => string;
+    /** Keys of the series shown. Leave it out to let the legend toggle them. One always stays on. */
+    set visible(value: string[] | undefined);
+    defaultVisible?: string[];
+    visibleChange: EventEmitter<string[]>;
+    private chart;
+    readonly W = 320;
+    readonly H = 140;
+    readonly grid: number[];
+    ids: string;
+    views: SeriesView[];
+    drawOrder: SeriesView[];
+    ticks: string[];
+    areaD: string;
+    leadColor: string;
+    clip: number;
+    value: number;
+    at: boolean;
+    px: number;
+    ttLeft: number;
+    ttValue: string;
+    ttLabel: string;
+    private on;
+    private lo;
+    private hi;
+    private last;
+    private controlled;
+    private ready;
+    private timers;
+    private frames;
+    constructor(reduced: ReducedMotionService, cdr: ChangeDetectorRef);
+    private color;
+    private y;
+    ngAfterViewInit(): void;
+    private apply;
+    toggle(k: number): void;
+    move(e: PointerEvent): void;
+    leave(): void;
+    private tween;
+    private later;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LineChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LineChartComponent, "vo-line-chart", never, { "label": { "alias": "label"; "required": true; }; "series": { "alias": "series"; "required": true; }; "points": { "alias": "points"; "required": true; }; "axis": { "alias": "axis"; "required": false; }; "range": { "alias": "range"; "required": false; }; "unit": { "alias": "unit"; "required": false; }; "compareLabel": { "alias": "compareLabel"; "required": false; }; "format": { "alias": "format"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "defaultVisible": { "alias": "defaultVisible"; "required": false; }; }, { "visibleChange": "visibleChange"; }, never, never, true, never>;
+}
+export {};

package/live-answer/live-answer.component.d.ts

@@ -0,0 +1,110 @@
+import { EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** A source the answer can cite. */
+export interface AnswerSource {
+    /** The number its citations use: [1] in the text cites source 1. */
+    n: number;
+    /** Like "Funnel data". */
+    title: string;
+    /** Where it came from, shown in the list, like "Amplitude, last 30 days". */
+    detail?: string;
+    /** Shown when you hover a citation. Defaults to the title and detail. */
+    tip?: string;
+    /** The letter on its badge. Defaults to the title's first letter. */
+    mark?: string;
+    /** Badge colour, any CSS colour. */
+    color?: string;
+}
+/** waiting shows nothing yet, thinking shows the Thinking line, answering streams the text, done adds sources and actions. */
+export type AnswerState = 'waiting' | 'thinking' | 'answering' | 'done';
+/** One question-and-answer turn in the thread. */
+export interface AnswerTurn {
+    /** Keeps each turn in place when turns are added. Defaults to its index. */
+    key?: string | number;
+    /** What the person asked, shown as a bubble above the answer. Leave it out when the bubble is shown elsewhere, like in a chat. */
+    question?: string;
+    /** waiting shows nothing yet, thinking shows the Thinking line, answering streams the text, done adds sources and actions. */
+    state: AnswerState;
+    /** The answer so far. Each new word fades in as it arrives. [1] after a word cites source 1, a blank line starts a new paragraph. */
+    text?: string;
+    /** What the agent did before it answered, listed under a toggle that counts them, like "3 steps · 2s". */
+    thoughts?: string[];
+    /** Seconds it thought for. Leave it out to count while thinking. */
+    thoughtFor?: number;
+    sources?: AnswerSource[];
+}
+/** A rating given with the thumbs up/down buttons. */
+export type AnswerRating = 'good' | 'bad' | null;
+/** A word with any [n] citations that hung on it. */
+interface Cite {
+    n: number;
+    rest: string;
+}
+interface Word {
+    text: string;
+    cites: Cite[];
+}
+/** A paragraph as its words, plus whether its last word carries a citation. */
+type Paragraph = Word[];
+/** The per-turn interactive state kept by the component. */
+interface TurnView {
+    turn: AnswerTurn;
+    index: number;
+    /** Bumped whenever the turn goes back from done to answering, so it starts afresh. */
+    round: number;
+    seenState: AnswerState;
+    thoughtsOpen: boolean;
+    listOpen: boolean;
+    hover: number | null;
+    pin: number | null;
+    rating: AnswerRating;
+    copied: boolean;
+    counted: number;
+}
+export declare class LiveAnswerComponent implements OnChanges, OnDestroy {
+    private readonly reduced;
+    turns: AnswerTurn[];
+    /** Suggested next questions, shown under the last answer once it is done. */
+    followUps?: string[];
+    /** Adds a Try again button under each answer; emit is via the `retry` output. */
+    retryable: boolean;
+    className: string;
+    followUp: EventEmitter<string>;
+    retry: EventEmitter<number>;
+    rateChange: EventEmitter<{
+        index: number;
+        rating: AnswerRating;
+    }>;
+    /** Called after an answer is copied, with its text without the citations. */
+    copyText: EventEmitter<{
+        index: number;
+        text: string;
+    }>;
+    /** Called when a source in the list is clicked, besides pinning it. */
+    sourceClick: EventEmitter<AnswerSource>;
+    /** Whether a Try again button is shown. */
+    get retryOn(): boolean;
+    /** The per-turn interactive state, rebuilt from the turns input. */
+    views: TurnView[];
+    private tick?;
+    constructor(reduced: ReducedMotionService);
+    get lastIndex(): number;
+    ngOnChanges(changes: SimpleChanges): void;
+    /** Keeps each turn's view state across input changes, restarting one that goes back from done to answering. */
+    private sync;
+    private fresh;
+    active(v: TurnView): number | null;
+    max1(n: number): number;
+    paragraphs(turn: AnswerTurn): Paragraph[];
+    sourcesOf(turn: AnswerTurn): AnswerSource[];
+    tipOf(turn: AnswerTurn, n: number): string;
+    pick(v: TurnView, n: number): void;
+    rate(v: TurnView, r: 'good' | 'bad'): void;
+    copy(v: TurnView): void;
+    private startCounter;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LiveAnswerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LiveAnswerComponent, "vo-live-answer", never, { "turns": { "alias": "turns"; "required": false; }; "followUps": { "alias": "followUps"; "required": false; }; "retryable": { "alias": "retryable"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, { "followUp": "followUp"; "retry": "retry"; "rateChange": "rateChange"; "copyText": "copyText"; "sourceClick": "sourceClick"; }, never, never, true, never>;
+}
+export {};

package/metric-insight/metric-insight.component.d.ts

@@ -0,0 +1,110 @@
+import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** One range of the metric, like the last 30 days. */
+export interface MetricRange {
+    /** Identifies the range, like '30'. */
+    key: string;
+    /** The switch label, like "30d". */
+    label: string;
+    /** The values over the range, oldest first. */
+    points: number[];
+    /** The number in large type, which rolls to it. */
+    value: number;
+    /** The change over the range, in the tag beside it. */
+    change: number;
+    /** One line on what happened, like "Jumped after the pricing page update on Sep 18." */
+    insight: string;
+    /** A marker on the chart, like a release: `at` is 0 to 1 across, `label` shows on hover. */
+    marker?: {
+        at: number;
+        label: string;
+    };
+}
+/** One contributor to the change, shown under "Why did it move?". */
+export interface MetricDriver {
+    label: string;
+    /** Its share of the change, 0 to 100. */
+    percent: number;
+    /** Any CSS colour, like 'var(--vo-accent)'. Defaults to the accent. */
+    color?: string;
+}
+export declare class MetricInsightComponent implements AfterViewInit, OnDestroy {
+    private readonly reduced;
+    private readonly cdr;
+    /** The metric's name, like "Trial to paid". */
+    label: string;
+    /** The ranges to switch between. */
+    ranges: MetricRange[];
+    /** The range on show, by key. Leave it out to let the switch pick it. */
+    set range(value: string | undefined);
+    defaultRange?: string;
+    /** Formats the large number and the hovered point. Defaults to one decimal and a %. */
+    format: (value: number) => string;
+    /** Formats the change. Defaults to "+8.1 pts". */
+    formatChange: (change: number) => string;
+    /** What moved the number, shown under "Why did it move?". Leave it out to hide the button. */
+    drivers?: MetricDriver[];
+    /** Shows "Looking into it" on the button and keeps the breakdown shut, while you fetch the drivers. */
+    explaining: boolean;
+    /** Whether the breakdown is open. Leave it out to let the button toggle it. */
+    set open(value: boolean | undefined);
+    defaultOpen: boolean;
+    rangeChange: EventEmitter<string>;
+    openChange: EventEmitter<boolean>;
+    private chartEl;
+    private segEl;
+    readonly W = 300;
+    readonly H = 90;
+    ids: string;
+    current: string;
+    value: number;
+    change: number;
+    rangeChangeValue: number;
+    lineD: string;
+    areaD: string;
+    dash: string | null;
+    len: number;
+    drawn: boolean;
+    hover: {
+        x: number;
+        y: number;
+        px: number;
+        py: number;
+        v: number;
+    } | null;
+    knobLeft: number;
+    knobWidth: number;
+    shownInsight: string;
+    insightOut: boolean;
+    whyLabel: string;
+    whyOut: boolean;
+    private isOpen;
+    private rangeControlled;
+    private openControlled;
+    private ready;
+    private pts;
+    private timers;
+    private frames;
+    constructor(reduced: ReducedMotionService, cdr: ChangeDetectorRef);
+    /** The change of the range on show, used to tint the tag green or red.
+     *  Named `rangeDelta` to avoid colliding with the `rangeChange` output. */
+    get rangeDelta(): number;
+    get currentRange(): MetricRange | undefined;
+    /** The breakdown is on screen only when open, not explaining, and there are drivers. */
+    get shown(): boolean;
+    ngAfterViewInit(): void;
+    select(key: string): void;
+    toggle(): void;
+    private labelFor;
+    private swapWhy;
+    private placeKnob;
+    private draw;
+    private swapInsight;
+    move(e: PointerEvent): void;
+    private tween;
+    private later;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MetricInsightComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MetricInsightComponent, "vo-metric-insight", never, { "label": { "alias": "label"; "required": true; }; "ranges": { "alias": "ranges"; "required": true; }; "range": { "alias": "range"; "required": false; }; "defaultRange": { "alias": "defaultRange"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatChange": { "alias": "formatChange"; "required": false; }; "drivers": { "alias": "drivers"; "required": false; }; "explaining": { "alias": "explaining"; "required": false; }; "open": { "alias": "open"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; }, { "rangeChange": "rangeChange"; "openChange": "openChange"; }, never, never, true, never>;
+}

package/modal/modal.component.d.ts

@@ -0,0 +1,37 @@
+import { ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ReducedMotionService } from '../core/reduced-motion.service';
+import * as i0 from "@angular/core";
+/** A centred dialog over a dimmed backdrop. */
+export declare class ModalComponent implements OnChanges, OnDestroy {
+    readonly reduced: ReducedMotionService;
+    /** Whether the modal is on screen. */
+    open: boolean;
+    /** How wide the panel may grow. */
+    size: 'sm' | 'md' | 'lg';
+    /** Hide the corner close button (Escape and the backdrop still close it). */
+    hideClose: boolean;
+    /** Keep the modal open when the backdrop is clicked. */
+    disableBackdropClose: boolean;
+    /** For screen readers when there is no projected title. */
+    ariaLabel?: string;
+    /** Whether a title was projected (set by the host, defaults to true for the header). */
+    hasTitle: boolean;
+    /** Whether a footer was projected. */
+    hasFooter: boolean;
+    className: string;
+    /** Called when the person asks to close it. */
+    close: EventEmitter<void>;
+    panel?: ElementRef<HTMLElement>;
+    private returnTo;
+    private prevOverflow;
+    private locked;
+    onEscape(e: KeyboardEvent): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private lock;
+    private unlock;
+    onBackdrop(e: MouseEvent): void;
+    onKeyDown(e: KeyboardEvent): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "vo-modal", never, { "open": { "alias": "open"; "required": false; }; "size": { "alias": "size"; "required": false; }; "hideClose": { "alias": "hideClose"; "required": false; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "hasTitle": { "alias": "hasTitle"; "required": false; }; "hasFooter": { "alias": "hasFooter"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, { "close": "close"; }, never, ["[vo-modal-title]", "[vo-modal-subtitle]", "*", "[vo-modal-footer]"], true, never>;
+}

package/model-picker/model-picker.component.d.ts

@@ -0,0 +1,97 @@
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** One model in the list. */
+export interface ModelOption {
+    id: string;
+    /** Like "Sonnet 5.5". */
+    name: string;
+    /** The letter in its coloured tile. Defaults to the first letter of the name. */
+    mark?: string;
+    /** The tile's colour, like "var(--vo-c1)". */
+    color?: string;
+    /** The letter colour that reads on the tile, like "var(--vo-on-accent)". */
+    markText?: string;
+    /** The quiet line under the name, like "Balanced, the default for design work". */
+    note?: string;
+    /** Speed, quality and cost, each from 1 to 5. For cost, 5 is the most expensive. */
+    speed: number;
+    quality: number;
+    cost: number;
+    /** What each meter shows on hover, like "74 tokens a second". */
+    speedDetail?: string;
+    qualityDetail?: string;
+    costDetail?: string;
+    /** checking spins beside the name; busy turns the row amber. Both replace the note with statusText. */
+    status?: 'ready' | 'checking' | 'busy';
+    /** Like "At capacity, about 20s wait". */
+    statusText?: string;
+}
+/** A thinking effort: its label, and the line shown under "Thinking" when it is picked. */
+export interface ThinkingEffort {
+    label: string;
+    detail?: string;
+}
+/** One button in the suggestion notice. The last one is filled. */
+export interface SuggestionAction {
+    label: string;
+    onClick: () => void;
+}
+/** A way out when the picked model can't take the request: a short text and its buttons. */
+export interface Suggestion {
+    text: string;
+    actions: SuggestionAction[];
+}
+/** Choose the model for a chat by speed, quality and cost, and how hard it thinks. */
+export declare class ModelPickerComponent implements OnChanges, AfterViewInit, OnDestroy {
+    /** The models to choose from. */
+    models: ModelOption[];
+    /** The picked model's id. Leave it out to let the list hold its own. */
+    value?: string;
+    defaultValue?: string;
+    /** The thinking efforts. Defaults to Off, Low, Medium and High. */
+    efforts: ThinkingEffort[];
+    effort?: string;
+    defaultEffort?: string;
+    /** A way out when the picked model can't take the request. */
+    suggestion: Suggestion | null;
+    /** The confirmation under the picker, shown with a green check. */
+    note: string;
+    /** The label beside the trigger. Defaults to "Model for this chat". */
+    label: string;
+    /** Whether the list is open. Leave it out to let the trigger and Escape open and close it. */
+    open?: boolean;
+    defaultOpen: boolean;
+    /** Emitted when a row is picked, busy or not, so you can check the model first. */
+    valueChange: EventEmitter<string>;
+    effortChange: EventEmitter<string>;
+    openChange: EventEmitter<boolean>;
+    private trigger;
+    private effBtn;
+    private pop;
+    private readonly motion;
+    /** The five meter steps. */
+    readonly bars: number[];
+    private curId;
+    private effLabel;
+    private openState;
+    effOpen: boolean;
+    private closeTimer?;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get picked(): ModelOption | undefined;
+    get eff(): string;
+    get isOpen(): boolean;
+    get effortDetail(): string;
+    rowNote(m: ModelOption): string;
+    pick(i: number): void;
+    chooseEffort(label: string): void;
+    toggleOpen(): void;
+    private setOpen;
+    toggleEff(): void;
+    private closeEffSoon;
+    onKeydown(e: KeyboardEvent): void;
+    private readonly onOutside;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModelPickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModelPickerComponent, "vo-model-picker", never, { "models": { "alias": "models"; "required": false; }; "value": { "alias": "value"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "efforts": { "alias": "efforts"; "required": false; }; "effort": { "alias": "effort"; "required": false; }; "defaultEffort": { "alias": "defaultEffort"; "required": false; }; "suggestion": { "alias": "suggestion"; "required": false; }; "note": { "alias": "note"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; }, { "valueChange": "valueChange"; "effortChange": "effortChange"; "openChange": "openChange"; }, never, never, true, never>;
+}

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@visuno/angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Visuno UI components for Angular — one design across Vanilla, React, Angular and Flutter, driven by shared design tokens.",
+  "license": "MIT",
+  "homepage": "https://visuno.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Visuno/components.git",
+    "directory": "angular"
+  },
+  "bugs": "https://github.com/Visuno/components/issues",
+  "keywords": [
+    "ui",
+    "components",
+    "angular",
+    "design-system",
+    "ai"
+  ],
+  "peerDependencies": {
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "allowScripts": {
+    "esbuild@0.23.1": true
+  },
+  "module": "fesm2022/visuno-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/visuno-angular.mjs",
+      "esm": "./esm2022/visuno-angular.mjs",
+      "default": "./fesm2022/visuno-angular.mjs"
+    },
+    "./styles.css": {
+      "default": "./styles.css"
+    },
+    "./tokens.css": {
+      "default": "./tokens.css"
+    }
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}