@flung.dev/connect 0.1.1 → 0.3.0

package/dist/element/styles.js

@@ -1,75 +1,218 @@
+import { PLATFORMS } from '../core/types.js';
+import { PLATFORM_MARKS } from './marks.js';
 /**
- * The panel's look, inside its shadow root. Every colour, the font and the corner radius are `--flung-*` properties a
- * page can set on the element; each part has a `part` name for `::part()`. Follows the page's light or dark scheme
- * unless `theme` says which.
+ * How much of its tile each mark fills, so they read at one optical size. Solid discs and squares fill their whole grid
+ * and look heavier than open or wide marks, so they are drawn a little smaller.
+ */
+const OPTICAL_SCALE = {
+    x: 0.86,
+    instagram: 0.9,
+    facebook: 0.92,
+    threads: 0.9,
+    linkedin: 0.92,
+    tiktok: 0.9,
+    youtube: 1,
+    pinterest: 0.92,
+    bluesky: 1,
+    mastodon: 0.9,
+    discord: 1,
+    farcaster: 0.86,
+};
+/** Each platform's brand colour for its mark, and its optical scale. A black mark takes the text colour, so it shows on a dark page too. */
+const MARKS = PLATFORMS.map((platform) => {
+    const hex = PLATFORM_MARKS[platform].hex;
+    return `.platform[data-platform="${platform}"] { --mark: ${hex === '000000' ? 'var(--flung-text)' : `#${hex}`}; --mark-scale: ${OPTICAL_SCALE[platform]}; }`;
+}).join('\n');
+const DARK = `
+    --flung-text: #f4f4f5;
+    --flung-muted: #a1a1aa;
+    --flung-surface: #18181b;
+    --flung-raised: #27272a;
+    --flung-border: #2e2e33;
+    --flung-accent: #f4f4f5;
+    --flung-accent-text: #18181b;
+    --flung-danger: #f87171;
+    --flung-warning: #fbbf24;
+    --flung-success: #4ade80;
+    --flung-mark-strength: 75%;
+    --flung-tint-strength: 14%;`;
+/** What `unstyled` keeps: the element is a block, and `hidden` hides it. Everything else is the page's, through `::part()`. */
+export const BASE_STYLES = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+[hidden] { display: none !important; }
+`;
+/**
+ * The panel's look, inside its shadow root. Colours, type, spacing, sizes, radii, borders, shadows and the focus ring
+ * are `--flung-*` properties a page can set on the element; each piece has a `part` name for `::part()`. Follows the
+ * page's light or dark scheme unless `theme` says which. `layout` picks `list`, `grid` or `compact`.
  */
 export const STYLES = `
 :host {
   --flung-font: system-ui, -apple-system, "Segoe UI", sans-serif;
+  --flung-font-size: 15px;
+  --flung-font-size-small: 13px;
+  --flung-line-height: 1.45;
+  --flung-font-weight-medium: 500;
+  --flung-font-weight-strong: 600;
   --flung-text: #18181b;
-  --flung-muted: #52525b;
+  --flung-muted: #71717a;
   --flung-surface: #ffffff;
   --flung-raised: #f4f4f5;
-  --flung-border: #d4d4d8;
+  --flung-border: #e4e4e7;
   --flung-accent: #18181b;
   --flung-accent-text: #ffffff;
-  --flung-danger: #b91c1c;
-  --flung-warning: #a16207;
-  --flung-radius: 8px;
+  --flung-danger: #dc2626;
+  --flung-warning: #b45309;
+  --flung-success: #15803d;
+  --flung-radius: 12px;
+  --flung-radius-inner: max(calc(var(--flung-radius) - 4px), 0px);
+  --flung-border-width: 1px;
+  --flung-shadow: none;
+  --flung-card-shadow: none;
+  --flung-padding: 16px;
+  --flung-gap: 12px;
+  --flung-badge-size: 40px;
+  --flung-mark-size: 20px;
+  --flung-mark-strength: 100%;
+  --flung-tint-strength: 8%;
+  --flung-avatar-size: 32px;
+  --flung-button-height: 36px;
+  --flung-button-padding: 0 14px;
+  --flung-button-radius: var(--flung-radius-inner);
+  --flung-focus-color: var(--flung-accent);
+  --flung-focus-width: 2px;
+  --flung-focus-offset: 2px;
+  --flung-grid-min: 16rem;
   display: block;
-  font: 15px/1.45 var(--flung-font);
+  font: var(--flung-font-size)/var(--flung-line-height) var(--flung-font);
   color: var(--flung-text);
+  -webkit-font-smoothing: antialiased;
 }
 :host([hidden]) { display: none; }
+[hidden] { display: none !important; }
 @media (prefers-color-scheme: dark) {
-  :host(:not([theme="light"])) {
-    --flung-text: #f4f4f5;
-    --flung-muted: #a1a1aa;
-    --flung-surface: #18181b;
-    --flung-raised: #27272a;
-    --flung-border: #3f3f46;
-    --flung-accent: #f4f4f5;
-    --flung-accent-text: #18181b;
-    --flung-danger: #f87171;
-    --flung-warning: #facc15;
+  :host(:not([theme="light"])) {${DARK}
   }
 }
-:host([theme="dark"]) {
-  --flung-text: #f4f4f5;
-  --flung-muted: #a1a1aa;
-  --flung-surface: #18181b;
-  --flung-raised: #27272a;
-  --flung-border: #3f3f46;
-  --flung-accent: #f4f4f5;
-  --flung-accent-text: #18181b;
-  --flung-danger: #f87171;
-  --flung-warning: #facc15;
+:host([theme="dark"]) {${DARK}
+}
+:host([layout="compact"]) {
+  --flung-font-size: 14px;
+  --flung-font-size-small: 12px;
+  --flung-padding: 12px;
+  --flung-gap: 8px;
+  --flung-badge-size: 30px;
+  --flung-mark-size: 16px;
+  --flung-avatar-size: 24px;
+  --flung-button-height: 30px;
+  --flung-button-padding: 0 10px;
 }
 * { box-sizing: border-box; }
-.panel { background: var(--flung-surface); border: 1px solid var(--flung-border); border-radius: var(--flung-radius); overflow: hidden; }
+.panel { background: var(--flung-surface); border: var(--flung-border-width) solid var(--flung-border); border-radius: var(--flung-radius); box-shadow: var(--flung-shadow); overflow: hidden; }
 ul { list-style: none; margin: 0; padding: 0; }
-.platform { padding: 12px 14px; border-top: 1px solid var(--flung-border); }
+.platform { padding: var(--flung-gap) var(--flung-padding); border-top: var(--flung-border-width) solid var(--flung-border); }
 .platform:first-child { border-top: 0; }
-.row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
-.badge { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--flung-raised); font-weight: 600; font-size: 13px; }
-.name { flex: 1; min-width: 0; font-weight: 600; }
-.accounts { margin: 6px 0 0 42px; }
-.account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }
-.who { flex: 1; min-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.status { font-size: 13px; color: var(--flung-warning); }
-.note { margin: 8px 0 0 42px; color: var(--flung-muted); font-size: 14px; }
-.note a { color: inherit; }
-.confirm, .form { margin: 8px 0 0 42px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
-.confirm p { flex-basis: 100%; margin: 0; }
-.form label { flex-basis: 100%; font-size: 14px; color: var(--flung-muted); }
-.form input { flex: 1; min-width: 10rem; font: inherit; color: inherit; background: var(--flung-surface); border: 1px solid var(--flung-border); border-radius: calc(var(--flung-radius) - 2px); padding: 6px 10px; }
-button { font: inherit; font-size: 14px; cursor: pointer; border-radius: calc(var(--flung-radius) - 2px); padding: 6px 12px; border: 1px solid var(--flung-border); background: transparent; color: inherit; }
+.row { display: flex; align-items: center; gap: var(--flung-gap); min-height: var(--flung-badge-size); }
+.row ::slotted(*) { flex: 1; min-width: 0; }
+.badge {
+  flex: none; width: var(--flung-badge-size); height: var(--flung-badge-size); border-radius: var(--flung-radius-inner);
+  display: grid; place-items: center;
+  color: color-mix(in srgb, var(--mark, var(--flung-text)) var(--flung-mark-strength), var(--flung-text));
+  background: color-mix(in srgb, var(--mark, var(--flung-text)) var(--flung-tint-strength), var(--flung-surface));
+  border: var(--flung-border-width) solid color-mix(in srgb, var(--mark, var(--flung-text)) 14%, var(--flung-border));
+}
+.mark { width: var(--flung-mark-size); height: var(--flung-mark-size); fill: currentColor; display: block; transform: scale(var(--mark-scale, 1)); }
+.title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.name { font-weight: var(--flung-font-weight-strong); line-height: 1.25; }
+.count { font-size: var(--flung-font-size-small); color: var(--flung-muted); line-height: 1.3; }
+.count.on::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--flung-success); margin-right: 6px; vertical-align: 2px; }
+.accounts { margin: 10px 0 2px calc(var(--flung-badge-size) + var(--flung-gap)); border-left: var(--flung-border-width) solid var(--flung-border); }
+.account { display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 12px; min-height: calc(var(--flung-avatar-size) + 12px); }
+.account ::slotted(*) { flex: 1; min-width: 0; }
+.avatar {
+  flex: none; width: var(--flung-avatar-size); height: var(--flung-avatar-size); border-radius: 50%; object-fit: cover; display: block;
+  background: color-mix(in srgb, var(--mark, var(--flung-text)) var(--flung-tint-strength), var(--flung-surface));
+  border: var(--flung-border-width) solid color-mix(in srgb, var(--mark, var(--flung-text)) 14%, var(--flung-border));
+}
+.avatar.initial {
+  display: grid; place-items: center; font-size: calc(var(--flung-avatar-size) * .42); font-weight: var(--flung-font-weight-strong); line-height: 1;
+  color: color-mix(in srgb, var(--mark, var(--flung-text)) var(--flung-mark-strength), var(--flung-text));
+}
+.who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }
+.names { min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
+.handle, .username { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.handle { font-size: calc(var(--flung-font-size) - 1px); font-weight: var(--flung-font-weight-medium); line-height: 1.3; }
+.username { font-size: var(--flung-font-size-small); color: var(--flung-muted); line-height: 1.3; }
+.status { display: inline-flex; align-items: center; gap: 5px; font-size: calc(var(--flung-font-size-small) - 1px); font-weight: var(--flung-font-weight-medium); line-height: 1; padding: 4px 8px; border-radius: 999px; color: var(--flung-warning); background: color-mix(in srgb, var(--flung-warning) 12%, var(--flung-surface)); white-space: nowrap; }
+.actions { flex: none; display: flex; align-items: center; gap: 4px; }
+.tag { display: inline-flex; align-items: center; font-size: calc(var(--flung-font-size-small) - 1px); font-weight: var(--flung-font-weight-medium); line-height: 1; padding: 3px 7px; border-radius: 999px; color: var(--flung-muted); background: var(--flung-raised); border: var(--flung-border-width) solid var(--flung-border); white-space: nowrap; }
+.note { margin: 10px 0 0 calc(var(--flung-badge-size) + var(--flung-gap)); color: var(--flung-muted); font-size: calc(var(--flung-font-size) - 1px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.note-text { flex: 1 1 12rem; min-width: 0; }
+.note a { color: var(--flung-text); font-weight: var(--flung-font-weight-medium); }
+.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--flung-border); border-top-color: var(--flung-text); flex: none; }
+.confirm, .form { margin: 10px 0 0 calc(var(--flung-badge-size) + var(--flung-gap)); padding: var(--flung-gap); border-radius: var(--flung-radius-inner); background: var(--flung-raised); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.confirm p { flex-basis: 100%; margin: 0 0 2px; font-size: calc(var(--flung-font-size) - 1px); }
+.choose { margin: 10px 0 0 calc(var(--flung-badge-size) + var(--flung-gap)); padding: var(--flung-gap); border-radius: var(--flung-radius-inner); background: var(--flung-raised); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.choose-title { margin: 0; font-size: calc(var(--flung-font-size) - 1px); }
+.options { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 8px; }
+button.option { height: auto; min-height: var(--flung-button-height); padding: 10px 12px; gap: 10px; justify-content: flex-start; text-align: left; white-space: normal; line-height: var(--flung-line-height); }
+button.option:hover:not(:disabled) { background: var(--flung-surface); border-color: color-mix(in srgb, var(--mark, var(--flung-text)) 45%, var(--flung-border)); }
+.option-icon {
+  flex: none; width: 32px; height: 32px; border-radius: var(--flung-radius-inner); display: grid; place-items: center;
+  color: color-mix(in srgb, var(--mark, var(--flung-text)) var(--flung-mark-strength), var(--flung-text));
+  background: color-mix(in srgb, var(--mark, var(--flung-text)) var(--flung-tint-strength), var(--flung-surface));
+}
+.option-mark { width: 18px; height: 18px; fill: currentColor; display: block; }
+.option-text { min-width: 0; display: flex; flex-direction: column; }
+.option-name { font-weight: var(--flung-font-weight-strong); line-height: 1.3; }
+.option-description { font-size: var(--flung-font-size-small); font-weight: normal; color: var(--flung-muted); line-height: 1.3; }
+.form label { flex-basis: 100%; font-size: var(--flung-font-size-small); color: var(--flung-muted); }
+.form input { flex: 1 1 12rem; min-width: 0; height: var(--flung-button-height); font: inherit; font-size: calc(var(--flung-font-size) - 1px); color: inherit; background: var(--flung-surface); border: var(--flung-border-width) solid var(--flung-border); border-radius: var(--flung-button-radius); padding: 0 10px; }
+button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: var(--flung-button-height); padding: var(--flung-button-padding); border-radius: var(--flung-button-radius);
+  font: inherit; font-size: calc(var(--flung-font-size) - 1px); font-weight: var(--flung-font-weight-medium); line-height: 1; white-space: nowrap;
+  cursor: pointer; color: var(--flung-text); background: var(--flung-surface); border: var(--flung-border-width) solid var(--flung-border);
+}
+button:hover:not(:disabled) { background: var(--flung-raised); }
+button:active:not(:disabled) { background: color-mix(in srgb, var(--flung-text) 8%, var(--flung-raised)); }
 button.primary { background: var(--flung-accent); border-color: var(--flung-accent); color: var(--flung-accent-text); }
-button.danger { color: var(--flung-danger); border-color: currentColor; }
-button:disabled { opacity: .55; cursor: default; }
-button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--flung-accent); outline-offset: 2px; }
-.message { margin: 0; padding: 10px 14px; border-top: 1px solid var(--flung-border); color: var(--flung-muted); font-size: 14px; }
-.message:empty { display: none; }
-.message.error { color: var(--flung-danger); }
-@media (prefers-reduced-motion: no-preference) { button { transition: opacity .15s; } }
+button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--flung-accent) 88%, var(--flung-surface)); }
+button.primary:active:not(:disabled) { background: color-mix(in srgb, var(--flung-accent) 78%, var(--flung-surface)); }
+button.quiet { border-color: transparent; background: transparent; color: var(--flung-muted); padding: 0 10px; }
+button.quiet:hover:not(:disabled) { color: var(--flung-danger); background: color-mix(in srgb, var(--flung-danger) 8%, transparent); }
+button.quiet:active:not(:disabled) { color: var(--flung-danger); background: color-mix(in srgb, var(--flung-danger) 14%, transparent); }
+button.danger { background: var(--flung-danger); border-color: var(--flung-danger); color: #ffffff; }
+button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--flung-danger) 88%, #000000); }
+button.danger:active:not(:disabled) { background: color-mix(in srgb, var(--flung-danger) 78%, #000000); }
+button:disabled { opacity: .5; cursor: default; }
+button:focus-visible, input:focus-visible, a:focus-visible { outline: var(--flung-focus-width) solid var(--flung-focus-color); outline-offset: var(--flung-focus-offset); }
+.message { margin: 0; padding: 10px var(--flung-padding); border-top: var(--flung-border-width) solid var(--flung-border); color: var(--flung-muted); font-size: calc(var(--flung-font-size) - 1px); background: var(--flung-raised); }
+.message.error { color: var(--flung-danger); background: color-mix(in srgb, var(--flung-danger) 8%, var(--flung-surface)); }
+.footer { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px var(--flung-padding); border-top: var(--flung-border-width) solid var(--flung-border); font-size: calc(var(--flung-font-size-small) - 1px); color: var(--flung-muted); }
+.footer a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; font-weight: var(--flung-font-weight-strong); }
+.footer a:hover { color: var(--flung-text); }
+.footer .flung { width: 14px; height: 14px; fill: currentColor; display: block; }
+.panel[data-layout="grid"] .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--flung-grid-min)), 1fr)); gap: var(--flung-gap); padding: var(--flung-padding); }
+.panel[data-layout="grid"] .platform, .panel[data-layout="grid"] .platform:first-child { border: var(--flung-border-width) solid var(--flung-border); border-radius: var(--flung-radius-inner); box-shadow: var(--flung-card-shadow); padding: var(--flung-gap); }
+.panel[data-layout="grid"] .accounts, .panel[data-layout="grid"] .note, .panel[data-layout="grid"] .confirm, .panel[data-layout="grid"] .form, .panel[data-layout="grid"] .choose { margin-left: 0; }
+.panel[data-layout="grid"] .accounts { border-left: 0; border-top: var(--flung-border-width) solid var(--flung-border); margin-top: var(--flung-gap); padding-top: 4px; }
+.panel[data-layout="grid"] .account { padding-left: 0; }
+.panel[data-layout="compact"] .count { display: none; }
+.panel[data-layout="compact"] .accounts, .panel[data-layout="compact"] .note, .panel[data-layout="compact"] .confirm, .panel[data-layout="compact"] .form, .panel[data-layout="compact"] .choose { margin-top: 6px; }
+.panel[data-layout="compact"] .account { padding-top: 3px; padding-bottom: 3px; }
+@media (max-width: 420px) {
+  .platform { padding: var(--flung-gap); }
+  .accounts, .note, .confirm, .form, .choose { margin-left: 0; }
+  .accounts { border-left: 0; border-top: var(--flung-border-width) solid var(--flung-border); margin-top: 10px; }
+  .account { padding-left: 0; }
+  .row button { padding: 0 12px; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  button { transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease; }
+  .spinner { animation: flung-spin .8s linear infinite; }
+}
+@keyframes flung-spin { to { transform: rotate(360deg); } }
+${MARKS}
 `;

package/dist/element/tooltip.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The panel's own tooltip, never the browser's `title`: that one cannot be styled or themed, opens with no keyboard or
+ * finger, and looks different in every browser. One tooltip serves the whole panel. An element asks for one with
+ * `data-tooltip` (the words); with `data-tooltip-truncated` as well it opens only while the element's text is cut short,
+ * as an account's name is in a narrow panel.
+ *
+ * It opens after a short rest of the pointer, on keyboard focus and on a held finger, and closes on Escape, a press, a
+ * scroll, or when the pointer and focus leave. It goes in the top layer where the browser has popovers, so no page's
+ * `overflow` or `transform` cuts it off, above the element (below when there is no room), and inside the screen's edges.
+ */
+/** How long the pointer rests before the tooltip opens. */
+export declare const TOOLTIP_DELAY_MS = 400;
+/** How long a finger holds an element before its tooltip opens. */
+export declare const TOOLTIP_HOLD_MS = 500;
+/** How long a tooltip opened by a finger stays once it lifts. */
+export declare const TOOLTIP_TOUCH_MS = 2500;
+/** The panel's tooltip, attached to its shadow root once. Put `element` back in the root each time the panel is drawn. */
+export interface PanelTooltip {
+    readonly element: HTMLElement;
+    hide(): void;
+}
+export declare function panelTooltip(root: ShadowRoot): PanelTooltip;
+/** What the tooltip needs to work at all, kept with `unstyled` too: fixed in place, out of the way of the pointer. */
+export declare const TOOLTIP_BASE_STYLES = "\n.tooltip { position: fixed; inset: auto; margin: 0; pointer-events: none; }\n";
+/** Its look: a small pill in the panel's own colours turned around, so it follows the theme and the page's overrides. */
+export declare const TOOLTIP_STYLES = "\n:host {\n  --flung-tooltip-background: var(--flung-text);\n  --flung-tooltip-text: var(--flung-surface);\n  --flung-tooltip-radius: var(--flung-radius-inner);\n  --flung-tooltip-shadow: 0 4px 14px rgb(0 0 0 / .16);\n}\n.tooltip {\n  z-index: 2147483647; max-width: min(20rem, calc(100vw - 16px)); padding: 4px 8px; border: 0; border-radius: var(--flung-tooltip-radius);\n  background: var(--flung-tooltip-background); color: var(--flung-tooltip-text); box-shadow: var(--flung-tooltip-shadow);\n  font: var(--flung-font-weight-medium) var(--flung-font-size-small)/1.35 var(--flung-font); overflow-wrap: anywhere;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .tooltip:not([hidden]) { animation: flung-tooltip-in .12s ease-out; }\n}\n@keyframes flung-tooltip-in { from { opacity: 0; } }\n";

package/dist/element/tooltip.js

@@ -0,0 +1,135 @@
+/**
+ * The panel's own tooltip, never the browser's `title`: that one cannot be styled or themed, opens with no keyboard or
+ * finger, and looks different in every browser. One tooltip serves the whole panel. An element asks for one with
+ * `data-tooltip` (the words); with `data-tooltip-truncated` as well it opens only while the element's text is cut short,
+ * as an account's name is in a narrow panel.
+ *
+ * It opens after a short rest of the pointer, on keyboard focus and on a held finger, and closes on Escape, a press, a
+ * scroll, or when the pointer and focus leave. It goes in the top layer where the browser has popovers, so no page's
+ * `overflow` or `transform` cuts it off, above the element (below when there is no room), and inside the screen's edges.
+ */
+import { html } from './dom.js';
+/** How long the pointer rests before the tooltip opens. */
+export const TOOLTIP_DELAY_MS = 400;
+/** How long a finger holds an element before its tooltip opens. */
+export const TOOLTIP_HOLD_MS = 500;
+/** How long a tooltip opened by a finger stays once it lifts. */
+export const TOOLTIP_TOUCH_MS = 2500;
+const GAP = 6;
+const EDGE = 8;
+/** Whether an element's text overflows its box. */
+const isCut = (element) => element.scrollWidth > element.clientWidth + 1;
+/** A pointer event's kind (`mouse`, `pen`, `touch`). A shadow root's event map names no pointer events, so it is read off the event. */
+const pointerType = (event) => ('pointerType' in event && typeof event.pointerType === 'string' ? event.pointerType : 'mouse');
+export function panelTooltip(root) {
+    const element = html('span', { class: 'tooltip', part: 'tooltip', 'aria-hidden': 'true', hidden: true });
+    const popover = typeof element.showPopover === 'function';
+    if (popover)
+        element.setAttribute('popover', 'manual');
+    let timer;
+    let anchor = null;
+    const asking = (target) => (target instanceof Element ? target.closest('[data-tooltip]') : null);
+    const place = (target) => {
+        const box = target.getBoundingClientRect();
+        const width = element.offsetWidth;
+        const height = element.offsetHeight;
+        const above = box.top - GAP - height >= EDGE;
+        const top = above ? box.top - GAP - height : box.bottom + GAP;
+        const left = Math.min(Math.max(box.left + box.width / 2 - width / 2, EDGE), Math.max(EDGE, window.innerWidth - EDGE - width));
+        element.style.left = `${left}px`;
+        element.style.top = `${top}px`;
+        element.dataset['side'] = above ? 'top' : 'bottom';
+    };
+    const show = (target) => {
+        const words = target.dataset['tooltip'] ?? '';
+        if (words === '' || !target.isConnected || (target.hasAttribute('data-tooltip-truncated') && !isCut(target)))
+            return;
+        anchor = target;
+        element.textContent = words;
+        element.hidden = false;
+        if (popover && !element.matches(':popover-open'))
+            element.showPopover();
+        place(target);
+        document.addEventListener('keydown', onKey);
+        window.addEventListener('scroll', hide, true);
+        window.addEventListener('resize', hide);
+    };
+    function hide() {
+        clearTimeout(timer);
+        timer = undefined;
+        if (anchor === null)
+            return;
+        anchor = null;
+        if (popover && element.matches(':popover-open'))
+            element.hidePopover();
+        element.hidden = true;
+        document.removeEventListener('keydown', onKey);
+        window.removeEventListener('scroll', hide, true);
+        window.removeEventListener('resize', hide);
+    }
+    function onKey(event) {
+        if (event.key === 'Escape')
+            hide();
+    }
+    const later = (target, delay) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => show(target), delay);
+    };
+    root.addEventListener('pointerover', (event) => {
+        const target = asking(event.target);
+        if (target === null || target === anchor || pointerType(event) === 'touch')
+            return;
+        hide();
+        later(target, TOOLTIP_DELAY_MS);
+    });
+    root.addEventListener('pointerout', (event) => {
+        const target = asking(event.target);
+        if (target === null || ('relatedTarget' in event && event.relatedTarget instanceof Node && target.contains(event.relatedTarget)))
+            return;
+        hide();
+    });
+    root.addEventListener('pointerdown', (event) => {
+        hide();
+        const target = asking(event.target);
+        if (target !== null && pointerType(event) === 'touch')
+            later(target, TOOLTIP_HOLD_MS);
+    });
+    root.addEventListener('pointerup', (event) => {
+        if (pointerType(event) !== 'touch')
+            return;
+        if (anchor === null) {
+            clearTimeout(timer);
+            return;
+        }
+        timer = setTimeout(hide, TOOLTIP_TOUCH_MS);
+    });
+    root.addEventListener('focusin', (event) => {
+        const target = asking(event.target);
+        if (target !== null)
+            show(target);
+    });
+    root.addEventListener('focusout', hide);
+    return { element, hide };
+}
+/** What the tooltip needs to work at all, kept with `unstyled` too: fixed in place, out of the way of the pointer. */
+export const TOOLTIP_BASE_STYLES = `
+.tooltip { position: fixed; inset: auto; margin: 0; pointer-events: none; }
+`;
+/** Its look: a small pill in the panel's own colours turned around, so it follows the theme and the page's overrides. */
+export const TOOLTIP_STYLES = `
+:host {
+  --flung-tooltip-background: var(--flung-text);
+  --flung-tooltip-text: var(--flung-surface);
+  --flung-tooltip-radius: var(--flung-radius-inner);
+  --flung-tooltip-shadow: 0 4px 14px rgb(0 0 0 / .16);
+}
+.tooltip {
+  z-index: 2147483647; max-width: min(20rem, calc(100vw - 16px)); padding: 4px 8px; border: 0; border-radius: var(--flung-tooltip-radius);
+  background: var(--flung-tooltip-background); color: var(--flung-tooltip-text); box-shadow: var(--flung-tooltip-shadow);
+  font: var(--flung-font-weight-medium) var(--flung-font-size-small)/1.35 var(--flung-font); overflow-wrap: anywhere;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .tooltip:not([hidden]) { animation: flung-tooltip-in .12s ease-out; }
+}
+@keyframes flung-tooltip-in { from { opacity: 0; } }
+`;

package/dist/index.d.ts

@@ -4,8 +4,6 @@
  * or call `defineFlungConnect()`.
  */
 export { defineFlungConnect, TAG_NAME } from './element/define.js';
-export type { FlungConnectElement } from './element/flung-connect.js';
-export { DEFAULT_LABELS } from './element/copy.js';
-export type { ConnectLabels } from './element/copy.js';
-export type { ConnectDetail, DisconnectDetail, ErrorDetail, FlungConnectEventMap, LoadDetail } from './element/events.js';
+export type { FlungConnectElement, FlungConnectLayout, FlungConnectVariants } from './element/flung-connect.js';
+export type { ChangeDetail, FlungConnectEventMap } from './element/events.js';
 export * from './core/index.js';

package/dist/index.js

@@ -4,5 +4,4 @@
  * or call `defineFlungConnect()`.
  */
 export { defineFlungConnect, TAG_NAME } from './element/define.js';
-export { DEFAULT_LABELS } from './element/copy.js';
 export * from './core/index.js';

package/dist/react/index.d.ts

@@ -1,9 +1,32 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { TokenSource } from '../core/client.js';
+import type { AccountItem, ConnectActions, PlatformItem } from '../core/controller.js';
+import type { ConnectLabels } from '../core/labels.js';
 import type { Platform } from '../core/types.js';
-import type { ConnectLabels } from '../element/copy.js';
 import type { ConnectDetail, DisconnectDetail, ErrorDetail, LoadDetail } from '../element/events.js';
-import type { FlungConnectElement } from '../element/flung-connect.js';
+import type { FlungConnectElement, FlungConnectLayout, FlungConnectVariants } from '../element/flung-connect.js';
+export { useFlungConnect } from './use-flung-connect.js';
+export type { UseFlungConnectOptions, UseFlungConnectResult } from './use-flung-connect.js';
+/** What `renderPlatform` is given: the platform, the actions, and the words in use. */
+export interface PlatformRowProps {
+    /** The platform, its accounts and what it is doing. */
+    platform: PlatformItem;
+    /** The panel's actions. Call `connect` straight from a click: a browser opens a window only during one. */
+    actions: ConnectActions;
+    /** The panel's words, defaults filled in. */
+    labels: ConnectLabels;
+}
+/** What `renderAccount` is given: the account, its platform, the actions, and the words in use. */
+export interface AccountRowProps {
+    /** The account and what to show for it. */
+    account: AccountItem;
+    /** The platform it is on. */
+    platform: PlatformItem;
+    /** The panel's actions, such as `reconnect(account.account.id)` and `requestDisconnect(account.account.id)`. */
+    actions: ConnectActions;
+    /** The panel's words, defaults filled in. */
+    labels: ConnectLabels;
+}
 /**
  * `<FlungConnect>`: the `<flung-connect>` element for React. It registers the element on first render, passes plain
  * values as attributes, sets `token` and `labels` as properties, and turns the element's events into callbacks. React
@@ -18,13 +41,40 @@ export interface FlungConnectProps {
     platforms?: readonly Platform[] | undefined;
     /** `redirect` sends the whole page to the platform and back, for pages that cannot open windows. */
     mode?: 'popup' | 'redirect' | undefined;
+    /** `light` or `dark`. Follows the page's colour scheme when left out. */
     theme?: 'light' | 'dark' | undefined;
+    /** `list` (the default), `grid` or `compact`. */
+    layout?: FlungConnectLayout | undefined;
+    /**
+     * How a platform with a connect variant is offered. `choose` (the default) asks after Connect whether to connect a
+     * LinkedIn personal profile or a company page; `tiles` shows them as two platforms, LinkedIn and LinkedIn Page.
+     */
+    variants?: FlungConnectVariants | undefined;
+    /** Drops Flung's stylesheet, so every `::part()` is yours to style. */
+    unstyled?: boolean | undefined;
+    /** `none` hides the small "Secured by Flung" line under the list. */
+    branding?: 'none' | undefined;
+    /** Any of the panel's words, to put it in another language. */
     labels?: Partial<ConnectLabels> | undefined;
+    /** A class for the element itself. */
     className?: string | undefined;
+    /** Styles for the element, such as its `--flung-*` custom properties. */
     style?: CSSProperties | undefined;
+    /**
+     * Draws a platform's row (its mark, name and Connect button) yourself, in your page's own DOM and CSS. The panel keeps
+     * the accounts, the handle question, the wait and the confirm below it.
+     */
+    renderPlatform?: ((props: PlatformRowProps) => ReactNode) | undefined;
+    /** Draws one account's row yourself, in your page's own DOM and CSS. The panel keeps the confirm and the messages. */
+    renderAccount?: ((props: AccountRowProps) => ReactNode) | undefined;
+    /** The accounts were read: on first show and after every change. */
     onLoad?: ((detail: LoadDetail) => void) | undefined;
+    /** A connect or reconnect finished. */
     onConnect?: ((detail: ConnectDetail) => void) | undefined;
+    /** An account was disconnected. */
     onDisconnect?: ((detail: DisconnectDetail) => void) | undefined;
+    /** A call or a connect failed. */
     onError?: ((detail: ErrorDetail) => void) | undefined;
 }
+/** The `<flung-connect>` element as a React component. */
 export declare const FlungConnect: import("react").ForwardRefExoticComponent<FlungConnectProps & import("react").RefAttributes<FlungConnectElement>>;

package/dist/react/index.js

@@ -1,5 +1,7 @@
-import { createElement, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { initialConnectState } from '../core/controller.js';
 import { defineFlungConnect, TAG_NAME } from '../element/define.js';
+export { useFlungConnect } from './use-flung-connect.js';
 const EVENTS = { 'flung-load': 'onLoad', 'flung-connect': 'onConnect', 'flung-disconnect': 'onDisconnect', 'flung-error': 'onError' };
 const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 function FlungConnectInner(props, ref) {
@@ -36,14 +38,50 @@ function FlungConnectInner(props, ref) {
         if (node.token !== props.token)
             node.token = props.token;
     }, [props.token, props.labels]);
+    // The element's state, only when a render prop needs it, so a panel without them renders no more often than before.
+    const custom = props.renderPlatform !== undefined || props.renderAccount !== undefined;
+    const subscribe = useCallback((notify) => {
+        const node = element.current;
+        if (!custom || node === null)
+            return () => undefined;
+        node.addEventListener('flung-change', notify);
+        return () => node.removeEventListener('flung-change', notify);
+    }, [custom]);
+    const initial = initialConnectState(props.token !== null);
+    const state = useSyncExternalStore(subscribe, () => (custom ? (element.current?.state ?? initial) : initial), () => initial);
+    const actions = useMemo(() => {
+        const controller = () => element.current?.controller ?? null;
+        return {
+            connect: (platform, options) => controller()?.connect(platform, options),
+            submitHandle: (platform, handle) => controller()?.submitHandle(platform, handle),
+            reconnect: (accountId) => controller()?.reconnect(accountId),
+            requestDisconnect: (accountId) => controller()?.requestDisconnect(accountId),
+            confirmDisconnect: (platform) => controller()?.confirmDisconnect(platform) ?? Promise.resolve(),
+            cancel: (platform) => controller()?.cancel(platform),
+            dismissNotice: () => controller()?.dismissNotice(),
+            refresh: () => controller()?.refresh() ?? Promise.resolve(),
+        };
+    }, []);
+    // Each custom row goes into the light DOM with the element's slot name for it, so your CSS reaches it directly.
+    const children = custom
+        ? state.platforms.flatMap((platform) => [
+            props.renderPlatform === undefined ? null : createElement('div', { key: `platform-${platform.platform}`, slot: `platform-${platform.platform}` }, props.renderPlatform({ platform, actions, labels: state.labels })),
+            ...(props.renderAccount === undefined ? [] : platform.accounts.map((account) => createElement('div', { key: `account-${account.account.id}`, slot: `account-${account.account.id}` }, props.renderAccount?.({ account, platform, actions, labels: state.labels })))),
+        ])
+        : undefined;
     return createElement(TAG_NAME, {
         ref: element,
         'base-url': props.baseUrl,
         platforms: props.platforms?.join(','),
         mode: props.mode,
         theme: props.theme,
+        layout: props.layout,
+        variants: props.variants,
+        unstyled: props.unstyled === true ? '' : undefined,
+        branding: props.branding,
         class: props.className,
         style: props.style,
-    });
+    }, children);
 }
+/** The `<flung-connect>` element as a React component. */
 export const FlungConnect = forwardRef(FlungConnectInner);

package/dist/react/use-flung-connect.d.ts

@@ -0,0 +1,13 @@
+import type { ConnectActions, ConnectControllerOptions, ConnectState } from '../core/controller.js';
+/** What `useFlungConnect` takes: the controller's options. Callbacks and a token function may be new on every render. */
+export type UseFlungConnectOptions = ConnectControllerOptions;
+/** What `useFlungConnect` returns: the state to draw, and the actions to call from your own buttons and forms. */
+export type UseFlungConnectResult = ConnectState & ConnectActions;
+/**
+ * The connect panel with none of Flung's markup, for drawing every piece with your own components and CSS. It runs a
+ * `createConnectController` for as long as the component is mounted, and a new one when the token string, `baseUrl`
+ * or whether there is a `fetch` changes. A token function, `fetch` and the callbacks are read fresh on every call, so
+ * they need no `useCallback`. Call `connect`, `submitHandle` and `reconnect` straight from a click or submit handler: a
+ * browser opens a window only during one.
+ */
+export declare function useFlungConnect(options: UseFlungConnectOptions): UseFlungConnectResult;