Dynamic Island

---
/**
 * DynamicIsland — a black pill that changes shape with its state, zero
 * JS. `auto → auto` never animates, so every state declares its size:
 * `states: [{ name, width, height, radius }]` in rem. The active state is
 * `data-state` on the element — set by the prop or by your script — and
 * because the names come from props, one small inline style block is
 * rendered per instance (an id from a hash of the states) that maps each name to its
 * three lengths and shows the matching child. Width, height and radius
 * transition on the preset spring; the old content blurs and fades on the
 * fast token, the new one arrives after it. Children carry `data-state`;
 * the first state is the default.
 */
import type { HTMLAttributes } from 'astro/types';

interface State {
  name: string;
  /** rem */
  width: number;
  /** rem */
  height: number;
  /** rem; default half the height (a pill). */
  radius?: number;
}

interface Props extends HTMLAttributes<'div'> {
  states: State[];
  /** Active state; default the first. */
  state?: string;
  /** Element id — deterministic from the states when omitted; pass one for two identical islands on a page. */
  id?: string;
  /** Announce content changes (aria-live="polite" on the body). */
  live?: boolean;
  /** Island colour; the island is black by nature, not the ink token. */
  color?: string;
  textColor?: string;
}

const { states, state, id, live = false, color, textColor, class: className, style, ...rest } = Astro.props;
const first = states[0] ?? { name: 'idle', width: 7.5, height: 2.25 };
// djb2 over the states: the same states give the same id on every build, so a visual test is stable
const hash = (s: string) => {
  let h = 5381;
  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) >>> 0;
  return h.toString(36);
};
const islandId = id ?? `ma-island-${hash(JSON.stringify(states))}`;
const active = states.some((s) => s.name === state) ? state! : first.name;
const vars = [color && `--ma-di-bg:${color}`, textColor && `--ma-di-fg:${textColor}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
// both come from props and are printed into CSS: the id as an identifier (CSS.escape's rules: an id may start with a
// digit or hold punctuation, and `#2fa` alone is not a selector), each name as a quoted string. `<` is escaped in both,
// so no value can close the style element it is printed in.
const hex = (c: string) => `\\${c.codePointAt(0)!.toString(16)} `;
const ident = (v: string) => v.replace(/^-?\d|[\0-\x1f\x7f]|[^\w\u0080-\uffff-]/g, (c) => (c.length > 1 ? c[0] + hex(c[1]!) : /[\d\0-\x1f\x7f]/.test(c) ? hex(c) : `\\${c}`));
const str = (v: string) => `"${v.replace(/["\\]/g, '\\$&').replace(/[\n\r\f<]/g, hex)}"`;
const sel = `#${ident(islandId)}`;
const rule = (s: State) => {
  const r = s.radius ?? s.height / 2;
  const n = str(s.name);
  return `${sel}[data-state=${n}]{--ma-di-w:${s.width}rem;--ma-di-h:${s.height}rem;--ma-di-r:${r}rem}${sel}[data-state=${n}]>.ma-island__body>[data-state=${n}]{opacity:1;filter:none;scale:1;pointer-events:auto;transition-delay:var(--ma-duration-fast)}`;
};
const css = states.map(rule).join('');
---

<style is:global>
  @layer components {
    :where(.ma-island) {
      --ma-di-w: 7.5rem;
      --ma-di-h: 2.25rem;
      --ma-di-r: 1.125rem;
      display: grid;
      place-items: stretch;
      inline-size: var(--ma-di-w);
      block-size: var(--ma-di-h);
      border-radius: var(--ma-di-r);
      background: var(--ma-di-bg, #0a0a0b);
      color: var(--ma-di-fg, #fff);
      overflow: clip;
      box-shadow: 0 8px 30px -12px rgb(0 0 0 / 0.6);
      transition:
        inline-size var(--ma-duration) var(--ma-ease),
        block-size var(--ma-duration) var(--ma-ease),
        border-radius var(--ma-duration) var(--ma-ease);
    }
    :where(.ma-island__body) {
      display: grid;
      inline-size: 100%;
      block-size: 100%;
      min-inline-size: 0;
      min-block-size: 0;
    }
    /* every state's content sits in the same cell; the active one is picked by the instance's own rules */
    :where(.ma-island__body > [data-state]) {
      grid-area: 1 / 1;
      display: flex;
      align-items: center;
      gap: 0.6em;
      min-inline-size: 0;
      opacity: 0;
      filter: blur(4px);
      scale: 0.92;
      pointer-events: none;
      transition:
        opacity var(--ma-duration-fast) var(--ma-ease-out),
        filter var(--ma-duration-fast) var(--ma-ease-out),
        scale var(--ma-duration-fast) var(--ma-ease-out);
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-island),
      :where(.ma-island__body > [data-state]) {
        transition: none;
        filter: none;
        scale: 1;
      }
    }
  }
</style>

<div class:list={['ma-island', className]} id={islandId} data-state={active} style={vars || undefined} {...rest}>
  <div class="ma-island__body" aria-live={live ? 'polite' : undefined}><slot /></div>
</div>
<style is:inline set:html={css}></style>