@igstack/app-catalog-frontend-core 4.0.0-alpha-20260920174621 → 4.0.0-alpha-20260921191849

package/dist/esm/__tests__/stylesheetAnimations.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/modules/appCatalog/ui/detail/CommentsSection.js

@@ -20,6 +20,7 @@ function CommentsSection({ appSlug }) {
   const [draft, setDraft] = useState("");
   const [editingId, setEditingId] = useState(null);
   const [editDraft, setEditDraft] = useState("");
+  const [composerOpen, setComposerOpen] = useState(false);
   const refresh = () => queryClient.invalidateQueries({ queryKey: listOptions.queryKey });
   const add = useMutation(
     trpc.comments.add.mutationOptions({
@@ -49,6 +50,7 @@ function CommentsSection({ appSlug }) {
     if (body) edit.mutate({ id, body });
   };
   const failure = error ?? add.error ?? edit.error ?? remove.error;
+  const hasComments = !!comments && comments.length > 0;
   return /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
     /* @__PURE__ */ jsxs("h3", { className: "mb-2 text-sm font-medium", children: [
       "Comments",
@@ -130,39 +132,61 @@ function CommentsSection({ appSlug }) {
           ] })
         ] }) : /* @__PURE__ */ jsx("p", { className: "mt-0.5 whitespace-pre-wrap", children: comment.body })
       ] }, comment.id);
-    }) }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "No comments yet. Be the first." }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
+    }) }) : /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
+      "No comments yet.",
+      " ",
+      !composerOpen && /* @__PURE__ */ jsx(
+        "button",
         {
-          rows: 3,
-          className: cn(FIELD_CLASSES),
-          placeholder: "Leave a comment…",
-          value: draft,
-          onChange: (event) => setDraft(event.target.value),
-          onKeyDown: (event) => {
-            if (isSubmitChord(event)) {
-              event.preventDefault();
-              post();
-            }
-          }
+          type: "button",
+          className: "hover:text-foreground underline",
+          onClick: () => setComposerOpen(true),
+          children: "Be the first."
         }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            disabled: !draft.trim() || add.isPending,
-            onClick: post,
-            children: add.isPending ? "Posting…" : "Post"
-          }
+      )
+    ] }),
+    (hasComments || composerOpen) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mt-3 space-y-2",
+          composerOpen && "animate-in fade-in slide-in-from-top-2 duration-200"
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "Posted under a nickname. You can edit or delete it for one hour." })
-      ] }),
-      failure && /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: errorMessage(failure) })
-    ] })
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              autoFocus: composerOpen,
+              rows: 3,
+              className: cn(FIELD_CLASSES),
+              placeholder: "Leave a comment…",
+              value: draft,
+              onChange: (event) => setDraft(event.target.value),
+              onKeyDown: (event) => {
+                if (isSubmitChord(event)) {
+                  event.preventDefault();
+                  post();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                disabled: !draft.trim() || add.isPending,
+                onClick: post,
+                children: add.isPending ? "Posting…" : "Post"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "Posted under a nickname. You can edit or delete it for one hour." })
+          ] })
+        ]
+      }
+    ),
+    failure && /* @__PURE__ */ jsx("p", { className: "text-destructive mt-2 text-xs", children: errorMessage(failure) })
   ] });
 }
 export {

package/dist/esm/modules/appCatalog/ui/detail/CommentsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentsSection.js","sources":["../../../../../../src/modules/appCatalog/ui/detail/CommentsSection.tsx"],"sourcesContent":["import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { useState } from 'react'\nimport { useTRPC } from '~/api/infra/trpc'\nimport { Button } from '~/ui/button'\nimport { cn } from '~/lib/utils'\nimport { formatRelativeTime } from '../../utils/formatRelativeTime'\n\n/**\n * Feedback on one app, from anyone browsing the catalog.\n *\n * Nobody has to log in to leave a comment, so the server attributes each one to a\n * pseudonym derived from an httpOnly cookie (\"Curious Ferret\"). That cookie is also\n * the only thing that authorises editing or deleting, and only for the first hour —\n * `canEditUntil` arrives from the server as an absolute instant so a skewed client\n * clock cannot show controls the server would refuse.\n */\n\n/** Same shape the input primitive uses, minus the fixed height. */\nconst FIELD_CLASSES =\n  'placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50'\n\nfunction errorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : 'Something went wrong'\n}\n\n/** Cmd/Ctrl+Enter submits; plain Enter keeps making paragraphs. */\nfunction isSubmitChord(event: React.KeyboardEvent): boolean {\n  return event.key === 'Enter' && (event.metaKey || event.ctrlKey)\n}\n\nexport function CommentsSection({ appSlug }: { appSlug: string }) {\n  const trpc = useTRPC()\n  const queryClient = useQueryClient()\n  const listOptions = trpc.comments.list.queryOptions({ resourceSlug: appSlug })\n  const { data: comments, isLoading, error } = useQuery(listOptions)\n\n  const [draft, setDraft] = useState('')\n  const [editingId, setEditingId] = useState<string | null>(null)\n  const [editDraft, setEditDraft] = useState('')\n\n  const refresh = () =>\n    queryClient.invalidateQueries({ queryKey: listOptions.queryKey })\n\n  const add = useMutation(\n    trpc.comments.add.mutationOptions({\n      onSuccess: () => {\n        setDraft('')\n        void refresh()\n      },\n    }),\n  )\n  const edit = useMutation(\n    trpc.comments.edit.mutationOptions({\n      onSuccess: () => {\n        setEditingId(null)\n        void refresh()\n      },\n    }),\n  )\n  const remove = useMutation(\n    trpc.comments.remove.mutationOptions({ onSuccess: () => void refresh() }),\n  )\n\n  const post = () => {\n    const body = draft.trim()\n    if (body) add.mutate({ resourceSlug: appSlug, body })\n  }\n\n  const saveEdit = (id: string) => {\n    const body = editDraft.trim()\n    if (body) edit.mutate({ id, body })\n  }\n\n  // One line for every failed action: three mutations and one query, one place to look.\n  const failure = error ?? add.error ?? edit.error ?? remove.error\n\n  return (\n    <div className=\"mt-6\">\n      <h3 className=\"mb-2 text-sm font-medium\">\n        Comments\n        {comments && comments.length > 0 && (\n          <span className=\"text-muted-foreground ml-1 font-normal\">\n            ({comments.length})\n          </span>\n        )}\n      </h3>\n\n      {isLoading ? (\n        <p className=\"text-muted-foreground text-xs\">Loading comments…</p>\n      ) : comments && comments.length > 0 ? (\n        <ul className=\"space-y-3\">\n          {comments.map((comment) => {\n            const canEdit =\n              comment.isMine &&\n              !!comment.canEditUntil &&\n              Date.parse(comment.canEditUntil) > Date.now()\n\n            return (\n              <li key={comment.id} className=\"text-xs\">\n                <div className=\"text-muted-foreground flex items-center gap-2\">\n                  <span className=\"text-foreground font-medium\">\n                    {comment.authorName}\n                  </span>\n                  <span>{formatRelativeTime(comment.createdAt)}</span>\n                  {comment.editedAt && <span>(edited)</span>}\n                  {canEdit && editingId !== comment.id && (\n                    <>\n                      <button\n                        type=\"button\"\n                        className=\"hover:text-foreground underline\"\n                        onClick={() => {\n                          setEditingId(comment.id)\n                          setEditDraft(comment.body)\n                        }}\n                      >\n                        Edit\n                      </button>\n                      <button\n                        type=\"button\"\n                        className=\"hover:text-destructive underline\"\n                        onClick={() => remove.mutate({ id: comment.id })}\n                      >\n                        Delete\n                      </button>\n                    </>\n                  )}\n                </div>\n\n                {editingId === comment.id ? (\n                  <div className=\"mt-1 space-y-2\">\n                    <textarea\n                      autoFocus\n                      rows={3}\n                      className={cn(FIELD_CLASSES)}\n                      value={editDraft}\n                      onChange={(event) => setEditDraft(event.target.value)}\n                      onKeyDown={(event) => {\n                        if (isSubmitChord(event)) {\n                          event.preventDefault()\n                          saveEdit(comment.id)\n                        }\n                      }}\n                    />\n                    <div className=\"flex gap-2\">\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        disabled={!editDraft.trim() || edit.isPending}\n                        onClick={() => saveEdit(comment.id)}\n                      >\n                        Save\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        onClick={() => setEditingId(null)}\n                      >\n                        Cancel\n                      </Button>\n                    </div>\n                  </div>\n                ) : (\n                  <p className=\"mt-0.5 whitespace-pre-wrap\">{comment.body}</p>\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      ) : (\n        <p className=\"text-muted-foreground text-xs\">\n          No comments yet. Be the first.\n        </p>\n      )}\n\n      <div className=\"mt-3 space-y-2\">\n        <textarea\n          rows={3}\n          className={cn(FIELD_CLASSES)}\n          placeholder=\"Leave a comment…\"\n          value={draft}\n          onChange={(event) => setDraft(event.target.value)}\n          onKeyDown={(event) => {\n            if (isSubmitChord(event)) {\n              event.preventDefault()\n              post()\n            }\n          }}\n        />\n        <div className=\"flex items-center gap-3\">\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={!draft.trim() || add.isPending}\n            onClick={post}\n          >\n            {add.isPending ? 'Posting…' : 'Post'}\n          </Button>\n          <span className=\"text-muted-foreground text-xs\">\n            Posted under a nickname. You can edit or delete it for one hour.\n          </span>\n        </div>\n        {failure && (\n          <p className=\"text-destructive text-xs\">{errorMessage(failure)}</p>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentsSection.js","sources":["../../../../../../src/modules/appCatalog/ui/detail/CommentsSection.tsx"],"sourcesContent":["import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { useState } from 'react'\nimport { useTRPC } from '~/api/infra/trpc'\nimport { Button } from '~/ui/button'\nimport { cn } from '~/lib/utils'\nimport { formatRelativeTime } from '../../utils/formatRelativeTime'\n\n/**\n * Feedback on one app, from anyone browsing the catalog.\n *\n * Nobody has to log in to leave a comment, so the server attributes each one to a\n * pseudonym derived from an httpOnly cookie (\"Curious Ferret\"). That cookie is also\n * the only thing that authorises editing or deleting, and only for the first hour —\n * `canEditUntil` arrives from the server as an absolute instant so a skewed client\n * clock cannot show controls the server would refuse.\n */\n\n/** Same shape the input primitive uses, minus the fixed height. */\nconst FIELD_CLASSES =\n  'placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50'\n\nfunction errorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : 'Something went wrong'\n}\n\n/** Cmd/Ctrl+Enter submits; plain Enter keeps making paragraphs. */\nfunction isSubmitChord(event: React.KeyboardEvent): boolean {\n  return event.key === 'Enter' && (event.metaKey || event.ctrlKey)\n}\n\nexport function CommentsSection({ appSlug }: { appSlug: string }) {\n  const trpc = useTRPC()\n  const queryClient = useQueryClient()\n  const listOptions = trpc.comments.list.queryOptions({ resourceSlug: appSlug })\n  const { data: comments, isLoading, error } = useQuery(listOptions)\n\n  const [draft, setDraft] = useState('')\n  const [editingId, setEditingId] = useState<string | null>(null)\n  const [editDraft, setEditDraft] = useState('')\n  /**\n   * Most apps have no comments, and an empty form under \"no comments yet\" is just\n   * noise. So the composer stays behind the invitation until someone accepts it —\n   * which is also what earns the caret: focus follows the click, never the mount.\n   */\n  const [composerOpen, setComposerOpen] = useState(false)\n\n  const refresh = () =>\n    queryClient.invalidateQueries({ queryKey: listOptions.queryKey })\n\n  const add = useMutation(\n    trpc.comments.add.mutationOptions({\n      onSuccess: () => {\n        setDraft('')\n        void refresh()\n      },\n    }),\n  )\n  const edit = useMutation(\n    trpc.comments.edit.mutationOptions({\n      onSuccess: () => {\n        setEditingId(null)\n        void refresh()\n      },\n    }),\n  )\n  const remove = useMutation(\n    trpc.comments.remove.mutationOptions({ onSuccess: () => void refresh() }),\n  )\n\n  const post = () => {\n    const body = draft.trim()\n    if (body) add.mutate({ resourceSlug: appSlug, body })\n  }\n\n  const saveEdit = (id: string) => {\n    const body = editDraft.trim()\n    if (body) edit.mutate({ id, body })\n  }\n\n  // One line for every failed action: three mutations and one query, one place to look.\n  const failure = error ?? add.error ?? edit.error ?? remove.error\n  const hasComments = !!comments && comments.length > 0\n\n  return (\n    <div className=\"mt-6\">\n      <h3 className=\"mb-2 text-sm font-medium\">\n        Comments\n        {comments && comments.length > 0 && (\n          <span className=\"text-muted-foreground ml-1 font-normal\">\n            ({comments.length})\n          </span>\n        )}\n      </h3>\n\n      {isLoading ? (\n        <p className=\"text-muted-foreground text-xs\">Loading comments…</p>\n      ) : comments && comments.length > 0 ? (\n        <ul className=\"space-y-3\">\n          {comments.map((comment) => {\n            const canEdit =\n              comment.isMine &&\n              !!comment.canEditUntil &&\n              Date.parse(comment.canEditUntil) > Date.now()\n\n            return (\n              <li key={comment.id} className=\"text-xs\">\n                <div className=\"text-muted-foreground flex items-center gap-2\">\n                  <span className=\"text-foreground font-medium\">\n                    {comment.authorName}\n                  </span>\n                  <span>{formatRelativeTime(comment.createdAt)}</span>\n                  {comment.editedAt && <span>(edited)</span>}\n                  {canEdit && editingId !== comment.id && (\n                    <>\n                      <button\n                        type=\"button\"\n                        className=\"hover:text-foreground underline\"\n                        onClick={() => {\n                          setEditingId(comment.id)\n                          setEditDraft(comment.body)\n                        }}\n                      >\n                        Edit\n                      </button>\n                      <button\n                        type=\"button\"\n                        className=\"hover:text-destructive underline\"\n                        onClick={() => remove.mutate({ id: comment.id })}\n                      >\n                        Delete\n                      </button>\n                    </>\n                  )}\n                </div>\n\n                {editingId === comment.id ? (\n                  <div className=\"mt-1 space-y-2\">\n                    <textarea\n                      autoFocus\n                      rows={3}\n                      className={cn(FIELD_CLASSES)}\n                      value={editDraft}\n                      onChange={(event) => setEditDraft(event.target.value)}\n                      onKeyDown={(event) => {\n                        if (isSubmitChord(event)) {\n                          event.preventDefault()\n                          saveEdit(comment.id)\n                        }\n                      }}\n                    />\n                    <div className=\"flex gap-2\">\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        disabled={!editDraft.trim() || edit.isPending}\n                        onClick={() => saveEdit(comment.id)}\n                      >\n                        Save\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        onClick={() => setEditingId(null)}\n                      >\n                        Cancel\n                      </Button>\n                    </div>\n                  </div>\n                ) : (\n                  <p className=\"mt-0.5 whitespace-pre-wrap\">{comment.body}</p>\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      ) : (\n        <p className=\"text-muted-foreground text-xs\">\n          No comments yet.{' '}\n          {!composerOpen && (\n            <button\n              type=\"button\"\n              className=\"hover:text-foreground underline\"\n              onClick={() => setComposerOpen(true)}\n            >\n              Be the first.\n            </button>\n          )}\n        </p>\n      )}\n\n      {(hasComments || composerOpen) && (\n        <div\n          className={cn(\n            'mt-3 space-y-2',\n            composerOpen &&\n              'animate-in fade-in slide-in-from-top-2 duration-200',\n          )}\n        >\n          <textarea\n            autoFocus={composerOpen}\n            rows={3}\n            className={cn(FIELD_CLASSES)}\n            placeholder=\"Leave a comment…\"\n            value={draft}\n            onChange={(event) => setDraft(event.target.value)}\n            onKeyDown={(event) => {\n              if (isSubmitChord(event)) {\n                event.preventDefault()\n                post()\n              }\n            }}\n          />\n          <div className=\"flex items-center gap-3\">\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              disabled={!draft.trim() || add.isPending}\n              onClick={post}\n            >\n              {add.isPending ? 'Posting…' : 'Post'}\n            </Button>\n            <span className=\"text-muted-foreground text-xs\">\n              Posted under a nickname. You can edit or delete it for one hour.\n            </span>\n          </div>\n        </div>\n      )}\n\n      {/* Outside the composer: a failed list query leaves nothing to collapse into. */}\n      {failure && (\n        <p className=\"text-destructive mt-2 text-xs\">{errorMessage(failure)}</p>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAkBA,MAAM,gBACJ;AAEF,SAAS,aAAa,OAAwB;AAC5C,SAAO,iBAAiB,QAAQ,MAAM,UAAU;AAClD;AAGA,SAAS,cAAc,OAAqC;AAC1D,SAAO,MAAM,QAAQ,YAAY,MAAM,WAAW,MAAM;AAC1D;AAEO,SAAS,gBAAgB,EAAE,WAAgC;AAChE,QAAM,OAAO,QAAA;AACb,QAAM,cAAc,eAAA;AACpB,QAAM,cAAc,KAAK,SAAS,KAAK,aAAa,EAAE,cAAc,SAAS;AAC7E,QAAM,EAAE,MAAM,UAAU,WAAW,MAAA,IAAU,SAAS,WAAW;AAEjE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAM7C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,UAAU,MACd,YAAY,kBAAkB,EAAE,UAAU,YAAY,UAAU;AAElE,QAAM,MAAM;AAAA,IACV,KAAK,SAAS,IAAI,gBAAgB;AAAA,MAChC,WAAW,MAAM;AACf,iBAAS,EAAE;AACX,aAAK,QAAA;AAAA,MACP;AAAA,IAAA,CACD;AAAA,EAAA;AAEH,QAAM,OAAO;AAAA,IACX,KAAK,SAAS,KAAK,gBAAgB;AAAA,MACjC,WAAW,MAAM;AACf,qBAAa,IAAI;AACjB,aAAK,QAAA;AAAA,MACP;AAAA,IAAA,CACD;AAAA,EAAA;AAEH,QAAM,SAAS;AAAA,IACb,KAAK,SAAS,OAAO,gBAAgB,EAAE,WAAW,MAAM,KAAK,UAAQ,CAAG;AAAA,EAAA;AAG1E,QAAM,OAAO,MAAM;AACjB,UAAM,OAAO,MAAM,KAAA;AACnB,QAAI,KAAM,KAAI,OAAO,EAAE,cAAc,SAAS,MAAM;AAAA,EACtD;AAEA,QAAM,WAAW,CAAC,OAAe;AAC/B,UAAM,OAAO,UAAU,KAAA;AACvB,QAAI,KAAM,MAAK,OAAO,EAAE,IAAI,MAAM;AAAA,EACpC;AAGA,QAAM,UAAU,SAAS,IAAI,SAAS,KAAK,SAAS,OAAO;AAC3D,QAAM,cAAc,CAAC,CAAC,YAAY,SAAS,SAAS;AAEpD,SACE,qBAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,IAAA,qBAAC,MAAA,EAAG,WAAU,4BAA2B,UAAA;AAAA,MAAA;AAAA,MAEtC,YAAY,SAAS,SAAS,KAC7B,qBAAC,QAAA,EAAK,WAAU,0CAAyC,UAAA;AAAA,QAAA;AAAA,QACrD,SAAS;AAAA,QAAO;AAAA,MAAA,EAAA,CACpB;AAAA,IAAA,GAEJ;AAAA,IAEC,YACC,oBAAC,KAAA,EAAE,WAAU,iCAAgC,UAAA,oBAAA,CAAiB,IAC5D,YAAY,SAAS,SAAS,wBAC/B,MAAA,EAAG,WAAU,aACX,UAAA,SAAS,IAAI,CAAC,YAAY;AACzB,YAAM,UACJ,QAAQ,UACR,CAAC,CAAC,QAAQ,gBACV,KAAK,MAAM,QAAQ,YAAY,IAAI,KAAK,IAAA;AAE1C,aACE,qBAAC,MAAA,EAAoB,WAAU,WAC7B,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,+BACb,UAAA,QAAQ,YACX;AAAA,UACA,oBAAC,QAAA,EAAM,UAAA,mBAAmB,QAAQ,SAAS,GAAE;AAAA,UAC5C,QAAQ,YAAY,oBAAC,QAAA,EAAK,UAAA,YAAQ;AAAA,UAClC,WAAW,cAAc,QAAQ,MAChC,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,MAAM;AACb,+BAAa,QAAQ,EAAE;AACvB,+BAAa,QAAQ,IAAI;AAAA,gBAC3B;AAAA,gBACD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,MAAM,OAAO,OAAO,EAAE,IAAI,QAAQ,IAAI;AAAA,gBAChD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QAEC,cAAc,QAAQ,KACrB,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAS;AAAA,cACT,MAAM;AAAA,cACN,WAAW,GAAG,aAAa;AAAA,cAC3B,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,aAAa,MAAM,OAAO,KAAK;AAAA,cACpD,WAAW,CAAC,UAAU;AACpB,oBAAI,cAAc,KAAK,GAAG;AACxB,wBAAM,eAAA;AACN,2BAAS,QAAQ,EAAE;AAAA,gBACrB;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,qBAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,UAAU,CAAC,UAAU,KAAA,KAAU,KAAK;AAAA,gBACpC,SAAS,MAAM,SAAS,QAAQ,EAAE;AAAA,gBACnC,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS,MAAM,aAAa,IAAI;AAAA,gBACjC,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED,EAAA,CACF;AAAA,QAAA,GACF,IAEA,oBAAC,KAAA,EAAE,WAAU,8BAA8B,kBAAQ,KAAA,CAAK;AAAA,MAAA,EAAA,GAjEnD,QAAQ,EAmEjB;AAAA,IAEJ,CAAC,EAAA,CACH,IAEA,qBAAC,KAAA,EAAE,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MAC1B;AAAA,MAChB,CAAC,gBACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,gBAAgB,IAAI;AAAA,UACpC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,GAEJ;AAAA,KAGA,eAAe,iBACf;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,gBACE;AAAA,QAAA;AAAA,QAGJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,cACX,MAAM;AAAA,cACN,WAAW,GAAG,aAAa;AAAA,cAC3B,aAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,cAChD,WAAW,CAAC,UAAU;AACpB,oBAAI,cAAc,KAAK,GAAG;AACxB,wBAAM,eAAA;AACN,uBAAA;AAAA,gBACF;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,UAAU,CAAC,MAAM,KAAA,KAAU,IAAI;AAAA,gBAC/B,SAAS;AAAA,gBAER,UAAA,IAAI,YAAY,aAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAEhC,oBAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,mEAAA,CAEhD;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAKH,WACC,oBAAC,KAAA,EAAE,WAAU,iCAAiC,UAAA,aAAa,OAAO,EAAA,CAAE;AAAA,EAAA,GAExE;AAEJ;"}

package/dist/index.css

@@ -11,7 +11,7 @@
 /* Other module imports this css, and we need to tell tailwind to scan our tsx files */
 @source ".";
 
-/* @import 'tw-animate-css'; */
+@import 'tw-animate-css';
 
 @layer base {
   /* Warm "crayon" palette derived from the hand-drawn app-catalog logo
@@ -248,3 +248,16 @@
   list-style-type: disc;
   padding-left: 1.25rem;
 }
+
+/* tw-animate-css ships no reduced-motion rules of its own, so honour the
+   preference here — the overlay animations it provides are all decorative. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "4.0.0-alpha-20260920174621",
+  "version": "4.0.0-alpha-20260921191849",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -113,7 +113,7 @@
     "tailwindcss": "^4.1.7",
     "tiptap-markdown": "^0.8.0",
     "tslib": "^2.3.0",
-    "@igstack/app-catalog-shared-core": "4.0.0-alpha-20260920174621"
+    "@igstack/app-catalog-shared-core": "4.0.0-alpha-20260921191849"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.5",
@@ -140,7 +140,7 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "4.0.0-alpha-20260920174621"
+    "@igstack/app-catalog-backend-core": "4.0.0-alpha-20260921191849"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -149,7 +149,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "a297e008f756aa8b200884a84bcb43d999519546",
+  "gitHead": "47e97c12338210221f4ff7dc88159336865f6c34",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/modules/appCatalog/ui/detail/CommentsSection.emptyState.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+// The section only needs a comment list here; the whole tRPC/react-query stack is
+// stubbed down to that one query so the empty state is the only thing under test.
+const state = vi.hoisted(() => ({
+  comments: [] as unknown[],
+}))
+
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: vi.fn(() => ({ data: state.comments, isLoading: false })),
+  useMutation: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+  useQueryClient: vi.fn(() => ({ invalidateQueries: vi.fn() })),
+}))
+vi.mock('~/api/infra/trpc', () => ({
+  useTRPC: vi.fn(() => ({
+    comments: {
+      list: { queryOptions: () => ({ queryKey: ['comments'] }) },
+      add: { mutationOptions: (o: unknown) => o },
+      edit: { mutationOptions: (o: unknown) => o },
+      remove: { mutationOptions: (o: unknown) => o },
+    },
+  })),
+}))
+
+const { CommentsSection } =
+  await import('~/modules/appCatalog/ui/detail/CommentsSection')
+
+describe('CommentsSection — empty state', () => {
+  it('keeps the composer behind "Be the first." until it is clicked', async () => {
+    state.comments = []
+    render(<CommentsSection appSlug="example-app" />)
+
+    const invite = screen.getByRole('button', { name: 'Be the first.' })
+    expect(screen.queryByPlaceholderText('Leave a comment…')).toBeNull()
+
+    await userEvent.click(invite)
+
+    const field = screen.getByPlaceholderText('Leave a comment…')
+    expect(field).toBeInTheDocument()
+    expect(field).toHaveFocus()
+    // One affordance at a time: the invite hides itself once it has done its job.
+    expect(screen.queryByRole('button', { name: 'Be the first.' })).toBeNull()
+  })
+
+  it('shows the composer straight away once comments exist, without stealing focus', () => {
+    state.comments = [
+      {
+        id: 'c1',
+        authorName: 'Curious Ferret',
+        body: 'Useful.',
+        createdAt: new Date().toISOString(),
+      },
+    ]
+    render(<CommentsSection appSlug="example-app" />)
+
+    const field = screen.getByPlaceholderText('Leave a comment…')
+    expect(field).toBeInTheDocument()
+    expect(field).not.toHaveFocus()
+    expect(screen.queryByRole('button', { name: 'Be the first.' })).toBeNull()
+  })
+})

package/src/__tests__/stylesheetAnimations.test.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * The overlay primitives carry `animate-in` / `animate-out` classes, so a unit
+ * test that asserts the class is on the element passes whether or not the
+ * utilities exist — and this import sat commented out for months with nothing
+ * moving on screen. So assert the wiring, like stylesheetFonts does.
+ */
+// The path is relative to the package root, which is where vitest runs.
+const css = readFileSync('src/index.css', 'utf8')
+const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, '')
+
+describe('animation utilities', () => {
+  it('imports tw-animate-css outside a comment', () => {
+    expect(withoutComments).toMatch(/@import\s+['"]tw-animate-css['"]/)
+  })
+
+  it('disables animation for prefers-reduced-motion', () => {
+    expect(css).toContain('prefers-reduced-motion: reduce')
+  })
+})

package/src/index.css

@@ -11,7 +11,7 @@
 /* Other module imports this css, and we need to tell tailwind to scan our tsx files */
 @source ".";
 
-/* @import 'tw-animate-css'; */
+@import 'tw-animate-css';
 
 @layer base {
   /* Warm "crayon" palette derived from the hand-drawn app-catalog logo
@@ -248,3 +248,16 @@
   list-style-type: disc;
   padding-left: 1.25rem;
 }
+
+/* tw-animate-css ships no reduced-motion rules of its own, so honour the
+   preference here — the overlay animations it provides are all decorative. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/modules/appCatalog/ui/detail/CommentsSection.tsx

@@ -37,6 +37,12 @@ export function CommentsSection({ appSlug }: { appSlug: string }) {
   const [draft, setDraft] = useState('')
   const [editingId, setEditingId] = useState<string | null>(null)
   const [editDraft, setEditDraft] = useState('')
+  /**
+   * Most apps have no comments, and an empty form under "no comments yet" is just
+   * noise. So the composer stays behind the invitation until someone accepts it —
+   * which is also what earns the caret: focus follows the click, never the mount.
+   */
+  const [composerOpen, setComposerOpen] = useState(false)
 
   const refresh = () =>
     queryClient.invalidateQueries({ queryKey: listOptions.queryKey })
@@ -73,6 +79,7 @@ export function CommentsSection({ appSlug }: { appSlug: string }) {
 
   // One line for every failed action: three mutations and one query, one place to look.
   const failure = error ?? add.error ?? edit.error ?? remove.error
+  const hasComments = !!comments && comments.length > 0
 
   return (
     <div className="mt-6">
@@ -169,41 +176,61 @@ export function CommentsSection({ appSlug }: { appSlug: string }) {
         </ul>
       ) : (
         <p className="text-muted-foreground text-xs">
-          No comments yet. Be the first.
+          No comments yet.{' '}
+          {!composerOpen && (
+            <button
+              type="button"
+              className="hover:text-foreground underline"
+              onClick={() => setComposerOpen(true)}
+            >
+              Be the first.
+            </button>
+          )}
         </p>
       )}
 
-      <div className="mt-3 space-y-2">
-        <textarea
-          rows={3}
-          className={cn(FIELD_CLASSES)}
-          placeholder="Leave a comment…"
-          value={draft}
-          onChange={(event) => setDraft(event.target.value)}
-          onKeyDown={(event) => {
-            if (isSubmitChord(event)) {
-              event.preventDefault()
-              post()
-            }
-          }}
-        />
-        <div className="flex items-center gap-3">
-          <Button
-            type="button"
-            size="sm"
-            disabled={!draft.trim() || add.isPending}
-            onClick={post}
-          >
-            {add.isPending ? 'Posting…' : 'Post'}
-          </Button>
-          <span className="text-muted-foreground text-xs">
-            Posted under a nickname. You can edit or delete it for one hour.
-          </span>
+      {(hasComments || composerOpen) && (
+        <div
+          className={cn(
+            'mt-3 space-y-2',
+            composerOpen &&
+              'animate-in fade-in slide-in-from-top-2 duration-200',
+          )}
+        >
+          <textarea
+            autoFocus={composerOpen}
+            rows={3}
+            className={cn(FIELD_CLASSES)}
+            placeholder="Leave a comment…"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (isSubmitChord(event)) {
+                event.preventDefault()
+                post()
+              }
+            }}
+          />
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              size="sm"
+              disabled={!draft.trim() || add.isPending}
+              onClick={post}
+            >
+              {add.isPending ? 'Posting…' : 'Post'}
+            </Button>
+            <span className="text-muted-foreground text-xs">
+              Posted under a nickname. You can edit or delete it for one hour.
+            </span>
+          </div>
         </div>
-        {failure && (
-          <p className="text-destructive text-xs">{errorMessage(failure)}</p>
-        )}
-      </div>
+      )}
+
+      {/* Outside the composer: a failed list query leaves nothing to collapse into. */}
+      {failure && (
+        <p className="text-destructive mt-2 text-xs">{errorMessage(failure)}</p>
+      )}
     </div>
   )
 }