@plannotator/ui 0.36.0 → 0.38.0

package/theme.css

@@ -912,6 +912,17 @@ html:has([data-pn-compact-touch-layout='true'])
   gap: 0.5rem;
 }
 
+/* Percentages in translate use the toolbar's own width. Correct only its
+ * horizontal overflow; leave the existing transform animation untouched. */
+html:has([data-pn-compact-touch-layout='true'])
+  [data-pn-annotation-toolbar-centered='true'] {
+  translate: clamp(
+    calc(var(--pn-viewport-offset-left, 0px) + var(--pn-safe-left, 0px) - var(--pn-annotation-toolbar-anchor-x) + 50%),
+    0px,
+    calc(var(--pn-viewport-offset-left, 0px) + var(--pn-viewport-width, 100vw) - var(--pn-safe-right, 0px) - var(--pn-annotation-toolbar-anchor-x) - 50%)
+  ) 0;
+}
+
 html:has([data-pn-compact-touch-layout='true'])
   [data-pn-touch-target]:not(:disabled):not([aria-disabled='true']):active {
   filter: brightness(0.92);

package/utils/alertTitle.ts

@@ -0,0 +1,69 @@
+/**
+ * The title-line grammar for GitHub alerts (`> [!NOTE|TIP|IMPORTANT|WARNING|CAUTION]`).
+ *
+ * The first body line of an alert is a TITLE LINE when the whole line matches:
+ *
+ *     [<emoji> ][**<title>**][ <!-- icon: <name> -->]
+ *
+ * that is, in order: optionally one emoji (followed by one space when anything
+ * follows it); optionally a bold-only run `**title**` with no other characters
+ * around it; optionally one space and an HTML comment `<!-- icon: name -->`
+ * where name is `[A-Za-z0-9][A-Za-z0-9_-]*`; at least one of the three
+ * present; trailing whitespace ignored. It only counts when the NEXT body line
+ * is empty (the `>` line GitHub needs to start a new paragraph) or the block
+ * ends there. Anything else is ordinary body and the alert renders as before.
+ *
+ * Decided from bytes alone, so a host editor can apply the same rule to the
+ * raw lines it decorates. Kept pure and dependency-free for that reason.
+ */
+
+export interface AlertTitleLine {
+  /** The leading emoji, when present (one grapheme, ZWJ/modifier sequences included). */
+  emoji?: string;
+  /** The bold-only title text, when present (the `**` marks stripped). */
+  title?: string;
+  /** The `<!-- icon: name -->` name, when present. Never rendered as text. */
+  icon?: string;
+  /** The body after the title line and its separating empty line. */
+  rest: string;
+}
+
+// One emoji: a regional-indicator pair (flag) or a pictographic base with
+// optional skin-tone / variation / keycap marks, joined by ZWJ to more of the
+// same. Deliberately not the whole Unicode emoji property (which would admit
+// bare digits and `#`).
+const EMOJI =
+  '(?:\\p{RI}\\p{RI}|\\p{Extended_Pictographic}(?:\\p{Emoji_Modifier}|\\uFE0F|\\u20E3)*' +
+  '(?:\\u200D\\p{Extended_Pictographic}(?:\\p{Emoji_Modifier}|\\uFE0F)*)*)';
+
+const ICON_NAME = '[A-Za-z0-9][A-Za-z0-9_-]*';
+
+const TITLE_LINE = new RegExp(
+  `^(?:(${EMOJI})(?= |$) ?)?(?:\\*\\*([^*\\n]+?)\\*\\*)?(?: ?<!--\\s*icon:\\s*(${ICON_NAME})\\s*-->)?$`,
+  'u',
+);
+
+/**
+ * Split an alert body into its title line and the rest, or return null when
+ * the first line is not a title line by the grammar above.
+ */
+export function parseAlertTitleLine(body: string): AlertTitleLine | null {
+  const firstBreak = body.indexOf('\n');
+  const first = firstBreak === -1 ? body : body.slice(0, firstBreak);
+  const after = firstBreak === -1 ? '' : body.slice(firstBreak + 1);
+
+  const match = first.trimEnd().match(TITLE_LINE);
+  if (!match) return null;
+  const [, emoji, title, icon] = match;
+  if (!emoji && !title && !icon) return null;
+
+  // The next line must be empty, or the block must end.
+  if (after !== '') {
+    const secondBreak = after.indexOf('\n');
+    const second = secondBreak === -1 ? after : after.slice(0, secondBreak);
+    if (second.trim() !== '') return null;
+    const rest = secondBreak === -1 ? '' : after.slice(secondBreak + 1);
+    return { emoji, title: title?.trim(), icon, rest };
+  }
+  return { emoji, title: title?.trim(), icon, rest: '' };
+}

package/utils/decisionSpec.ts

@@ -0,0 +1,430 @@
+/**
+ * Pure state→spec mapping for the unified header decision control.
+ *
+ * No React, no DOM, no imports — this is what keeps the state matrix testable
+ * in the plain `bun test` lane and keeps "both apps and both states are data,
+ * not forked components" true. `DecisionControl.tsx` renders whatever this
+ * returns; the apps translate ids into handlers.
+ *
+ * NOT host-supported surface: like ActionMenu/ConfirmDialog, this module is
+ * app-shared chrome and is deliberately absent from the README supported-import
+ * list and the strict-consumer tsconfig.
+ *
+ * Labels, subtitles and confirm strings are the approved prototype's
+ * (DESIGN_final-proposal.html `spec()`), authoritative over any older branch
+ * or mock copy — except where a later maintainer ruling supersedes it: the
+ * non-gate empty menu carries ONE composer ("Send a note…"), and no
+ * user-facing string uses an em dash.
+ */
+
+export type DecisionActionId =
+  | 'primary'              // the left segment
+  | 'note-with-approval'   // "Approve with a note…" (approval flows only)
+  | 'request-changes'      // "Request changes…"
+  | 'note-with-feedback'   // "Send with a note…"
+  | 'approve-with-notes'   // review + gate-annotate; capability-gated
+  | 'discard-and-finish';  // "Done/Approve, discard n annotations…"
+
+export type DecisionTone = 'success' | 'primary' | 'neutral' | 'destructive';
+
+export interface DecisionPrimary {
+  id: 'primary';
+  label: string;            // 'Done' | 'Approve' | 'Send Feedback' | 'Post Comments'
+  shortLabel?: string;      // 'Send' — the lg-breakpoint label
+  mobileLabel?: string;     // compact/touch row label
+  title: string;            // tooltip / aria description
+  tone: Exclude<DecisionTone, 'destructive'>;
+  icon?: 'check' | 'send';
+  count?: number;           // rendered as the inline pill; omitted when 0
+  /**
+   * Platform self-approval (PR6, §3.4): rendered dimmed but NOT disabled.
+   * The reason surfaces through the shared Tooltip + aria-describedby (the
+   * native title is deliberately dropped when muted, pinned by test), and
+   * every invocation path (click, Mod+Enter, compact row) is a no-op. The
+   * caret stays live so the menu's non-approve paths remain reachable.
+   */
+  muted?: boolean;
+}
+
+export interface DecisionComposer {
+  title: string;            // popover back-button title, e.g. 'Send with a note'
+  actionLabel: string;      // the composer's own button, e.g. 'Send feedback with note'
+  tone: Exclude<DecisionTone, 'destructive'>;
+  icon?: 'check' | 'send';
+  placeholder: string;      // 'Add a note...'
+}
+
+export interface DecisionConfirm {
+  title: string;
+  message: string;
+  confirmText: string;
+}
+
+export interface DecisionMenuItem {
+  id: Exclude<DecisionActionId, 'primary'>;
+  label: string;
+  subtitle: string;
+  tone: DecisionTone;
+  icon?: 'check' | 'send';
+  dividerBefore?: boolean;
+  composer?: DecisionComposer;   // present ⇒ the item morphs the popover
+  confirm?: DecisionConfirm;     // present ⇒ the item raises one confirm
+  /**
+   * Platform self-approval (PR6, §3.4): the row renders disabled with the
+   * reason in its subtitle. Muted rather than removed, so the menu still
+   * documents the path and no state is a dead end (the non-approve rows
+   * stay live).
+   */
+  muted?: boolean;
+}
+
+export interface DecisionSpec {
+  primary: DecisionPrimary;
+  items: DecisionMenuItem[];
+}
+
+export interface DecisionSpecInput {
+  app: 'annotate' | 'review';
+  /** Annotate: `gate`. Review: always true — review's primary decision IS approval. */
+  gate: boolean;
+  /** The count rendered in the pill and interpolated into labels. */
+  count: number;
+  /**
+   * Whether there is anything to send. Deliberately separate from `count`:
+   * annotate counts direct edits / saved-file changes / attachments as
+   * feedback with count 0 (`hasFeedbackContent` in the annotate app).
+   */
+  hasFeedback: boolean;
+  /** Does the runtime deliver feedback on approve? Gates every approve-carrying item. */
+  approvalNotesSupported: boolean;
+  /**
+   * M1 ruling: the session's feedback was already delivered through the
+   * annotate agent terminal, which is why `hasFeedback` reads false. The
+   * empty-flip state keeps its `Done` primary AND its transport (the outer
+   * agent's stdout consumer may never have seen the terminal delivery, so
+   * the full payload still posts) — only the copy changes, because "reviewed
+   * with no feedback" would be a lie in that state. Copy is free prose,
+   * NOT frozen.
+   */
+  feedbackDelivered?: boolean;
+  /**
+   * PR6 (§3.4): presence selects the platform (PR/MR destination) arm — the
+   * same DecisionSpec shape with NO composer and NO confirm items, ever:
+   * every platform action opens the existing ReviewSubmissionDialog, whose
+   * own general-comment textarea is the only note field on that side (a
+   * second composer would double-post via buildFileScopedBody).
+   * `approvalNotesSupported` is deliberately ignored by this arm — the
+   * platform posts to the forge API natively — so approve-carrying items
+   * gate only on `selfAuthored`, muted rather than removed.
+   */
+  platform?: DecisionPlatformInput;
+}
+
+export interface DecisionPlatformInput {
+  /** Platform display name ('GitHub' / 'GitLab') — named in the self-approval tooltip. */
+  label: string;
+  /** The PR/MR noun ('PR' / 'MR') the short mute reason uses. */
+  mrLabel: string;
+  /** The viewer authored this PR/MR: approve paths mute, never disappear. */
+  selfAuthored: boolean;
+}
+
+export const DECISION_NOTE_PLACEHOLDER = 'Add a note...';
+
+function annotationNoun(count: number): string {
+  return count === 1 ? 'annotation' : 'annotations';
+}
+
+/**
+ * The empty state: no feedback to send, the primary is the positive finish.
+ * `approvalFlow` (gate annotate, or review) makes it `Approve`; plain annotate
+ * gets `Done`.
+ */
+function buildEmptySpec(input: DecisionSpecInput, approvalFlow: boolean): DecisionSpec {
+  // "Approve with a note…" carries a note on the approve channel, which four
+  // runtimes still discard — it renders only where the advert says delivery
+  // works (never an item that silently drops content). Non-gate annotate has
+  // no approve channel and no positive-note item at all: the maintainer ruled
+  // the old "Done with a note…" / "Request changes…" pair collapsed into the
+  // single "Send a note…" below, because their only difference was framing on
+  // the same /api/feedback transport.
+  const positive: DecisionMenuItem | null = approvalFlow && input.approvalNotesSupported
+    ? {
+        id: 'note-with-approval',
+        label: 'Approve with a note…',
+        subtitle: 'Approve and send a short note with it',
+        tone: 'success',
+        icon: 'check',
+        composer: {
+          title: 'Approve with a note',
+          actionLabel: 'Approve and send note',
+          tone: 'success',
+          icon: 'check',
+          placeholder: DECISION_NOTE_PLACEHOLDER,
+        },
+      }
+    : null;
+
+  const requestChanges: DecisionMenuItem = approvalFlow
+    ? {
+        id: 'request-changes',
+        // Frozen copy (maintainer-approved): 'Request changes…'.
+        label: 'Request changes…',
+        subtitle: 'Write overall feedback, sent as a change request',
+        tone: 'primary',
+        icon: 'send',
+        dividerBefore: positive !== null,
+        composer: {
+          title: 'Request changes',
+          actionLabel: 'Send as feedback',
+          tone: 'primary',
+          icon: 'send',
+          placeholder: DECISION_NOTE_PLACEHOLDER,
+        },
+      }
+    : {
+        // Maintainer ruling (empty-menu collapse): the one non-gate composer.
+        // Same id and route as the old change request (plain /api/feedback,
+        // no approval framing) — only the copy is new. Free prose, NOT frozen.
+        id: 'request-changes',
+        label: 'Send a note…',
+        subtitle: 'Write a note and send it as feedback',
+        tone: 'primary',
+        icon: 'send',
+        dividerBefore: false,
+        composer: {
+          title: 'Send a note',
+          actionLabel: 'Send as feedback',
+          tone: 'primary',
+          icon: 'send',
+          placeholder: DECISION_NOTE_PLACEHOLDER,
+        },
+      };
+
+  return {
+    primary: approvalFlow
+      ? {
+          id: 'primary',
+          // Frozen copy (maintainer-approved): 'Approve'.
+          label: 'Approve',
+          title: 'Approve: no changes requested',
+          tone: 'success',
+          icon: 'check',
+        }
+      : {
+          id: 'primary',
+          // Frozen copy (maintainer-approved): 'Done'.
+          label: 'Done',
+          // M1 ruling: in the agent-terminal delivered state the transport is
+          // unchanged (the full payload still posts, because the outer agent
+          // on stdout may never have seen the terminal delivery), so the
+          // tooltip must not claim "no feedback". Free prose, NOT frozen.
+          title: input.feedbackDelivered
+            ? 'Finish: sends the session record (feedback already shared in the terminal)'
+            : 'Finish: records that you reviewed with no feedback',
+          // Maintainer ruling (post-demo): Done without a gate is a positive
+          // finish, NOT an approval — no success tone, no check icon, so it
+          // can never be mistaken for the gate/review Approve.
+          tone: 'neutral',
+        },
+    items: positive ? [positive, requestChanges] : [requestChanges],
+  };
+}
+
+/**
+ * The feedback state: something to send, the primary is `Send Feedback`.
+ * Identical across apps; only the discard item's verb follows the flow.
+ */
+function buildFeedbackSpec(input: DecisionSpecInput, approvalFlow: boolean): DecisionSpec {
+  const { count } = input;
+  const noun = annotationNoun(count);
+
+  const items: DecisionMenuItem[] = [
+    {
+      id: 'note-with-feedback',
+      label: 'Send with a note…',
+      subtitle:
+        count > 0
+          ? `Add an overall note on top of your ${count} ${noun}`
+          : 'Add an overall note on top of your feedback',
+      tone: 'primary',
+      icon: 'send',
+      composer: {
+        title: 'Send with a note',
+        actionLabel: 'Send feedback with note',
+        tone: 'primary',
+        icon: 'send',
+        placeholder: DECISION_NOTE_PLACEHOLDER,
+      },
+    },
+  ];
+
+  // The divider separates "send" alternates from "approve away" alternates —
+  // it sits before whichever approve-flavoured item comes first.
+  let dividerPending = true;
+
+  // Capability-gated only (F2 ruling, maintainer-confirmed): at count 0 the feedback is direct edits / saved-file
+  // changes / attachments, and a capable approve transport delivers those too,
+  // so the item stays offered with zero-form copy — no "0 annotations"
+  // language. Subtitles are free prose, NOT frozen.
+  if (approvalFlow && input.approvalNotesSupported) {
+    items.push({
+      id: 'approve-with-notes',
+      // Frozen copy (maintainer-approved): 'Approve with notes'.
+      label: 'Approve with notes',
+      subtitle:
+        count > 0
+          ? `Approve; your ${count} ${noun} ride along as non-blocking guidance`
+          : 'Approve; your edits and attachments ride along as non-blocking guidance',
+      tone: 'success',
+      icon: 'check',
+      dividerBefore: dividerPending,
+    });
+    dividerPending = false;
+  }
+
+  // Destructive by definition — it throws the annotations away — so it always
+  // carries the one confirm the new model keeps. With count 0 there is nothing
+  // to discard and the item is omitted.
+  if (count > 0) {
+    items.push({
+      id: 'discard-and-finish',
+      label: approvalFlow
+        ? `Approve, discard ${count} ${noun}…`
+        : `Done, discard ${count} ${noun}…`,
+      subtitle: 'Asks to confirm: the annotations are not sent',
+      tone: 'destructive',
+      icon: 'check',
+      dividerBefore: dividerPending,
+      // L5: neutral wording — the count can include findings from other
+      // tools, and the non-gate record still carries any direct edits.
+      // Free prose, NOT frozen.
+      confirm: approvalFlow
+        ? {
+            title: `Discard ${count} ${noun} and approve?`,
+            message:
+              'These annotations are change requests, including any from other tools. Approving without them tells the agent no changes are needed.',
+            // Frozen copy (maintainer-approved): 'Discard & approve'.
+            confirmText: 'Discard & approve',
+          }
+        : {
+            title: `Discard ${count} ${noun} and finish?`,
+            message:
+              'These annotations are change requests, including any from other tools. Finishing without them sends a positive review record; any direct edits still ride along.',
+            // Frozen copy (maintainer-approved): 'Discard & finish'.
+            confirmText: 'Discard & finish',
+          },
+    });
+  }
+
+  return {
+    primary: {
+      id: 'primary',
+      // Frozen copy (maintainer-approved): 'Send Feedback'.
+      label: 'Send Feedback',
+      shortLabel: 'Send',
+      mobileLabel: 'Send feedback',
+      title: 'Send your feedback to the agent',
+      tone: 'primary',
+      icon: 'send',
+      count: count > 0 ? count : undefined,
+    },
+    items,
+  };
+}
+
+/**
+ * The platform (PR) arm — PR6, §3.4, per the approved DESIGN_header-pr-mode
+ * mock. Reuses the agent ids so the handler Record stays closed, but every
+ * item is composer-less and confirm-less: labels tell the reviewer which mode
+ * the ReviewSubmissionDialog opens in, nothing more. `discard-and-finish` is
+ * never emitted — the dialog owns what happens to unsent annotations.
+ */
+function buildPlatformSpec(input: DecisionSpecInput, platform: DecisionPlatformInput): DecisionSpec {
+  const { count } = input;
+  const { selfAuthored } = platform;
+  const noun = platform.mrLabel === 'MR' ? 'merge request' : 'pull request';
+  // Frozen copy (maintainer-approved): the self-approval mute reason.
+  const selfReason = `You can't approve your own ${noun} on ${platform.label}.`;
+  const selfReasonShort = `You can't approve your own ${platform.mrLabel}`;
+
+  if (!input.hasFeedback) {
+    return {
+      primary: {
+        id: 'primary',
+        // Frozen copy (maintainer-approved): 'Approve'.
+        label: 'Approve',
+        title: selfAuthored ? selfReason : 'Approve: no changes needed',
+        tone: 'success',
+        icon: 'check',
+        ...(selfAuthored ? { muted: true } : {}),
+      },
+      items: [
+        {
+          id: 'note-with-approval',
+          // Approved design (PR6 detail confirmed): the empty-state platform
+          // menu is "Approve with a comment…" + "Request changes…".
+          label: 'Approve with a comment…',
+          subtitle: selfAuthored
+            ? selfReasonShort
+            : 'Opens the submission dialog; the comment rides the review body',
+          tone: 'success',
+          icon: 'check',
+          ...(selfAuthored ? { muted: true } : {}),
+        },
+        {
+          id: 'request-changes',
+          // Frozen copy (maintainer-approved): 'Request changes…'.
+          label: 'Request changes…',
+          subtitle: 'Overall feedback, zero line comments, via the dialog',
+          tone: 'primary',
+          icon: 'send',
+          dividerBefore: true,
+        },
+      ],
+    };
+  }
+
+  return {
+    primary: {
+      id: 'primary',
+      // Frozen copy (maintainer-approved): 'Post Comments'.
+      label: 'Post Comments',
+      shortLabel: 'Post',
+      mobileLabel: 'Post comments',
+      title: `Post review to ${platform.label}`,
+      tone: 'primary',
+      icon: 'send',
+      count: count > 0 ? count : undefined,
+    },
+    items: [
+      {
+        id: 'approve-with-notes',
+        label: 'Approve with comments…',
+        subtitle: selfAuthored ? selfReasonShort : 'Submission dialog in approve mode',
+        tone: 'success',
+        icon: 'check',
+        ...(selfAuthored ? { muted: true } : {}),
+      },
+      {
+        id: 'note-with-feedback',
+        label: 'Post comments, then…',
+        subtitle: 'Request changes or stay neutral, chosen in the dialog',
+        tone: 'primary',
+        icon: 'send',
+        dividerBefore: true,
+      },
+    ],
+  };
+}
+
+export function buildDecisionSpec(input: DecisionSpecInput): DecisionSpec {
+  // PR6 (§3.4): the platform destination maps onto the same spec shape with
+  // no composer items; presence of the arm selects it outright.
+  if (input.platform) return buildPlatformSpec(input, input.platform);
+  // Review's primary positive decision IS approval, gate flag or not.
+  const approvalFlow = input.app === 'review' || input.gate;
+  return input.hasFeedback
+    ? buildFeedbackSpec(input, approvalFlow)
+    : buildEmptySpec(input, approvalFlow);
+}

package/utils/platform.ts

@@ -8,4 +8,20 @@ export const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(
 export const modKey = isMac ? '⌘' : 'Ctrl';
 export const altKey = isMac ? '⌥' : 'Alt';
 export const submitHint = isMac ? '⌘↵' : 'Ctrl+Enter';
+/**
+ * The primary modifier spelled for PROSE ("Cmd+click"), where `modKey`'s ⌘
+ * glyph reads as an artifact rather than a word. Use this in sentences;
+ * use `modKey` in key hints and shortcut chips.
+ */
+export const modKeyWord = isMac ? 'Cmd' : 'Ctrl';
+/**
+ * The primary modifier's own `KeyboardEvent.key` name, for features that arm
+ * on the modifier being HELD rather than on a chord. Pair with `isModKeyHeld`:
+ * this identifies the key itself, that reads the held flag off any event.
+ */
+export const modEventKey = isMac ? 'Meta' : 'Control';
+/** Whether the primary modifier is down for this event, on this platform. */
+export function isModKeyHeld(event: { metaKey: boolean; ctrlKey: boolean }): boolean {
+  return isMac ? event.metaKey : event.ctrlKey;
+}
 export const isWindows = typeof navigator !== 'undefined' && /^Win/.test(navigator.platform);

package/utils/vimScroll.ts

@@ -142,7 +142,7 @@ export function scrollVimTargetIntoView(
 
   const margin = resolveVimScrollMargin(viewportRect.height);
   const stickyBottom = viewport
-    .querySelector<HTMLElement>('[data-sticky-actions]')
+    .querySelector<HTMLElement>('[data-viewer-document-header], [data-sticky-actions]')
     ?.getBoundingClientRect().bottom;
   const topMargin = stickyBottom !== undefined
     ? Math.max(margin, stickyBottom - viewportRect.top + 8)

package/sprite_package_additional/index.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sprite Animation</title>
-    <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        background-color: #f0f0f0;
-        margin: 0;
-      }
-      .animation {
-        width: 176px;
-        height: 96px;
-        background: url("sprite.png") left center;
-        animation: play 5s steps(24) infinite;
-        /* image-rendering: pixelated; */ /* Uncomment if resizing up */
-      }
-
-      @keyframes play {
-        to {
-          background-position: -4224px 0;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="animation"></div>
-  </body>
-</html>

package/sprite_package_new/index.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sprite Animation</title>
-    <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        background-color: #f0f0f0;
-        margin: 0;
-      }
-      .animation {
-        width: 96px;
-        height: 96px;
-        background: url("sprite.png") left center;
-        animation: play 3s steps(12) infinite;
-        /* image-rendering: pixelated; */ /* Uncomment if resizing up */
-      }
-
-      @keyframes play {
-        to {
-          background-position: -1152px 0;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="animation"></div>
-  </body>
-</html>

package/sprite_package_pulluphang/index.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sprite Animation</title>
-    <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        background-color: #f0f0f0;
-        margin: 0;
-      }
-      .animation {
-        width: 96px;
-        height: 96px;
-        background: url("sprite.png") left center;
-        animation: play 3s steps(24) infinite;
-        /* image-rendering: pixelated; */ /* Uncomment if resizing up */
-      }
-
-      @keyframes play {
-        to {
-          background-position: -2304px 0;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="animation"></div>
-  </body>
-</html>