@usableapp/cardds 0.7.90 → 0.7.92

package/dist/sticky/Sticky.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import type { StickyTone } from './tones.js';
 export interface StickyProps extends Omit<ComponentProps<'div'>, 'onClick'> {
     /** the whole note is a button: it renders a `<button>` and keeps its fold. Not with `corner` (a button cannot hold a button) */
@@ -24,8 +24,10 @@ export interface StickyProps extends Omit<ComponentProps<'div'>, 'onClick'> {
 }
 /**
  * Sticky — a paper note: a flat pastel SQUARE of one size (168, the knob `--sticky-size`), square corners, a soft shadow under it.
- * Every note is that one square whatever it says: words it cannot hold are cut, never the note grown.
+ * Every note is that one square whatever it says, never grown: words it cannot hold are written one size smaller (`--sticky-small-font`, the label size:
+ * six lines instead of four and a half); words that do not fit even then are cut where their room ends. The note measures its own words.
+ * A `StickyField` on it stops at that room: the note refuses the input that would not fit, and the app's `onChange` is not called for it.
  * THE FOLD SAYS UNREAD: the bottom-right corner folded over = not read yet; `flat` = read. A folded note says so to a screen reader too (`unreadLabel`).
  * The outer box holds the tone and the shadow; the paper inside is the part that is cut (a clip would cut the shadow too).
  */
-export declare function Sticky({ tone, flat, unreadLabel, head, date, tilt, foot, corner, stuck, onClick, className, children, ...rest }: StickyProps): import("react").JSX.Element;
+export declare function Sticky({ tone, flat, unreadLabel, head, date, tilt, foot, corner, stuck, onClick, className, children, ref, ...rest }: StickyProps): import("react").JSX.Element;

package/dist/sticky/Sticky.js

@@ -1,16 +1,77 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
 import { pressable } from '../pressable.js';
+import { setRefs, watchSize } from '../state.js';
 import { word } from '../words.js';
+import { fitSticky } from './fit.js';
 /**
  * Sticky — a paper note: a flat pastel SQUARE of one size (168, the knob `--sticky-size`), square corners, a soft shadow under it.
- * Every note is that one square whatever it says: words it cannot hold are cut, never the note grown.
+ * Every note is that one square whatever it says, never grown: words it cannot hold are written one size smaller (`--sticky-small-font`, the label size:
+ * six lines instead of four and a half); words that do not fit even then are cut where their room ends. The note measures its own words.
+ * A `StickyField` on it stops at that room: the note refuses the input that would not fit, and the app's `onChange` is not called for it.
  * THE FOLD SAYS UNREAD: the bottom-right corner folded over = not read yet; `flat` = read. A folded note says so to a screen reader too (`unreadLabel`).
  * The outer box holds the tone and the shadow; the paper inside is the part that is cut (a clip would cut the shadow too).
  */
-export function Sticky({ tone = 'custard', flat, unreadLabel, head, date, tilt, foot, corner, stuck, onClick, className, children, ...rest }) {
+export function Sticky({ tone = 'custard', flat, unreadLabel, head, date, tilt, foot, corner, stuck, onClick, className, children, ref, ...rest }) {
+    const own = useRef(null);
+    const [small, setSmall] = useState(false);
+    const last = useRef('');
+    const composing = useRef(false);
+    const fieldOf = () => own.current?.querySelector('.sticky-field') ?? null;
+    useLayoutEffect(() => {
+        const note = own.current;
+        if (!note)
+            return;
+        setSmall(fitSticky(note) !== 'full');
+        const field = fieldOf();
+        if (field && !composing.current)
+            last.current = field.value;
+    }, [children, head, date, foot]); // a chat re-renders every note on each keystroke in its answer field; only a note whose words changed is measured again (a field is an element, new every render)
+    useEffect(() => {
+        const note = own.current, paper = note?.querySelector('.sticky__paper');
+        if (!note || !paper)
+            return;
+        const measure = () => setSmall(fitSticky(note) !== 'full');
+        /* A native listener on the paper runs before React's own at the root, so stopping the event here keeps the app's `onChange` from
+           hearing an input the note refused. `dropped` is for a composition: the app has heard it already, so it is told the words went back. */
+        const refuse = (field, dropped) => {
+            const added = field.value.length - last.current.length, at = field.selectionStart - added;
+            if (dropped)
+                Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value').set.call(field, last.current);
+            else
+                field.value = last.current; // the prototype's setter, so React's value tracker sees the change and the input dispatched next reaches onChange
+            field.setSelectionRange(Math.max(0, at), Math.max(0, at));
+            if (dropped)
+                field.dispatchEvent(new Event('input', { bubbles: true }));
+        };
+        const check = (e, dropped) => {
+            const field = fieldOf();
+            if (!field || e.target !== field)
+                return measure();
+            if (fitSticky(note) === 'over' && field.value.length > last.current.length) {
+                if (!dropped)
+                    e.stopPropagation();
+                refuse(field, dropped);
+                fitSticky(note);
+            }
+            else
+                last.current = field.value;
+            measure();
+        };
+        const onInput = (e) => (e.isComposing ? measure() : check(e, false));
+        const onComposing = () => { composing.current = true; };
+        const onComposed = (e) => { composing.current = false; check(e, true); };
+        paper.addEventListener('input', onInput);
+        paper.addEventListener('compositionstart', onComposing);
+        paper.addEventListener('compositionend', onComposed);
+        const body = paper.querySelector('.sticky__body');
+        const stop = watchSize([body], measure);
+        document.fonts?.ready.then(measure);
+        return () => { paper.removeEventListener('input', onInput); paper.removeEventListener('compositionstart', onComposing); paper.removeEventListener('compositionend', onComposed); stop(); };
+    }, []);
     const notched = corner != null;
     const { tap, Box, boxProps } = pressable(notched ? undefined : onClick, 'div', rest);
     const Part = tap ? 'span' : 'div';
-    return (_jsxs(Box, { className: cx('sticky', `sticky--${tone}`, flat && 'sticky--flat', notched && 'sticky--corner', tilt && `sticky--tilt-${tilt}`, tap && 'sticky--tap', className), ...boxProps, children: [_jsxs(Part, { className: "sticky__paper", children: [(head != null || date != null) && _jsxs(Part, { className: "sticky__head", children: [head, date] }), _jsx(Part, { className: "sticky__body", children: children }), foot != null && _jsx(Part, { className: "sticky__foot", children: foot }), !flat && !notched && _jsx("span", { className: "sticky__fold", "aria-hidden": "true" }), !flat && !notched && _jsx("span", { className: "sticky__state t-sr", children: unreadLabel ?? word('unread') })] }), stuck != null && _jsx(Part, { className: "sticky__stuck", children: stuck }), notched && _jsx("div", { className: "sticky__corner", children: corner })] }));
+    return (_jsxs(Box, { ref: setRefs(own, ref), className: cx('sticky', `sticky--${tone}`, small && 'sticky--small', flat && 'sticky--flat', notched && 'sticky--corner', tilt && `sticky--tilt-${tilt}`, tap && 'sticky--tap', className), ...boxProps, children: [_jsxs(Part, { className: "sticky__paper", children: [(head != null || date != null) && _jsxs(Part, { className: "sticky__head", children: [head, date] }), _jsx(Part, { className: "sticky__body", children: children }), foot != null && _jsx(Part, { className: "sticky__foot", children: foot }), !flat && !notched && _jsx("span", { className: "sticky__fold", "aria-hidden": "true" }), !flat && !notched && _jsx("span", { className: "sticky__state t-sr", children: unreadLabel ?? word('unread') })] }), stuck != null && _jsx(Part, { className: "sticky__stuck", children: stuck }), notched && _jsx("div", { className: "sticky__corner", children: corner })] }));
 }

package/dist/sticky/StickyField.d.ts

@@ -3,5 +3,9 @@ export interface StickyFieldProps extends ComponentProps<'textarea'> {
     /** what is being written — the field's accessible name (it has no visible label) */
     label: string;
 }
-/** StickyField — the words written ON a Sticky: a bare textarea in the note's own type and ink, filling the note. */
+/**
+ * StickyField — the words written ON a Sticky: a bare textarea in the note's own type and ink, filling the note.
+ * A note being written stops at its paper's room: the `Sticky` it is on refuses the input that would not fit (even one size smaller), and the
+ * app's `onChange` is not called for it. `maxLength` is still the app's to set on top.
+ */
 export declare function StickyField({ label, className, ...rest }: StickyFieldProps): import("react").JSX.Element;

package/dist/sticky/StickyField.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** StickyField — the words written ON a Sticky: a bare textarea in the note's own type and ink, filling the note. */
+/**
+ * StickyField — the words written ON a Sticky: a bare textarea in the note's own type and ink, filling the note.
+ * A note being written stops at its paper's room: the `Sticky` it is on refuses the input that would not fit (even one size smaller), and the
+ * app's `onChange` is not called for it. `maxLength` is still the app's to set on top.
+ */
 export function StickyField({ label, className, ...rest }) {
     return _jsx("textarea", { className: cx('sticky-field', className), "aria-label": label, ...rest });
 }

package/dist/sticky/fit.d.ts

@@ -0,0 +1,6 @@
+export type StickyFit = 'full' | 'small' | 'over';
+/** How a note's words sit on it, measured: `full` at the note's size, `small` once written one size smaller, `over` when even that is too much.
+ *  Leaves `sticky--small` on the note as the answer says (on for `small` and `over`). A textarea scrolls inside itself, so when the
+ *  words are a `StickyField` it is the field that is measured, not the body round it. A body under a heading on a board is
+ *  line-clamped to what it shows and never shrinks. */
+export declare function fitSticky(note: HTMLElement): StickyFit;

package/dist/sticky/fit.js

@@ -0,0 +1,17 @@
+const SMALL = 'sticky--small';
+/** How a note's words sit on it, measured: `full` at the note's size, `small` once written one size smaller, `over` when even that is too much.
+ *  Leaves `sticky--small` on the note as the answer says (on for `small` and `over`). A textarea scrolls inside itself, so when the
+ *  words are a `StickyField` it is the field that is measured, not the body round it. A body under a heading on a board is
+ *  line-clamped to what it shows and never shrinks. */
+export function fitSticky(note) {
+    note.classList.remove(SMALL);
+    const body = note.querySelector('.sticky__body');
+    if (!body || getComputedStyle(body).webkitLineClamp !== 'none')
+        return 'full';
+    const words = body.querySelector(':scope > .sticky-field') ?? body;
+    const cut = () => words.scrollHeight > words.clientHeight;
+    if (!cut())
+        return 'full';
+    note.classList.add(SMALL);
+    return cut() ? 'over' : 'small';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.90",
+  "version": "0.7.92",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",