@firedrill-tools/linkedin 0.1.1

package/firedrill/tools/linkedin/app/site/composer.js

@@ -0,0 +1,112 @@
+// "Create a post" modal: post-as selector, visibility, text with counter, link attachment, repost embed and edit mode.
+import { el, call, newKey, describe, toast, avatar, busy } from "./ui.js";
+import { icon } from "./icons.js";
+import { openModal, closeModal, showMenu } from "./overlay.js";
+import { session, actingPages } from "./store.js";
+import { escapeLittleText, littleTextToPlain } from "./text.js";
+
+const MAX = 3000;
+const VIS = { PUBLIC: ["globe", "Anyone"], CONNECTIONS: ["people", "Connections only"] };
+let draft = { text: "", visibility: "PUBLIC" };
+
+/** options: { repostOf?: feed entry, edit?: feed entry, draftPost?: post (publish/edit a draft), onDone } */
+export function openComposer({ repostOf = null, edit = null, onDone } = {}) {
+  const viewer = session.viewer;
+  if (!viewer) return;
+  const editing = Boolean(edit);
+  let author = editing ? edit.post.author : viewer.personUrn;
+  let visibility = editing ? edit.post.visibility : repostOf ? "PUBLIC" : draft.visibility;
+  const modal = openModal({ title: editing ? "Edit post" : "Create a post", className: "modal--composer", onClose: () => { if (!editing && !repostOf) draft = { text: textarea.value, visibility }; } });
+
+  const who = el("button", { class: "composer__who", attrs: { type: "button", "aria-haspopup": "menu", "aria-expanded": "false", disabled: editing ? true : undefined } });
+  const paintWho = () => {
+    const page = actingPages().find((p) => p.organizationUrn === author);
+    const name = page ? page.name : viewer.name;
+    const [visIcon, visLabel] = VIS[visibility] ?? VIS.PUBLIC;
+    who.replaceChildren(
+      avatar(name, author, 56, Boolean(page)),
+      el("span", { class: "composer__who-text" }, [
+        el("span", { class: "composer__who-name" }, [el("span", { text: name }), editing ? null : icon("caret-down")]),
+        el("span", { class: "composer__who-vis" }, [icon(visIcon), el("span", { text: `Post to ${visLabel}` })]),
+      ]),
+    );
+    who.setAttribute("aria-label", `Posting as ${name}, visible to ${visLabel}. Change`);
+  };
+  who.addEventListener("click", () => {
+    const choices = [{ urn: viewer.personUrn, name: viewer.name, sub: "Your profile" }, ...actingPages().map((p) => ({ urn: p.organizationUrn, name: p.name, sub: "Page you manage" }))];
+    showMenu(who, [
+      ...choices.map((c) => ({ label: `${c.urn === author ? "✓ " : ""}${c.name}`, sub: c.sub, onSelect: () => { author = c.urn; if (c.urn !== viewer.personUrn) visibility = "PUBLIC"; paintWho(); } })),
+      ...Object.entries(VIS).map(([key, [visIcon, label]]) => ({ icon: visIcon, label: `${key === visibility ? "✓ " : ""}${label}`, sub: key === "PUBLIC" ? "Anyone on or off LinkedIn" : "Connections on LinkedIn", disabled: key === "CONNECTIONS" && author !== viewer.personUrn, onSelect: () => { visibility = key; paintWho(); } })),
+    ], { align: "left" });
+  });
+  paintWho();
+
+  const textarea = el("textarea", { class: "composer__text", attrs: { "aria-label": "Text editor for creating content", placeholder: repostOf ? "Start writing or use @ to mention people" : "What do you want to talk about?", rows: "8" } });
+  textarea.value = editing ? littleTextToPlain(edit.post.commentary) : repostOf ? "" : draft.text;
+  const counter = el("span", { class: "composer__counter", attrs: { "aria-live": "polite" } });
+  const error = el("p", { class: "composer__error", attrs: { role: "alert" }, hidden: true });
+  error.hidden = true;
+
+  const link = { open: false };
+  const linkBox = el("div", { class: "composer__link", hidden: true });
+  linkBox.hidden = true;
+  const linkUrl = el("input", { class: "field__input", attrs: { id: "composer-link-url", type: "url", placeholder: "https://" } });
+  const linkTitle = el("input", { class: "field__input", attrs: { id: "composer-link-title", type: "text", maxlength: "400" } });
+  linkBox.append(
+    el("label", { class: "field__label", text: "Link URL", attrs: { for: "composer-link-url" } }), linkUrl,
+    el("label", { class: "field__label", text: "Headline", attrs: { for: "composer-link-title" } }), linkTitle,
+  );
+
+  const embed = repostOf ? el("div", { class: "composer__embed" }, [
+    el("div", { class: "composer__embed-head" }, [avatar(repostOf.actor.name, repostOf.actor.urn, 32, repostOf.actor.kind === "organization"), el("span", { class: "t-bold", text: repostOf.actor.name })]),
+    el("p", { class: "composer__embed-text", text: littleTextToPlain(repostOf.post.commentary) }),
+  ]) : null;
+
+  modal.heading.classList.add("visually-hidden");
+  modal.heading.before(who);
+  modal.body.append(...[textarea, embed, linkBox, error].filter(Boolean));
+  const tools = el("div", { class: "composer__tools" }, [
+    el("button", { class: "icon-btn", title: "Add a link", attrs: { type: "button", "aria-label": "Add a link", disabled: editing || repostOf ? true : undefined }, on: { click: () => { link.open = !link.open; linkBox.hidden = !link.open; if (link.open) linkUrl.focus(); } } }, icon("link")),
+    el("button", { class: "icon-btn", title: "Add media", attrs: { type: "button", "aria-label": "Add media", "data-not-simulated": "Photo and video uploads" } }, icon("photo")),
+    el("button", { class: "icon-btn", title: "Create an event", attrs: { type: "button", "aria-label": "Create an event", "data-not-simulated": "Events" } }, icon("calendar")),
+    el("button", { class: "icon-btn", title: "More", attrs: { type: "button", "aria-label": "More", "data-not-simulated": "Polls, documents and other post types" } }, icon("plus")),
+  ]);
+  const submit = el("button", { class: "btn btn--primary btn--sm composer__submit", text: editing ? "Save" : "Post", attrs: { type: "button" } });
+  modal.footer.append(tools, el("div", { class: "composer__submit-row" }, [counter, submit]));
+
+  const validate = () => {
+    const length = [...textarea.value].length;
+    counter.textContent = length > MAX - 200 ? `${MAX - length}` : "";
+    counter.classList.toggle("composer__counter--over", length > MAX);
+    const empty = textarea.value.trim() === "" && !repostOf && !(link.open && linkUrl.value.trim());
+    submit.disabled = empty || length > MAX;
+  };
+  textarea.addEventListener("input", () => { error.hidden = true; validate(); });
+  linkUrl.addEventListener("input", validate);
+  validate();
+
+  const key = newKey(); // reused if the same submission is retried after an uncertain failure
+  submit.addEventListener("click", () => busy(submit, async () => {
+    error.hidden = true;
+    const commentary = escapeLittleText(textarea.value.trim());
+    try {
+      if (editing) {
+        await call("posts.update", { postUrn: edit.post.id, commentary }, key);
+      } else {
+        const args = { author, commentary, visibility, distribution: { feedDistribution: "MAIN_FEED", targetEntities: [], thirdPartyDistributionChannels: [] }, lifecycleState: "PUBLISHED", isReshareDisabledByAuthor: false };
+        if (repostOf) args.reshareContext = { parent: repostOf.post.id };
+        if (link.open && linkUrl.value.trim()) args.content = { article: { source: linkUrl.value.trim(), title: linkTitle.value.trim() || linkUrl.value.trim() } };
+        await call("posts.create", args, key);
+        if (!repostOf) draft = { text: "", visibility: "PUBLIC" };
+      }
+      closeModal();
+      toast(editing ? "Post updated." : repostOf ? "Repost successful." : "Post successful.");
+      await onDone?.();
+    } catch (failure) {
+      error.hidden = false;
+      error.textContent = failure?.code === "INTERNAL_SERVER_ERROR" && !editing
+        ? "Something went wrong. Check your recent activity before posting again — your post may have been published."
+        : describe(failure);
+    }
+  }));
+}

package/firedrill/tools/linkedin/app/site/feed.css

@@ -0,0 +1,105 @@
+.home { display: grid; grid-template-columns: 225px minmax(0, 555px) 300px; gap: 24px; justify-content: center; align-items: start; }
+.rail-left, .rail-right { position: sticky; top: 76px; }
+
+/* Identity card */
+.identity { overflow: hidden; }
+.identity__cover { height: 58px; background: linear-gradient(135deg, #a0b4b7 0%, #c7d2d4 55%, #dfe6e7 100%); }
+.identity__main { padding: 0 12px 16px; text-align: left; }
+.identity__avatar { display: inline-block; margin-top: -38px; border-radius: 50%; }
+.identity__name { display: block; margin-top: 8px; font-size: 18px; line-height: 1.33; font-weight: 600; color: var(--text); }
+.identity__name:hover { text-decoration: underline; color: var(--text); }
+.identity__headline { margin-top: 4px; font-size: 12px; line-height: 1.33; color: var(--text); }
+.identity__location { margin-top: 4px; font-size: 12px; color: var(--text-2); }
+.identity__page { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--text); }
+.identity__page:hover { text-decoration: none; }
+.identity__page .avatar { width: 20px; height: 20px; font-size: 10px; }
+.identity__rows { border-top: 1px solid var(--divider); padding: 12px 0; }
+.identity__row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 4px 12px; border: 0; background: none; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.identity__row:hover { background: var(--hover); text-decoration: none; }
+.identity__row-sub { display: block; font-weight: 600; color: var(--text); }
+.identity__row-value { color: var(--blue); }
+.identity__premium { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--divider); background: none; text-align: left; font-size: 12px; color: var(--text-2); cursor: pointer; }
+.identity__premium strong { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--text); }
+.identity__premium:hover { background: var(--hover); }
+.identity__premium-mark { display: inline-block; width: 14px; height: 14px; border-radius: 2px; background: linear-gradient(135deg, #f8c77e, #e7a33e); }
+.shortcuts { padding: 8px 0; }
+.shortcuts__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; }
+.shortcuts__item:hover { background: var(--hover); }
+
+/* Share box */
+.share-box { padding: 8px 16px 4px; }
+.share-box__top { display: flex; gap: 8px; align-items: center; }
+.share-box__trigger { flex: 1; height: 48px; padding: 10px 16px; border: 0; border-radius: 35px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); background: #fff; text-align: left; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.share-box__trigger:hover { background: var(--hover); }
+.share-box__actions { display: flex; justify-content: space-between; margin-top: 4px; }
+.share-box__action { display: inline-flex; align-items: center; gap: 8px; padding: 12px 8px; border: 0; border-radius: 4px; background: none; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
+.share-box__action:hover { background: var(--hover); }
+.share-box__action--video .icon { color: #5f9b41; }
+.share-box__action--photo .icon { color: #378fe9; }
+.share-box__action--article .icon { color: #e06847; }
+
+.sort-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--text-2); }
+.sort-bar::before { content: ""; flex: 1; height: 1px; background: #d6d6d6; }
+.sort-bar strong { color: var(--text); display: inline-flex; align-items: center; }
+.sort-bar button { border: 0; background: none; font-size: 12px; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
+
+.new-posts { position: sticky; top: 64px; z-index: 5; display: flex; justify-content: center; height: 0; }
+.new-posts button { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--blue); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); cursor: pointer; }
+.new-posts button .icon { width: 16px; height: 16px; }
+
+.feed-list > * + * { margin-top: 8px; }
+.feed-more { display: flex; justify-content: center; margin-top: 8px; }
+.feed-more .btn { width: 100%; background: #fff; box-shadow: var(--shadow); border-radius: 8px; color: var(--text-2); font-size: 14px; }
+.feed-more .btn:hover { background: #f3f3f3; color: var(--text); }
+.feed-end { padding: 16px; text-align: center; color: var(--text-2); font-size: 14px; }
+
+.state-card { padding: 32px 24px; text-align: center; }
+.state-card__title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
+.state-card__text { color: var(--text-2); margin-bottom: 16px; }
+.state-card--error { border-left: 4px solid var(--danger); text-align: left; }
+
+.skeleton { padding: 12px 16px 16px; }
+.skeleton__row { display: flex; gap: 8px; margin-bottom: 12px; }
+.skeleton__circle { width: 48px; height: 48px; border-radius: 50%; }
+.skeleton__line { height: 12px; border-radius: 6px; margin: 6px 0; }
+.skeleton__circle, .skeleton__line { background: linear-gradient(90deg, #eeebe6 25%, #f7f5f2 50%, #eeebe6 75%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
+@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
+
+/* Right rail */
+.news { padding: 12px 0 8px; }
+.news__head { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 0 16px; }
+.news__title { font-size: 16px; font-weight: 600; }
+.news__sub { padding: 4px 16px 0; font-size: 14px; font-weight: 600; color: var(--text-2); }
+.news__empty { padding: 8px 16px; font-size: 12px; color: var(--text-2); }
+.follow { padding: 12px 0 8px; }
+.follow__item { display: flex; gap: 8px; padding: 8px 16px; }
+.follow__name { display: block; font-weight: 600; color: var(--text); }
+.follow__sub { font-size: 12px; color: var(--text-2); }
+.follow__item .btn { margin-top: 8px; }
+.rail-footer { padding: 16px 8px; text-align: center; font-size: 12px; color: var(--text-2); }
+.rail-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
+.rail-footer__links button { border: 0; background: none; padding: 0; font-size: 12px; color: var(--text-2); cursor: pointer; }
+.rail-footer__links button:hover { color: var(--blue); text-decoration: underline; }
+.rail-footer__brand { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: var(--text); }
+.rail-footer__brand img { height: 14px; width: auto; }
+
+@media (max-width: 1199px) { .home { grid-template-columns: 225px minmax(0, 1fr) 300px; } }
+@media (max-width: 991px) { .home { grid-template-columns: 225px minmax(0, 1fr); } .rail-right { display: none; } }
+@media (max-width: 767px) {
+  .home { grid-template-columns: minmax(0, 1fr); }
+  .home > * { min-width: 0; max-width: 100%; }
+  .rail-left { position: static; }
+  .app-main { padding: 12px 12px 48px; }
+  .global-nav { padding: 0 8px; }
+  .global-nav__logo { margin-right: 2px; }
+  .search { flex: 1 1 0; min-width: 72px; margin-right: 4px; }
+  .search:focus-within { flex-basis: 0; }
+  .search__input { padding-left: 32px; }
+  .search__icon { left: 8px; }
+  .typeahead { width: min(380px, calc(100vw - 16px)); }
+  .global-nav__primary { flex: none; margin-left: 0; }
+  .nav-item { min-width: 40px; padding: 0 2px; }
+  .nav-item__label, .nav-premium, .nav-divider, .global-nav__items > li:has(> [data-not-simulated="For Business"]) { display: none; }
+}
+.skeleton__grow { flex: 1; }
+.skeleton__line--w40 { width: 40%; } .skeleton__line--w60 { width: 60%; } .skeleton__line--w70 { width: 70%; } .skeleton__line--w85 { width: 85%; }

package/firedrill/tools/linkedin/app/site/feed.js

@@ -0,0 +1,134 @@
+// Home: identity card and shortcuts (left), share box + paged feed (centre), pages and footer (right).
+import { el, call, describe, avatar, setServerNow, busy } from "./ui.js";
+import { icon } from "./icons.js";
+import { session } from "./store.js";
+import { renderPostCard } from "./post.js";
+import { openComposer } from "./composer.js";
+import { modalOpen } from "./overlay.js";
+
+const PAGE = 10;
+
+function skeleton() {
+  return el("div", { class: "card skeleton", attrs: { "aria-hidden": "true" } }, [
+    el("div", { class: "skeleton__row" }, [el("div", { class: "skeleton__circle" }), el("div", { class: "skeleton__grow" }, [el("div", { class: "skeleton__line skeleton__line--w40" }), el("div", { class: "skeleton__line skeleton__line--w60" })])]),
+    el("div", { class: "skeleton__line" }), el("div", { class: "skeleton__line skeleton__line--w85" }), el("div", { class: "skeleton__line skeleton__line--w70" }),
+  ]);
+}
+
+export function identityCard() {
+  const v = session.viewer;
+  const href = `#/in/${encodeURIComponent(v.personUrn.split(":").pop())}`;
+  const pages = v.pages.slice(0, 1);
+  return el("div", { class: "card identity" }, [
+    el("div", { class: "identity__cover", attrs: { "aria-hidden": "true" } }),
+    el("div", { class: "identity__main" }, [
+      el("a", { class: "identity__avatar", attrs: { href, "aria-label": v.name, tabindex: "-1" } }, avatar(v.name, v.personUrn, 72)),
+      el("a", { class: "identity__name", text: v.name, attrs: { href } }),
+      v.headline ? el("p", { class: "identity__headline", text: v.headline }) : null,
+      ...pages.map((p) => el("a", { class: "identity__page", attrs: { href: `#/company/${encodeURIComponent(p.vanityName)}` } }, [avatar(p.name, p.organizationUrn, 24, true), el("span", { text: p.name })])),
+    ]),
+    el("div", { class: "identity__rows" }, [
+      el("a", { class: "identity__row", attrs: { href: "#/mynetwork" } }, [el("span", {}, [el("span", { text: "Connections" }), el("span", { class: "identity__row-sub", text: "Grow your network" })]), el("span", { class: "identity__row-value", text: String(v.connectionCount) })]),
+      el("button", { class: "identity__row", attrs: { type: "button", "data-not-simulated": "Profile viewers" } }, el("span", { text: "Profile viewers" })),
+      el("button", { class: "identity__row", attrs: { type: "button", "data-not-simulated": "Post impressions" } }, el("span", { text: "Post impressions" })),
+    ]),
+    el("button", { class: "identity__premium", attrs: { type: "button", "data-not-simulated": "Premium" } }, [el("span", { text: "Access exclusive tools & insights" }), el("strong", {}, [el("span", { class: "identity__premium-mark", attrs: { "aria-hidden": "true" } }), el("span", { text: "Try Premium for $0" })])]),
+    el("button", { class: "identity__premium", attrs: { type: "button", "data-not-simulated": "Saved items" } }, el("strong", {}, [icon("bookmark"), el("span", { text: "Saved items" })])),
+  ]);
+}
+
+function shortcuts() {
+  return el("div", { class: "card shortcuts" }, [["group", "Groups"], ["newsletter", "Newsletters"], ["calendar", "Events"]].map(([glyph, label]) =>
+    el("button", { class: "shortcuts__item", attrs: { type: "button", "data-not-simulated": label } }, [icon(glyph), el("span", { text: label })])));
+}
+
+function rightRail() {
+  const pages = session.viewer.pages;
+  return el("aside", { class: "rail-right" }, [
+    el("div", { class: "card news" }, [
+      el("div", { class: "news__head" }, [el("h2", { class: "news__title", text: "LinkedIn News" }), el("button", { class: "icon-btn icon-btn--sm", title: "About news", attrs: { type: "button", "aria-label": "About LinkedIn News", "data-not-simulated": "LinkedIn News" } }, icon("info"))]),
+      el("p", { class: "news__sub", text: "Top stories" }),
+      el("p", { class: "news__empty", text: "News stories aren't simulated in this environment." }),
+    ]),
+    pages.length ? el("div", { class: "card follow" }, [
+      el("div", { class: "news__head" }, el("h2", { class: "news__title", text: "Your pages" })),
+      ...pages.map((p) => el("div", { class: "follow__item" }, [avatar(p.name, p.organizationUrn, 48, true), el("div", {}, [
+        el("a", { class: "follow__name", text: p.name, attrs: { href: `#/company/${encodeURIComponent(p.vanityName)}` } }),
+        el("span", { class: "follow__sub", text: p.roles.map((r) => r.charAt(0) + r.slice(1).toLowerCase().replaceAll("_", " ")).join(", ") }),
+        el("div", {}, el("a", { class: "btn btn--muted btn--sm", text: "View page", attrs: { href: `#/company/${encodeURIComponent(p.vanityName)}` } })),
+      ])])),
+    ]) : null,
+    footer(),
+  ]);
+}
+
+export function footer() {
+  const links = ["About", "Accessibility", "Help Center", "Privacy & Terms", "Ad Choices", "Advertising", "Business Services", "Get the LinkedIn app", "More"];
+  return el("footer", { class: "rail-footer" }, [
+    el("div", { class: "rail-footer__links" }, links.map((label) => el("button", { text: label, attrs: { type: "button", "data-not-simulated": label } }))),
+    el("div", { class: "rail-footer__brand" }, [el("img", { attrs: { src: "./assets/linkedin-wordmark.svg", alt: "LinkedIn", width: "56", height: "14" } }), el("span", { text: "Simulated in a Firedrill world" })]),
+  ]);
+}
+
+export function renderHome(main) {
+  const v = session.viewer;
+  const list = el("div", { class: "feed-list", attrs: { "aria-busy": "true" } }, [skeleton(), skeleton()]);
+  const more = el("div", { class: "feed-more" });
+  const newPosts = el("div", { class: "new-posts" });
+  newPosts.hidden = true;
+  let loaded = 0;
+  let total = 0;
+
+  const load = async ({ reset }) => {
+    const start = reset ? 0 : loaded;
+    const count = reset ? Math.max(PAGE, loaded) : PAGE;
+    try {
+      const page = await call("feed.list", { start, count });
+      setServerNow(page.serverTimeMs);
+      session.viewer = page.viewer;
+      if (reset) { list.replaceChildren(); loaded = 0; }
+      for (const entry of page.elements) list.append(renderPostCard(entry, { onReload: () => load({ reset: true }) }));
+      loaded = start + page.elements.length;
+      total = page.paging.total ?? loaded;
+      list.removeAttribute("aria-busy");
+      more.replaceChildren();
+      if (loaded === 0) list.append(el("div", { class: "card state-card" }, [el("h2", { class: "state-card__title", text: "Start a conversation" }), el("p", { class: "state-card__text", text: "Your feed is empty. Posts from you, your connections and pages you follow will show up here." }), el("button", { class: "btn btn--primary", text: "Start a post", attrs: { type: "button" }, on: { click: () => openComposer({ onDone: () => load({ reset: true }) }) } })]));
+      else if (loaded < total) more.append(el("button", { class: "btn", text: "Show more feed updates", attrs: { type: "button" }, on: { click: (event) => busy(event.currentTarget, () => load({ reset: false })) } }));
+      else more.append(el("p", { class: "feed-end", text: "You're all caught up." }));
+    } catch (error) {
+      list.removeAttribute("aria-busy");
+      if (reset) list.replaceChildren();
+      more.replaceChildren(el("div", { class: "card state-card state-card--error", attrs: { role: "alert" } }, [el("h2", { class: "state-card__title", text: "Couldn't load your feed" }), el("p", { class: "state-card__text", text: describe(error) }), el("button", { class: "btn btn--secondary", text: "Retry", attrs: { type: "button" }, on: { click: () => load({ reset }) } })]));
+    }
+  };
+
+  const shareBox = el("div", { class: "card share-box" }, [
+    el("div", { class: "share-box__top" }, [
+      el("a", { attrs: { href: `#/in/${encodeURIComponent(v.personUrn.split(":").pop())}`, "aria-label": "View your profile", tabindex: "-1" } }, avatar(v.name, v.personUrn, 48)),
+      el("button", { class: "share-box__trigger", text: "Start a post", attrs: { type: "button" }, on: { click: () => openComposer({ onDone: () => load({ reset: true }) }) } }),
+    ]),
+    el("div", { class: "share-box__actions" }, [
+      el("button", { class: "share-box__action share-box__action--video", attrs: { type: "button", "data-not-simulated": "Video posts" } }, [icon("video"), el("span", { text: "Video" })]),
+      el("button", { class: "share-box__action share-box__action--photo", attrs: { type: "button", "data-not-simulated": "Photo posts" } }, [icon("photo"), el("span", { text: "Photo" })]),
+      el("button", { class: "share-box__action share-box__action--article", attrs: { type: "button", "data-not-simulated": "Articles" } }, [icon("article"), el("span", { text: "Write article" })]),
+    ]),
+  ]);
+  const sortBar = el("div", { class: "sort-bar" }, [el("span", { text: "Sort by:" }), el("button", { attrs: { type: "button", "aria-label": "Sort feed: Recent", "data-not-simulated": "Feed sort options" } }, [el("strong", { text: "Recent" }), icon("caret-down")])]);
+  newPosts.append(el("button", { attrs: { type: "button" }, on: { click: () => { newPosts.hidden = true; window.scrollTo({ top: 0 }); void load({ reset: true }); } } }, [icon("arrow-up"), el("span", { text: "New posts" })]));
+
+  main.replaceChildren(el("div", { class: "home" }, [
+    el("aside", { class: "rail-left" }, [identityCard(), shortcuts()]),
+    el("div", { class: "feed-main" }, [shareBox, sortBar, newPosts, list, more]),
+    rightRail(),
+  ]));
+  void load({ reset: true });
+
+  return {
+    /** World changed elsewhere: reload unless the reader has unsent work, in which case offer "New posts". */
+    refresh: () => {
+      const typing = [...main.querySelectorAll(".comment-box__input")].some((input) => input.value.trim()) || main.querySelector(".comment-box .btn[data-busy='true']") || modalOpen();
+      if (typing) newPosts.hidden = false; else return load({ reset: true });
+      return undefined;
+    },
+  };
+}

package/firedrill/tools/linkedin/app/site/icons.js

@@ -0,0 +1,70 @@
+// Monochrome 24px interface glyphs (original paths) and the six coloured reaction badges.
+const NS = "http://www.w3.org/2000/svg";
+
+const PATHS = {
+  "nav-home": "M23 9v2h-2v7a3 3 0 01-3 3h-4v-6h-4v6H6a3 3 0 01-3-3v-7H1V9l11-7 5 3.18V2h3v5.09z",
+  "nav-network": "M12 16v6H3v-6a3 3 0 013-3h3a3 3 0 013 3zm5.5-3A3.5 3.5 0 1014 9.5a3.5 3.5 0 003.5 3.5zm1 2h-2a2.5 2.5 0 00-2.5 2.5V22h7v-4.5a2.5 2.5 0 00-2.5-2.5zM7.5 2A4.5 4.5 0 1012 6.5 4.49 4.49 0 007.5 2z",
+  "nav-jobs": "M17 6V5a3 3 0 00-3-3h-4a3 3 0 00-3 3v1H2v4a3 3 0 003 3h14a3 3 0 003-3V6zM9 5a1 1 0 011-1h4a1 1 0 011 1v1H9zm10 9a4 4 0 003-1.38V17a3 3 0 01-3 3H5a3 3 0 01-3-3v-4.38A4 4 0 005 14z",
+  "nav-messaging": "M16 4H8a7 7 0 000 14h4v4l8.16-5.39A6.78 6.78 0 0023 11a7 7 0 00-7-7zm-8 8.25A1.25 1.25 0 119.25 11 1.25 1.25 0 018 12.25zm4 0A1.25 1.25 0 1113.25 11 1.25 1.25 0 0112 12.25zm4 0A1.25 1.25 0 1117.25 11 1.25 1.25 0 0116 12.25z",
+  "nav-bell": "M22 19h-8.28a2 2 0 11-3.44 0H2v-1a4.52 4.52 0 011.17-2.83l1-1.17h15.7l1 1.17A4.42 4.42 0 0122 18zM18.21 7.44A6.27 6.27 0 0012 2a6.27 6.27 0 00-6.21 5.44L5 13h14z",
+  "nav-grid": "M3 3h4v4H3zm7 4h4V3h-4zm7-4v4h4V3zM3 14h4v-4H3zm7 0h4v-4h-4zm7 0h4v-4h-4zM3 21h4v-4H3zm7 0h4v-4h-4zm7 0h4v-4h-4z",
+  search: "M14.56 12.44L11.3 9.18a5.51 5.51 0 10-2.12 2.12l3.26 3.26a1.5 1.5 0 102.12-2.12zM3 6.5A3.5 3.5 0 116.5 10 3.5 3.5 0 013 6.5z",
+  "caret-down": "M8 11L3 6h10z",
+  like: "M19.46 11l-3.91-3.91a7 7 0 01-1.69-2.74l-.49-1.47A2.76 2.76 0 0010.76 1 2.75 2.75 0 008 3.74v1.12a9.19 9.19 0 00.46 2.85L8.89 9H4.12A2.12 2.12 0 002 11.12a2.16 2.16 0 00.92 1.76A2.11 2.11 0 002 14.62a2.14 2.14 0 001.28 2 2 2 0 00-.28 1 2.12 2.12 0 002 2.12v.14A2.12 2.12 0 007.12 22h7.49a8.08 8.08 0 003.58-.84l.31-.16H21V11zM19 19h-1l-.73.37a6.14 6.14 0 01-2.69.63H7.72a1 1 0 01-1-.72l-.25-.87-.85-.41A1 1 0 015 17l.17-1-.76-.74A1 1 0 014.27 14l.66-1.09-.73-1.1a.49.49 0 01.08-.7.48.48 0 01.34-.11h7.05l-1.31-3.92A7 7 0 0110 4.86V3.75a.77.77 0 01.75-.75.75.75 0 01.71.51L12 5a9 9 0 002.13 3.5l4.5 4.5H19z",
+  comment: "M7 9h10v1H7zm0 4h7v-1H7zm16-2a6.78 6.78 0 01-2.84 5.61L12 22v-4H8A7 7 0 018 4h8a7 7 0 017 7zm-2 0a5 5 0 00-5-5H8a5 5 0 000 10h6v2.28L19 15a4.79 4.79 0 002-4z",
+  repost: "M13.96 5H6c-.55 0-1 .45-1 1v10H3V6c0-1.66 1.34-3 3-3h7.96L12 0h2.37L17 4l-2.63 4H12l1.96-3zm5.54 3H19v10c0 .55-.45 1-1 1h-7.96L12 16H9.63L7 20l2.63 4H12l-1.96-3H18c1.66 0 3-1.34 3-3V8h-1.5z",
+  send: "M21 3L0 10l7.66 4.26L16 8l-6.26 8.34L14 24l7-21z",
+  ellipsis: "M14 12a2 2 0 11-2-2 2 2 0 012 2zM4 10a2 2 0 102 2 2 2 0 00-2-2zm16 0a2 2 0 102 2 2 2 0 00-2-2z",
+  close: "M13.42 12L20 18.58 18.58 20 12 13.42 5.42 20 4 18.58 10.58 12 4 5.42 5.42 4 12 10.58 18.58 4 20 5.42z",
+  "close-sm": "M14 3.41L9.41 8 14 12.59 12.59 14 8 9.41 3.41 14 2 12.59 6.59 8 2 3.41 3.41 2 8 6.59 12.59 2z",
+  globe: "M8 1a7 7 0 107 7 7 7 0 00-7-7zM3 8a5 5 0 011-3l.55.55A1.5 1.5 0 015 6.62v1.07a.75.75 0 00.22.53l.56.56a.75.75 0 00.53.22H7v.69a.75.75 0 00.22.53l.56.56a.75.75 0 01.22.53V13a5 5 0 01-5-5zm6.24 4.83l2-2.46a.75.75 0 00.09-.8l-.58-1.16A.76.76 0 0010 8H7v-.19a.51.51 0 01.28-.45l.38-.19a.74.74 0 01.68 0L9 7.5l.38-.7a1 1 0 00.12-.48v-.85a.78.78 0 01.21-.53l1.07-1.09a5 5 0 01-1.54 9z",
+  people: "M9.5 8A2.5 2.5 0 107 5.5 2.5 2.5 0 009.5 8zm0 1C7.57 9 6 10.12 6 11.5V13h7v-1.5C13 10.12 11.43 9 9.5 9zM4.5 7A1.5 1.5 0 103 5.5 1.5 1.5 0 004.5 7zM5 11.5a3.16 3.16 0 01.52-1.72A2.47 2.47 0 004.5 9.5C3.12 9.5 2 10.29 2 11.25V13h3z",
+  lock: "M12 7V6a4 4 0 00-8 0v1H3v8h10V7zM6 6a2 2 0 014 0v1H6z",
+  pencil: "M21.13 2.86a3 3 0 00-4.17 0l-13 13L2 22l6.19-2L21.13 7a3 3 0 000-4.16zM6.77 18.57l-1.35-1.34L16.64 6 18 7.35z",
+  trash: "M20 4v1H4V4a1 1 0 011-1h4a1 1 0 011-1h4a1 1 0 011 1h4a1 1 0 011 1zM5 6h14v13a3 3 0 01-3 3H8a3 3 0 01-3-3zm9 13h1V9h-1zm-5 0h1V9H9z",
+  "comment-off": "M2.41 1L1 2.41l3.13 3.13A7 7 0 008 18h4v4l5.3-3.5 4.29 4.29L23 21.41zM8 16a5 5 0 01-2.44-9.36L14.92 16zm15-5a6.83 6.83 0 01-2.23 5.13l-1.42-1.42A4.87 4.87 0 0021 11a5 5 0 00-5-5H9.24l-2-2H16a7 7 0 017 7z",
+  link: "M18 10.5a3.5 3.5 0 01-1 2.5l-3.5 3.5a3.5 3.5 0 01-5-5l.5-.5 1.4 1.4-.5.5a1.5 1.5 0 002.1 2.1l3.5-3.5a1.5 1.5 0 00-2.1-2.1l-.4.4L11.6 8l.4-.4a3.5 3.5 0 016 2.9zM12.4 16l-.4.4a1.5 1.5 0 01-2.1-2.1l3.5-3.5a1.5 1.5 0 012.1 0L17 9.4a3.5 3.5 0 00-5-.4L8.5 12.5a3.5 3.5 0 005 5l.4-.4z",
+  photo: "M19 4H5a3 3 0 00-3 3v10a3 3 0 003 3h14a3 3 0 003-3V7a3 3 0 00-3-3zm1 13a1 1 0 01-.29.71L16 14l-2 2-6-6-4 4V7a1 1 0 011-1h14a1 1 0 011 1zm-2-7a2 2 0 11-2-2 2 2 0 012 2z",
+  video: "M19 4H5a3 3 0 00-3 3v10a3 3 0 003 3h14a3 3 0 003-3V7a3 3 0 00-3-3zm-9 12V8l6 4z",
+  article: "M21 3v2H3V3zm-6 6h6V7h-6zm0 4h6v-2h-6zm0 4h6v-2h-6zM3 21h18v-2H3zM13 7H3v10h10z",
+  bookmark: "M13 4a3 3 0 00-3-3H3v14l5-4.5 5 4.5z",
+  group: "M8.5 7h-1A1.5 1.5 0 006 8.5V14h4V8.5A1.5 1.5 0 008.5 7zM12.75 8h-.5A1.25 1.25 0 0011 9.25V14h3V9.25A1.25 1.25 0 0012.75 8zM3.75 8h-.5A1.25 1.25 0 002 9.25V14h3V9.25A1.25 1.25 0 003.75 8zM8 6a2 2 0 10-2-2 2 2 0 002 2zm4.5 1A1.5 1.5 0 1011 5.5 1.5 1.5 0 0012.5 7zm-9 0A1.5 1.5 0 102 5.5 1.5 1.5 0 003.5 7z",
+  newsletter: "M13 13H3V3h10zM2 1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V2a1 1 0 00-1-1zm3 4h6v1H5zm0 2.5h6v1H5zM5 10h4v1H5z",
+  calendar: "M2 2v9a3 3 0 003 3h6a3 3 0 003-3V2zm10 9a1 1 0 01-1 1H5a1 1 0 01-1-1V6h8zM7 8H5V7h2zm4 0H8V7h3zM7 11H5v-1h2zm4 0H8v-1h3z",
+  info: "M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 15h-2v-6h2zm0-8h-2V7h2z",
+  "arrow-up": "M12 3l7 7-1.4 1.4-4.6-4.6V21h-2V6.8L6.4 11.4 5 10z",
+  plus: "M21 13h-8v8h-2v-8H3v-2h8V3h2v8h8z",
+  emoji: "M8 1a7 7 0 107 7 7 7 0 00-7-7zm3 3.5A1.5 1.5 0 119.5 6 1.5 1.5 0 0111 4.5zm-6 0A1.5 1.5 0 113.5 6 1.5 1.5 0 015 4.5zM8 13a4.5 4.5 0 01-4.24-3h8.48A4.5 4.5 0 018 13z",
+  check: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
+  alert: "M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 15h-2v-2h2zm0-4h-2V7h2z",
+  "back": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z",
+};
+const SMALL = new Set(["caret-down", "close-sm", "globe", "people", "lock", "bookmark", "group", "newsletter", "calendar", "emoji"]);
+
+/** An `<svg>` glyph filled with currentColor. */
+export function icon(name, className) {
+  const svg = document.createElementNS(NS, "svg");
+  const size = SMALL.has(name) ? 16 : 24;
+  svg.setAttribute("viewBox", name === "search" ? "0 0 16 16" : `0 0 ${size} ${size}`);
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  svg.setAttribute("class", `icon icon--${name}${className ? ` ${className}` : ""}`);
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("d", PATHS[name] ?? PATHS.info);
+  path.setAttribute("fill", "currentColor");
+  svg.append(path);
+  return svg;
+}
+
+/** Replace every `[data-icon]` placeholder under root with its glyph. */
+export function hydrateIcons(root = document) {
+  for (const holder of root.querySelectorAll("[data-icon]")) {
+    const name = holder.getAttribute("data-icon");
+    holder.removeAttribute("data-icon");
+    holder.append(icon(name));
+  }
+}
+
+export { reactionBadge, REACTIONS } from "./reactions.js";

package/firedrill/tools/linkedin/app/site/index.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Feed | LinkedIn (synthetic)</title>
+    <link rel="icon" type="image/svg+xml" href="./assets/linkedin.svg" />
+    <link rel="stylesheet" href="./base.css" />
+    <link rel="stylesheet" href="./nav.css" />
+    <link rel="stylesheet" href="./feed.css" />
+    <link rel="stylesheet" href="./post.css" />
+    <link rel="stylesheet" href="./overlay.css" />
+    <link rel="stylesheet" href="./comments.css" />
+    <link rel="stylesheet" href="./pages.css" />
+    <script type="module" src="./app.js"></script>
+  </head>
+  <body>
+    <div id="boot" class="boot" role="status" aria-live="polite">
+      <img src="./assets/linkedin-wordmark.svg" alt="LinkedIn" width="168" height="42" />
+      <div class="boot-bar"><span></span></div>
+    </div>
+    <header class="global-nav" id="global-nav" hidden>
+      <div class="global-nav__content">
+        <a class="global-nav__logo" href="#/feed" aria-label="LinkedIn home" title="Home"><img src="./assets/linkedin.svg" alt="" width="34" height="34" /></a>
+        <div class="search" role="search">
+          <span class="search__icon" data-icon="search"></span>
+          <label class="visually-hidden" for="search-input">Search</label>
+          <input id="search-input" class="search__input" type="text" placeholder="Search" autocomplete="off" spellcheck="false" aria-expanded="false" aria-controls="search-results" />
+          <div class="typeahead" id="search-results" role="listbox" aria-label="Search suggestions" hidden></div>
+        </div>
+        <nav class="global-nav__primary" aria-label="Primary Navigation">
+          <ul class="global-nav__items">
+            <li><a class="nav-item" href="#/feed" data-nav="feed"><span data-icon="nav-home"></span><span class="nav-item__label">Home</span></a></li>
+            <li><a class="nav-item" href="#/mynetwork" data-nav="mynetwork"><span data-icon="nav-network"></span><span class="nav-item__label">My Network</span></a></li>
+            <li><button type="button" class="nav-item" data-not-simulated="Jobs"><span data-icon="nav-jobs"></span><span class="nav-item__label">Jobs</span></button></li>
+            <li><button type="button" class="nav-item" data-not-simulated="Messaging"><span data-icon="nav-messaging"></span><span class="nav-item__label">Messaging</span></button></li>
+            <li><button type="button" class="nav-item" data-not-simulated="Notifications"><span data-icon="nav-bell"></span><span class="nav-item__label">Notifications</span></button></li>
+            <li class="nav-me">
+              <button type="button" class="nav-item" id="me-button" aria-haspopup="menu" aria-expanded="false" data-nav="me"><span class="avatar avatar--24" id="me-avatar" aria-hidden="true"></span><span class="nav-item__label">Me <span data-icon="caret-down" class="caret"></span></span></button>
+              <div class="me-menu" id="me-menu" role="menu" hidden></div>
+            </li>
+            <li class="nav-divider" aria-hidden="true"></li>
+            <li><button type="button" class="nav-item" data-not-simulated="For Business"><span data-icon="nav-grid"></span><span class="nav-item__label">For Business <span data-icon="caret-down" class="caret"></span></span></button></li>
+            <li><button type="button" class="nav-premium" data-not-simulated="Premium">Try Premium for $0</button></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <main id="main" class="app-main" tabindex="-1" hidden></main>
+    <div id="overlay-root"></div>
+    <div class="toast" id="toast" role="status" aria-live="polite" hidden>
+      <span class="toast__icon" id="toast-icon"></span>
+      <span class="toast__text" id="toast-text"></span>
+      <button type="button" class="toast__action" id="toast-action" aria-label="Toast action" hidden></button>
+      <button type="button" class="icon-btn icon-btn--sm" id="toast-close" aria-label="Dismiss" title="Dismiss"><span data-icon="close-sm"></span></button>
+    </div>
+  </body>
+</html>

package/firedrill/tools/linkedin/app/site/nav.css

@@ -0,0 +1,51 @@
+.global-nav { position: sticky; top: 0; z-index: 20; height: 52px; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: 0 24px; }
+.global-nav__content { display: flex; align-items: center; max-width: 1128px; height: 100%; margin: 0 auto; }
+.global-nav__logo { display: flex; flex: none; margin-right: 8px; border-radius: 4px; }
+.global-nav__logo img { display: block; width: 34px; height: 34px; }
+.search { position: relative; flex: 0 1 280px; margin-right: 12px; }
+.search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: rgba(0, 0, 0, 0.9); pointer-events: none; }
+.search__icon .icon { width: 16px; height: 16px; }
+.search__input { width: 100%; height: 34px; padding: 0 8px 0 40px; border: 0; border-radius: 4px; background: var(--search); font-size: 14px; box-shadow: none; transition: width .15s; }
+.search__input::placeholder { color: rgba(0, 0, 0, 0.6); }
+.search__input:focus { outline: none; box-shadow: inset 0 0 0 2px #000; }
+.search:focus-within { flex-basis: 380px; }
+.typeahead { position: absolute; top: 40px; left: 0; width: 380px; max-height: 480px; overflow-y: auto; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 0 0 1px var(--hairline), 0 4px 12px rgba(0, 0, 0, 0.15); padding: 8px 0; }
+.typeahead__heading { padding: 4px 16px; font-size: 12px; font-weight: 600; color: var(--text-2); }
+.typeahead__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--text); }
+.typeahead__item:hover, .typeahead__item[aria-selected="true"] { background: var(--hover); text-decoration: none; }
+.typeahead__name { font-weight: 600; }
+.typeahead__sub { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.typeahead__empty { padding: 12px 16px; color: var(--text-2); }
+.typeahead__footer { display: block; width: 100%; padding: 10px 16px 4px; border: 0; border-top: 1px solid var(--divider); margin-top: 6px; background: none; color: var(--blue); font-weight: 600; text-align: center; cursor: pointer; }
+
+.global-nav__primary { margin-left: auto; height: 100%; }
+.global-nav__items { display: flex; align-items: stretch; height: 100%; }
+.global-nav__items > li { display: flex; position: relative; }
+.nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 80px; height: 52px; padding: 0 4px; border: 0; background: none; color: rgba(0, 0, 0, 0.6); cursor: pointer; font-size: 12px; line-height: 1.33; text-decoration: none !important; }
+.nav-item:hover { color: rgba(0, 0, 0, 0.9); }
+.nav-item .icon { width: 24px; height: 24px; }
+.nav-item__label { display: flex; align-items: center; font-weight: 400; white-space: nowrap; }
+.nav-item .caret { display: inline-flex; margin-left: 1px; }
+.nav-item .caret .icon { width: 16px; height: 16px; }
+.nav-item[aria-current="page"] { color: rgba(0, 0, 0, 0.9); }
+.nav-item[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(0, 0, 0, 0.9); }
+.nav-me .avatar { margin-bottom: 0; }
+.nav-divider { width: 1px; margin: 0 8px; background: rgba(0, 0, 0, 0.08); }
+.nav-premium { align-self: center; max-width: 90px; padding: 0 4px; border: 0; background: none; color: #915907; font-size: 12px; line-height: 1.33; text-align: center; text-decoration: underline; cursor: pointer; }
+.nav-premium:hover { color: #5d3b09; }
+
+.me-menu { position: absolute; top: 48px; right: 0; width: 264px; background: #fff; border-radius: 8px 0 8px 8px; box-shadow: 0 0 0 1px var(--hairline), 0 4px 12px rgba(0, 0, 0, 0.15); padding: 8px 0; z-index: 30; }
+.me-menu__head { display: flex; gap: 8px; padding: 4px 12px 8px; }
+.me-menu__name { font-size: 16px; font-weight: 600; }
+.me-menu__headline { font-size: 14px; color: var(--text); }
+.me-menu__view { display: block; margin: 4px 12px 8px; }
+.me-menu__view .btn { width: 100%; }
+.me-menu__section { border-top: 1px solid var(--divider); padding: 8px 0 4px; }
+.me-menu__title { padding: 0 12px 4px; font-size: 16px; font-weight: 600; }
+.me-menu__link { display: block; width: 100%; padding: 4px 12px; border: 0; background: none; text-align: left; color: var(--text-2); font-size: 14px; cursor: pointer; }
+.me-menu__link:hover { text-decoration: underline; color: var(--text); }
+.me-menu__link:disabled { cursor: not-allowed; opacity: .6; text-decoration: none; }
+
+.app-main { max-width: 1176px; margin: 0 auto; padding: 24px 24px 48px; }
+.app-main:focus, .app-main:focus-visible { outline: none; }
+.typeahead__text { display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }