@hackcove/ui-react 0.10.2 → 0.10.4

package/dist/stickyColumn.d.ts

@@ -13,5 +13,23 @@
  */
 export declare const STICKY_ASIDE_MD = "md:sticky md:top-[var(--app-header,0px)] md:self-start";
 export declare const STICKY_SCROLL_MD = "md:-m-1 md:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] md:overflow-y-auto md:p-1";
+/**
+ * The thin themed scrollbar (`themedScrollbar` in `cx.ts`) on a rail's scroller from `md`, where it
+ * scrolls, instead of the heavy native one with arrow buttons. Its thumb is the scroller's own text
+ * colour, so the rail's real ink goes back on an inner box (`STICKY_INK_MD`), the colour the shell
+ * gives every page.
+ */
+export declare const STICKY_BAR_MD = "md:text-slate-400 md:[scrollbar-width:thin] md:[scrollbar-color:currentColor_transparent]";
+export declare const STICKY_INK_MD = "md:text-slate-900";
 export declare const STICKY_ASIDE_LG = "lg:sticky lg:top-[var(--app-header,0px)] lg:self-start";
 export declare const STICKY_SCROLL_LG = "lg:-m-1 lg:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] lg:overflow-y-auto lg:p-1";
+/**
+ * While a sticky column's scroller has more to scroll to on a side, that edge fades out (a mask, so
+ * it follows any theme), the way AppShell's header row does. `useScrollEdges` sets `data-more-start`
+ * / `data-more-end` (and `data-more` for either); a column that fits has none and is untouched.
+ * Each is prefixed with its breakpoint, below which the column neither sticks nor scrolls and gets
+ * no mask. While the scroller itself holds the keyboard's tab stop (`focus-visible`) the mask is
+ * off, since it would hide the focus ring (an outline) at the faded edges.
+ */
+export declare const STICKY_FADE_MD = "md:data-more-start:[--fade-start:1.5rem] md:data-more-end:[--fade-end:1.5rem] md:data-more:[mask-image:linear-gradient(to_bottom,transparent,#000_var(--fade-start,0px),#000_calc(100%_-_var(--fade-end,0px)),transparent)] md:data-more:focus-visible:[mask-image:none]";
+export declare const STICKY_FADE_LG = "lg:data-more-start:[--fade-start:1.5rem] lg:data-more-end:[--fade-end:1.5rem] lg:data-more:[mask-image:linear-gradient(to_bottom,transparent,#000_var(--fade-start,0px),#000_calc(100%_-_var(--fade-end,0px)),transparent)] lg:data-more:focus-visible:[mask-image:none]";

package/dist/stickyColumn.js

@@ -13,5 +13,23 @@
  */
 export const STICKY_ASIDE_MD = "md:sticky md:top-[var(--app-header,0px)] md:self-start";
 export const STICKY_SCROLL_MD = "md:-m-1 md:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] md:overflow-y-auto md:p-1";
+/**
+ * The thin themed scrollbar (`themedScrollbar` in `cx.ts`) on a rail's scroller from `md`, where it
+ * scrolls, instead of the heavy native one with arrow buttons. Its thumb is the scroller's own text
+ * colour, so the rail's real ink goes back on an inner box (`STICKY_INK_MD`), the colour the shell
+ * gives every page.
+ */
+export const STICKY_BAR_MD = "md:text-slate-400 md:[scrollbar-width:thin] md:[scrollbar-color:currentColor_transparent]";
+export const STICKY_INK_MD = "md:text-slate-900";
 export const STICKY_ASIDE_LG = "lg:sticky lg:top-[var(--app-header,0px)] lg:self-start";
 export const STICKY_SCROLL_LG = "lg:-m-1 lg:max-h-[calc(100dvh-var(--app-header,0px)-2rem)] lg:overflow-y-auto lg:p-1";
+/**
+ * While a sticky column's scroller has more to scroll to on a side, that edge fades out (a mask, so
+ * it follows any theme), the way AppShell's header row does. `useScrollEdges` sets `data-more-start`
+ * / `data-more-end` (and `data-more` for either); a column that fits has none and is untouched.
+ * Each is prefixed with its breakpoint, below which the column neither sticks nor scrolls and gets
+ * no mask. While the scroller itself holds the keyboard's tab stop (`focus-visible`) the mask is
+ * off, since it would hide the focus ring (an outline) at the faded edges.
+ */
+export const STICKY_FADE_MD = "md:data-more-start:[--fade-start:1.5rem] md:data-more-end:[--fade-end:1.5rem] md:data-more:[mask-image:linear-gradient(to_bottom,transparent,#000_var(--fade-start,0px),#000_calc(100%_-_var(--fade-end,0px)),transparent)] md:data-more:focus-visible:[mask-image:none]";
+export const STICKY_FADE_LG = "lg:data-more-start:[--fade-start:1.5rem] lg:data-more-end:[--fade-end:1.5rem] lg:data-more:[mask-image:linear-gradient(to_bottom,transparent,#000_var(--fade-start,0px),#000_calc(100%_-_var(--fade-end,0px)),transparent)] lg:data-more:focus-visible:[mask-image:none]";

package/dist/typography.js

@@ -118,6 +118,8 @@ const SECTION = {
     app: "text-base/6 font-semibold",
     prose: "text-2xl/8 font-semibold tracking-tight",
 };
+/** The offset an anchored heading keeps from the top, so the sticky header does not cover it. */
+const SCROLL_TARGET = "scroll-mt-28";
 /**
  * Top-level section header. `h2`, text-base/6 semibold, primary text (text-2xl/8 semibold tight
  * inside a `Prose`). `rule` sets
@@ -129,10 +131,12 @@ export function SectionHeading({ rule, description, ...props }) {
     const hairline = "mb-4 border-b border-slate-200/70 pb-2";
     const size = useProse() ? SECTION.prose : SECTION.app;
     const hasDescription = description != null && description !== false;
+    // An `id` makes the heading a link target, so an anchor jump leaves it clear of the sticky header.
+    const scroll = props.id === undefined ? undefined : SCROLL_TARGET;
     if (!hasDescription) {
-        return pinned("h2", cx(rule && hairline, size), "default", props);
+        return pinned("h2", cx(rule && hairline, size, scroll), "default", props);
     }
-    return (_jsxs("div", { className: cx("flex flex-col gap-1", rule && hairline), children: [pinned("h2", size, "default", props), _jsx(Text, { as: "p", color: "tertiary", children: description })] }));
+    return (_jsxs("div", { className: cx("flex flex-col gap-1", rule && hairline), children: [pinned("h2", cx(size, scroll), "default", props), _jsx(Text, { as: "p", color: "tertiary", children: description })] }));
 }
 const SUBSECTION_SIZE = {
     sm: { app: "text-sm/5 font-semibold", prose: "text-base/7 font-semibold" },

package/dist/useImageFailed.d.ts

@@ -0,0 +1,19 @@
+import { type RefObject } from "react";
+/**
+ * Whether the picture at `src` has failed to load, for `Avatar` and `Image`, which swap a failed
+ * picture for a fallback. A new `src` gets its own try, so a broken one never sticks.
+ *
+ * A failure is caught two ways. `markFailed` is the img's `onError`, for a picture that fails
+ * after React has attached. On a server-rendered page the browser can fail the picture before
+ * hydration, when the `error` event is already gone, so once the img mounts it is checked as well:
+ * finished (`complete`) with no width (`naturalWidth` 0) means it failed. A picture still loading
+ * or already loaded is left alone.
+ */
+export declare function useImageFailed(src: string | undefined): {
+    /** Pass to the <img>. */
+    ref: RefObject<HTMLImageElement | null>;
+    /** True when there is no `src`, or this `src` has failed. */
+    failed: boolean;
+    /** Pass to the <img>'s `onError`. */
+    markFailed: () => void;
+};

package/dist/useImageFailed.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef, useState } from "react";
+/**
+ * Whether the picture at `src` has failed to load, for `Avatar` and `Image`, which swap a failed
+ * picture for a fallback. A new `src` gets its own try, so a broken one never sticks.
+ *
+ * A failure is caught two ways. `markFailed` is the img's `onError`, for a picture that fails
+ * after React has attached. On a server-rendered page the browser can fail the picture before
+ * hydration, when the `error` event is already gone, so once the img mounts it is checked as well:
+ * finished (`complete`) with no width (`naturalWidth` 0) means it failed. A picture still loading
+ * or already loaded is left alone.
+ */
+export function useImageFailed(src) {
+    const [failedSrc, setFailedSrc] = useState();
+    const ref = useRef(null);
+    useEffect(() => {
+        const img = ref.current;
+        if (src && img?.complete && img.naturalWidth === 0)
+            setFailedSrc(src);
+    }, [src]);
+    return { ref, failed: !src || src === failedSrc, markFailed: () => setFailedSrc(src) };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a theme from @hackcove/themes.",
   "keywords": [
     "components",
@@ -78,16 +78,6 @@
     }
   },
   "nx": {
-    "name": "ui-react",
-    "tags": [
-      "kind:package"
-    ],
-    "targets": {
-      "build": {
-        "outputs": [
-          "{projectRoot}/dist"
-        ]
-      }
-    }
+    "name": "ui-react"
   }
 }