@m1kapp/kit 0.0.37 → 0.0.40

package/bin/track.mjs

@@ -1,12 +1,18 @@
 #!/usr/bin/env node
 /**
- * m1kkit track <url> [--host=m1k.app]
+ * m1kkit track <url> [--host=m1k.app] [--write]
  *
  * 로그인 없이 m1k 방문자 트래커에 사이트를 등록하고 배지 slug를 발급받는다.
  * 발급된 claim 토큰은 현재 폴더의 .m1k.json 에 저장 → 나중에 `m1kkit claim`으로 계정 귀속.
+ * `--write` 를 주면 발급된 slug를 앱 코드(`<Watermark trackSlug>`)와 `.env` 에 직접 꽂는다.
  */
 import { writeFileSync, existsSync, readFileSync } from "fs";
-import { resolve } from "path";
+import { resolve, dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const { detectProject, wireSlug } = await import(
+  join(dirname(fileURLToPath(import.meta.url)), "lib", "project.mjs")
+);
 
 const args = process.argv.slice(2);
 const flags = Object.fromEntries(
@@ -24,15 +30,20 @@ if (!url || flags.help) {
 m1kkit track — m1k 방문자 트래커에 사이트 등록 (무로그인)
 
 사용법:
-  npx m1kkit track <url> [--host=m1k.app]
+  npx m1kkit track <url> [--host=m1k.app] [--write]
 
 예시:
   npx m1kkit track https://myside.app
+  npx m1kkit track https://myside.app --write    # 발급 + 코드에 바로 배선
 
 동작:
   1) 로그인 없이 사이트를 등록하고 배지 slug를 발급
   2) 배지 스니펫을 출력 (README/푸터에 붙여넣기 → 바로 수집 시작)
   3) claim 토큰을 ./.m1k.json 에 저장 → 나중에 'm1kkit claim'으로 내 계정에 귀속
+
+옵션:
+  --write   slug를 <Watermark trackSlug="..."> 에 직접 넣고 .env 에도 기록.
+            (이걸 안 쓰면 slug만 발급되고 앱에는 아무것도 안 붙는다)
 `);
   process.exit(url ? 0 : 1);
 }
@@ -58,10 +69,25 @@ if (!res.ok) {
   process.exit(1);
 }
 
+const cwd = process.cwd();
+
+/** slug를 앱에 꽂고, 무엇을 건드렸는지 사람 읽을 수 있게 출력한다. */
+function applyWire(slug) {
+  const r = wireSlug(cwd, slug);
+  if (r.patched && !r.alreadyWired) console.log(`  ✓ ${r.patched} — <Watermark trackSlug="${slug}"> 추가`);
+  else if (r.alreadyWired) console.log(`  · ${r.patched} — trackSlug가 이미 있어 건너뜀`);
+  else console.log(`  ! <Watermark> 를 쓰는 파일을 못 찾음 — trackSlug="${slug}" 를 직접 넣어주세요`);
+  if (r.env) console.log(`  ✓ .env — ${r.env.key}=${slug} (${r.env.action})`);
+  console.log(`  → dev 서버를 돌리는 중이면 재시작해야 .env가 반영됩니다.`);
+  return r;
+}
+
 if (data.alreadyRegistered) {
   console.log(`\n⚠ ${data.message}`);
   console.log(`  slug:  ${data.slug}`);
   console.log(`  badge: ${data.badgeUrl}\n`);
+  if (flags.write) applyWire(data.slug);
+  else console.log(`  코드에 배선하려면:  npx m1kkit track ${url} --write\n`);
   process.exit(0);
 }
 
@@ -82,12 +108,35 @@ console.log(`
 
   배지 스니펫 (README/푸터에 붙여넣기):
   ${data.snippet}
+`);
+
+if (flags.write) {
+  console.log(`  ⚡ kit 자동 집계 배선:`);
+  applyWire(data.slug);
+} else {
+  // 프로젝트 종류에 따라 env 변수 이름이 다르다. 반대쪽 이름을 쓰면 에러 없이
+  // 조용히 무시되기만 해서 "붙인 줄 알았는데 0" 이 되므로, 감지해서 알려준다.
+  const { kind } = detectProject(cwd);
+  const hint =
+    kind === "next"
+      ? `Next 감지 → .env 에  NEXT_PUBLIC_M1K_SLUG=${data.slug}  (kit이 알아서 읽음)`
+      : kind === "vite"
+        ? `Vite 감지 → .env 에  VITE_M1K_SLUG=${data.slug}
+       + 앱 소스에  <Watermark trackSlug={import.meta.env.VITE_M1K_SLUG}>
+       (Vite는 import.meta.env 를 앱 소스에서만 치환한다 — kit 안에서는 못 읽음)`
+        : `Next면  .env 에 NEXT_PUBLIC_M1K_SLUG=${data.slug}
+       Vite면  .env 에 VITE_M1K_SLUG=${data.slug} + 앱 소스에서 trackSlug 로 전달`;
+  console.log(`  ⚡ kit을 쓰면 스니펫 없이 자동 집계:
+     ${hint}
 
-  ⚡ kit을 쓰면 스니펫 없이 자동 집계:
-     .env 에 한 줄만 추가하면 Watermark/PoweredByKit 하단 크레딧이 방문을 자동으로 셉니다.
-       NEXT_PUBLIC_M1K_SLUG=${data.slug}
+     제일 확실한 방법(번들러 무관):  <Watermark trackSlug="${data.slug}">
      (끄려면: <Watermark track={false}> 또는 그 줄 삭제)
 
+  ↳ 위를 대신 해주는 명령:  npx m1kkit track ${url} --write
+`);
+}
+
+console.log(`
   claim 토큰을 ./.m1k.json 에 저장했어요.
   나중에 내 계정에 귀속하려면:  npx m1kkit claim
 

package/bin/untrack.mjs

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+/**
+ * m1kkit untrack [slug] [--token=<claimToken>] [--bearer=<개인토큰>] [--host=m1k.app] [--yes]
+ *
+ * m1k 방문자 트래커에서 사이트 등록을 취소한다(삭제).
+ *
+ * `track`으로 잘못 등록했을 때 지울 방법이 없었다 — 대시보드 삭제는 브라우저
+ * 로그인이 필요하고, CLI로 익명 등록한 사이트는 아직 어느 계정에도 안 붙어
+ * 있어서 대시보드에 뜨지도 않는다. 그래서 claim 토큰으로 지운다.
+ *
+ * slug/토큰을 안 주면 현재 폴더의 ./.m1k.json 에서 읽는다.
+ */
+import { existsSync, readFileSync, writeFileSync, unlinkSync } from "fs";
+import { resolve } from "path";
+import { createInterface } from "readline";
+
+const args = process.argv.slice(2);
+const flags = Object.fromEntries(
+  args
+    .filter((a) => a.startsWith("--"))
+    .map((a) => {
+      const [k, v] = a.replace(/^--/, "").split("=");
+      return [k, v ?? true];
+    }),
+);
+const positional = args.filter((a) => !a.startsWith("--"));
+
+const store = readStore();
+const slug = positional[0] || store.slug;
+const claimToken = flags.token || store.claimToken;
+const bearer = flags.bearer || process.env.M1K_TOKEN;
+const host = flags.host || store.host || process.env.M1K_HOST || "m1k.app";
+
+if (!slug || flags.help) {
+  console.log(`
+m1kkit untrack — 방문자 트래커에서 사이트 삭제
+
+사용법:
+  npx m1kkit untrack [slug] [옵션]
+
+  slug를 안 주면 현재 폴더의 ./.m1k.json 에서 읽어요.
+
+옵션:
+  --token=<claimToken>  미귀속 사이트용. 기본값은 ./.m1k.json 의 claimToken
+  --bearer=<개인토큰>    이미 내 계정에 귀속한 사이트용 (또는 M1K_TOKEN 환경변수)
+  --host=m1k.app
+  --yes                 확인 없이 삭제
+
+되돌릴 수 없어요 — 누적 방문 기록도 같이 지워집니다.
+`);
+  process.exit(slug ? 0 : 1);
+}
+
+if (!claimToken && !bearer) {
+  console.error(`✗ 인증 수단이 없어요.
+  미귀속 사이트면  --token=<claimToken>  (./.m1k.json 에 있어요)
+  귀속한 사이트면  --bearer=<개인토큰>`);
+  process.exit(1);
+}
+
+const scheme = /^(localhost|127\.|0\.0\.0\.0)/.test(host) ? "http" : "https";
+const base = `${scheme}://${host}`;
+
+if (!flags.yes && process.stdin.isTTY) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  const answer = await new Promise((res) =>
+    rl.question(`'${slug}' 를 삭제할까요? 누적 방문 기록도 같이 지워지고 되돌릴 수 없어요. (y/N): `, res),
+  );
+  rl.close();
+  if (!/^y(es)?$/i.test(answer.trim())) {
+    console.log("취소했어요.");
+    process.exit(0);
+  }
+}
+
+let res, data;
+try {
+  res = await fetch(`${base}/api/sites/cli`, {
+    method: "DELETE",
+    headers: {
+      "content-type": "application/json",
+      ...(bearer ? { authorization: `Bearer ${bearer}` } : {}),
+    },
+    body: JSON.stringify({ slug, claimToken }),
+  });
+  data = await res.json().catch(() => ({}));
+} catch (e) {
+  console.error(`✗ 삭제 요청 실패: ${e.message}`);
+  process.exit(1);
+}
+
+if (!res.ok) {
+  console.error(`✗ ${data?.error || data?.message || res.statusText}`);
+  process.exit(1);
+}
+
+console.log(`\n✓ 삭제했어요.  ${data.url || slug}\n`);
+clearStore(slug);
+
+/** ./.m1k.json 읽기 (없거나 깨졌으면 빈 객체) */
+function readStore() {
+  const file = resolve(process.cwd(), ".m1k.json");
+  if (!existsSync(file)) return {};
+  try {
+    return JSON.parse(readFileSync(file, "utf8"));
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * 지운 사이트를 가리키던 ./.m1k.json 을 정리한다 — 남겨두면 다음 `claim`이
+ * 죽은 토큰으로 브라우저를 연다. 다른 사이트를 가리키고 있으면 건드리지 않는다.
+ */
+function clearStore(deletedSlug) {
+  const file = resolve(process.cwd(), ".m1k.json");
+  if (!existsSync(file)) return;
+  let json;
+  try {
+    json = JSON.parse(readFileSync(file, "utf8"));
+  } catch {
+    return;
+  }
+  if (json.slug !== deletedSlug) return;
+
+  const rest = { ...json };
+  delete rest.slug;
+  delete rest.url;
+  delete rest.claimToken;
+  if (Object.keys(rest).length === 0) {
+    unlinkSync(file);
+    console.log("  ./.m1k.json 도 지웠어요.");
+  } else {
+    writeFileSync(file, JSON.stringify(rest, null, 2) + "\n");
+    console.log("  ./.m1k.json 에서 해당 항목을 지웠어요.");
+  }
+
+  console.log(`  App.tsx 의 trackSlug / .env 의 *_M1K_SLUG 는 직접 지워주세요.\n`);
+}

package/dist/index.d.mts

@@ -501,7 +501,10 @@ interface WatermarkProps {
     hidePoweredBy?: boolean;
     /**
      * m1k.app visitor-tracker slug, forwarded to the embedded PoweredByKit badge.
-     * Falls back to `NEXT_PUBLIC_M1K_SLUG`. No slug → no tracking (off by default).
+     * Falls back to `NEXT_PUBLIC_M1K_SLUG` on Next. Vite apps pass it explicitly:
+     * `trackSlug={import.meta.env.VITE_M1K_SLUG}` — Vite only substitutes
+     * `import.meta.env` in app source, never inside kit's own bundle.
+     * No slug → no tracking (off by default).
      */
     trackSlug?: string;
     /** Set false to disable the visitor beacon even when a slug is present */
@@ -513,9 +516,22 @@ interface WatermarkProps {
         today?: number;
         total?: number;
     };
+    /**
+     * Scale up the shell + credit group on wide screens, so a 430px phone shell
+     * doesn't shrink to a sliver in a field of watermark (it covers ~26% of a
+     * 1440px screen but only ~10% of a 2560px one).
+     *
+     * Default: `true` — a continuous scale driven by viewport width and capped
+     * by available viewport height. Wide-but-short screens stay at a smaller
+     * factor so flex layout never squashes the shell's proportions. The factor
+     * tops out at ×1.5 (see `.kit-stage`). Pass a number to pin one fixed factor
+     * everywhere, or `false` for 1:1 always. The watermark background itself is
+     * never scaled; it always fills the viewport.
+     */
+    zoom?: boolean | number;
 }
 /** Estimate rendered width of a string. CJK chars ≈ 1.0×, Latin ≈ 0.62× font size. */
-declare function Watermark({ children, color, text, maxWidth, sponsor, speed, hidePoweredBy, trackSlug, track, claimed, counts, }: WatermarkProps): react_jsx_runtime.JSX.Element;
+declare function Watermark({ children, color, text, maxWidth, sponsor, speed, hidePoweredBy, trackSlug, track, claimed, counts, zoom, }: WatermarkProps): react_jsx_runtime.JSX.Element;
 
 declare const colors: {
     readonly blue: "#3b82f6";
@@ -977,9 +993,11 @@ interface PoweredByKitProps {
     /** "default" for inside AppShell, "overlay" for on top of Watermark background */
     variant?: "default" | "overlay";
     /**
-     * m1k.app visitor-tracker slug. When set (explicitly or via the
-     * `NEXT_PUBLIC_M1K_SLUG` env var) a tiny hidden beacon counts each page view.
-     * No slug → no tracking (off by default). Register one with `npx m1kkit track`.
+     * m1k.app visitor-tracker slug. When set a tiny hidden beacon counts each
+     * page view; no slug → no tracking (off by default). Next reads
+     * `NEXT_PUBLIC_M1K_SLUG` automatically; Vite apps must pass
+     * `import.meta.env.VITE_M1K_SLUG` in explicitly (see `resolveEnvSlug`).
+     * Register a slug with `npx m1kkit track <url> --write`.
      */
     slug?: string;
     /** Tracker host. Default: "www.m1k.app" (apex m1k.app는 www로 307 리다이렉트 → cross-origin fetch가 CORS로 깨지므로 www 직결) */
@@ -1191,8 +1209,18 @@ interface ActionCardProps {
 declare function ActionCard({ title, items, children, state, onConfirm, onCancel, accent, labels, className, }: ActionCardProps): react_jsx_runtime.JSX.Element;
 
 interface ListRowProps {
-    /** Left color bar + active highlight tint. Defaults to `var(--kit-accent)`. */
+    /** Active highlight tint (and the `bar` color when enabled). Defaults to `var(--kit-accent)`. */
     accent?: string;
+    /**
+     * Draw the left color bar. **Default: false.**
+     *
+     * A thick coloured stripe on one edge of a card is a well-known generated-UI
+     * tell, so it is opt-in rather than the default look — a plain row keeps the
+     * hairline border on all four sides instead. Turn it on where the color
+     * actually carries meaning: a schedule/Gantt timeline where the stripe encodes
+     * the category or calendar of each block.
+     */
+    bar?: boolean;
     /** Leading column, e.g. a time like "14:00" */
     lead?: ReactNode;
     /** Secondary leading line under `lead`, e.g. an end time */
@@ -1214,15 +1242,18 @@ interface ListRowProps {
     className?: string;
 }
 /**
- * Timeline / list row: left color bar, a leading column (time), a title with an
+ * Timeline / list row: an optional leading column (time), a title with an
  * optional subtitle, and trailing content. Height can scale via `heightScale` —
  * handy for schedules, to-dos, Gantt-style timelines, and time blocks.
  *
+ * The left color bar is opt-in (`bar`) — see `ListRowProps.bar`.
+ *
  * @example
- * <ListRow accent="#7fc06a" lead="14:00" title="회의" sub="👥 김상훈" heightScale={2} onClick={open} />
+ * <ListRow title="첫 항목" sub="설명" onClick={open} />
+ * <ListRow bar accent="#7fc06a" lead="14:00" title="회의" sub="👥 김상훈" heightScale={2} />
  * <ListRow lead="09:00" title="스탠드업" trailing="● 지금" active />
  */
-declare function ListRow({ accent, lead, leadSub, title, sub, trailing, active, heightScale, onClick, className, }: ListRowProps): react_jsx_runtime.JSX.Element;
+declare function ListRow({ accent, bar, lead, leadSub, title, sub, trailing, active, heightScale, onClick, className, }: ListRowProps): react_jsx_runtime.JSX.Element;
 
 interface LinkifiedTextProps {
     children: string;

package/dist/index.d.ts

@@ -501,7 +501,10 @@ interface WatermarkProps {
     hidePoweredBy?: boolean;
     /**
      * m1k.app visitor-tracker slug, forwarded to the embedded PoweredByKit badge.
-     * Falls back to `NEXT_PUBLIC_M1K_SLUG`. No slug → no tracking (off by default).
+     * Falls back to `NEXT_PUBLIC_M1K_SLUG` on Next. Vite apps pass it explicitly:
+     * `trackSlug={import.meta.env.VITE_M1K_SLUG}` — Vite only substitutes
+     * `import.meta.env` in app source, never inside kit's own bundle.
+     * No slug → no tracking (off by default).
      */
     trackSlug?: string;
     /** Set false to disable the visitor beacon even when a slug is present */
@@ -513,9 +516,22 @@ interface WatermarkProps {
         today?: number;
         total?: number;
     };
+    /**
+     * Scale up the shell + credit group on wide screens, so a 430px phone shell
+     * doesn't shrink to a sliver in a field of watermark (it covers ~26% of a
+     * 1440px screen but only ~10% of a 2560px one).
+     *
+     * Default: `true` — a continuous scale driven by viewport width and capped
+     * by available viewport height. Wide-but-short screens stay at a smaller
+     * factor so flex layout never squashes the shell's proportions. The factor
+     * tops out at ×1.5 (see `.kit-stage`). Pass a number to pin one fixed factor
+     * everywhere, or `false` for 1:1 always. The watermark background itself is
+     * never scaled; it always fills the viewport.
+     */
+    zoom?: boolean | number;
 }
 /** Estimate rendered width of a string. CJK chars ≈ 1.0×, Latin ≈ 0.62× font size. */
-declare function Watermark({ children, color, text, maxWidth, sponsor, speed, hidePoweredBy, trackSlug, track, claimed, counts, }: WatermarkProps): react_jsx_runtime.JSX.Element;
+declare function Watermark({ children, color, text, maxWidth, sponsor, speed, hidePoweredBy, trackSlug, track, claimed, counts, zoom, }: WatermarkProps): react_jsx_runtime.JSX.Element;
 
 declare const colors: {
     readonly blue: "#3b82f6";
@@ -977,9 +993,11 @@ interface PoweredByKitProps {
     /** "default" for inside AppShell, "overlay" for on top of Watermark background */
     variant?: "default" | "overlay";
     /**
-     * m1k.app visitor-tracker slug. When set (explicitly or via the
-     * `NEXT_PUBLIC_M1K_SLUG` env var) a tiny hidden beacon counts each page view.
-     * No slug → no tracking (off by default). Register one with `npx m1kkit track`.
+     * m1k.app visitor-tracker slug. When set a tiny hidden beacon counts each
+     * page view; no slug → no tracking (off by default). Next reads
+     * `NEXT_PUBLIC_M1K_SLUG` automatically; Vite apps must pass
+     * `import.meta.env.VITE_M1K_SLUG` in explicitly (see `resolveEnvSlug`).
+     * Register a slug with `npx m1kkit track <url> --write`.
      */
     slug?: string;
     /** Tracker host. Default: "www.m1k.app" (apex m1k.app는 www로 307 리다이렉트 → cross-origin fetch가 CORS로 깨지므로 www 직결) */
@@ -1191,8 +1209,18 @@ interface ActionCardProps {
 declare function ActionCard({ title, items, children, state, onConfirm, onCancel, accent, labels, className, }: ActionCardProps): react_jsx_runtime.JSX.Element;
 
 interface ListRowProps {
-    /** Left color bar + active highlight tint. Defaults to `var(--kit-accent)`. */
+    /** Active highlight tint (and the `bar` color when enabled). Defaults to `var(--kit-accent)`. */
     accent?: string;
+    /**
+     * Draw the left color bar. **Default: false.**
+     *
+     * A thick coloured stripe on one edge of a card is a well-known generated-UI
+     * tell, so it is opt-in rather than the default look — a plain row keeps the
+     * hairline border on all four sides instead. Turn it on where the color
+     * actually carries meaning: a schedule/Gantt timeline where the stripe encodes
+     * the category or calendar of each block.
+     */
+    bar?: boolean;
     /** Leading column, e.g. a time like "14:00" */
     lead?: ReactNode;
     /** Secondary leading line under `lead`, e.g. an end time */
@@ -1214,15 +1242,18 @@ interface ListRowProps {
     className?: string;
 }
 /**
- * Timeline / list row: left color bar, a leading column (time), a title with an
+ * Timeline / list row: an optional leading column (time), a title with an
  * optional subtitle, and trailing content. Height can scale via `heightScale` —
  * handy for schedules, to-dos, Gantt-style timelines, and time blocks.
  *
+ * The left color bar is opt-in (`bar`) — see `ListRowProps.bar`.
+ *
  * @example
- * <ListRow accent="#7fc06a" lead="14:00" title="회의" sub="👥 김상훈" heightScale={2} onClick={open} />
+ * <ListRow title="첫 항목" sub="설명" onClick={open} />
+ * <ListRow bar accent="#7fc06a" lead="14:00" title="회의" sub="👥 김상훈" heightScale={2} />
  * <ListRow lead="09:00" title="스탠드업" trailing="● 지금" active />
  */
-declare function ListRow({ accent, lead, leadSub, title, sub, trailing, active, heightScale, onClick, className, }: ListRowProps): react_jsx_runtime.JSX.Element;
+declare function ListRow({ accent, bar, lead, leadSub, title, sub, trailing, active, heightScale, onClick, className, }: ListRowProps): react_jsx_runtime.JSX.Element;
 
 interface LinkifiedTextProps {
     children: string;