@kubohiroya/turbowarp-plus-editor-git 0.16.0 → 0.16.1

package/dist/close-button.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/** A button drawn as an X, named by `label` for screen readers and in its tooltip. */
+export declare function CloseButton({ label, onClick }: {
+    label: string;
+    onClick(): void;
+}): React.JSX.Element;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { C as parseProjectSource, a as openProjectSourceTabs, b as useCostumeImage, c as gitHubRepositoryFromOrigin, f as organizeProjectChanges, i as createScratchBlocksDiffLocator, l as ProjectSourceComparison, n as openProjectComparison, o as PullRequestError, p as projectPropertyLabel, r as createScratchBlocksDiffRenderer, s as createGitHubPullRequests, u as ProjectSourceReview, w as readProjectSourceDiff, y as useAssetImage } from "./project-comparison-MU0qD2wo.js";
+import { C as parseProjectSource, T as CloseButton, a as openProjectSourceTabs, b as useCostumeImage, c as gitHubRepositoryFromOrigin, f as organizeProjectChanges, i as createScratchBlocksDiffLocator, l as ProjectSourceComparison, n as openProjectComparison, o as PullRequestError, p as projectPropertyLabel, r as createScratchBlocksDiffRenderer, s as createGitHubPullRequests, u as ProjectSourceReview, w as readProjectSourceDiff, y as useAssetImage } from "./project-comparison-1rggIJse.js";
 import { n as init_objectSpread2, r as __commonJSMin, t as _objectSpread2$1 } from "./objectSpread2-Dkd68nJH.js";
 import { a as createReadOnlyFs, i as GitPanelError, n as openRepository } from "./repository-BYno-5f8.js";
 import * as m from "react";
@@ -4569,7 +4569,10 @@ function GitPanel({ vm, document, host, controller }) {
 		type: "button",
 		disabled: state.busy,
 		onClick: () => setReview(!review)
-	}, review ? labels.localChanges : labels.pullRequests), /* @__PURE__ */ React.createElement("button", { onClick: closePanel }, labels.close)), /* @__PURE__ */ React.createElement("div", { className: "twgit-context" }, /* @__PURE__ */ React.createElement("span", null, labels.repository, " · ", ((_state$repository = state.repository) === null || _state$repository === void 0 ? void 0 : _state$repository.root.name) || "—"), /* @__PURE__ */ React.createElement("span", null, labels.project, " · ", state.project === null ? labels.none : state.project || labels.root), /* @__PURE__ */ React.createElement("span", { "data-git-dirty": "" }, dirty ? labels.dirty : labels.saved), state.snapshot && /* @__PURE__ */ React.createElement("span", {
+	}, review ? labels.localChanges : labels.pullRequests), /* @__PURE__ */ React.createElement(CloseButton, {
+		label: labels.close,
+		onClick: closePanel
+	})), /* @__PURE__ */ React.createElement("div", { className: "twgit-context" }, /* @__PURE__ */ React.createElement("span", null, labels.repository, " · ", ((_state$repository = state.repository) === null || _state$repository === void 0 ? void 0 : _state$repository.root.name) || "—"), /* @__PURE__ */ React.createElement("span", null, labels.project, " · ", state.project === null ? labels.none : state.project || labels.root), /* @__PURE__ */ React.createElement("span", { "data-git-dirty": "" }, dirty ? labels.dirty : labels.saved), state.snapshot && /* @__PURE__ */ React.createElement("span", {
 		"data-git-upstream": state.snapshot.upstream.state,
 		title: labels.checkedAt
 	}, upstreamText(state.snapshot, labels)), !review && host.connectionSettings && /* @__PURE__ */ React.createElement(ConnectionSettings, {

package/dist/{project-comparison-MU0qD2wo.js → project-comparison-1rggIJse.js}

@@ -2,6 +2,29 @@ import { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dk
 import { a as createTwoFilesPatch, i as isAssetName, n as assetsDirectoryParts, o as hasOnlyUnixLineEndings, r as folderSettingsLimit, s as hasOnlyWinLineEndings, t as assetLimit } from "./project-asset-paths-KV715791.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
+// src/close-button.tsx
+/** A button drawn as an X, named by `label` for screen readers and in its tooltip. */
+function CloseButton({ label, onClick }) {
+	return /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "twgit-close",
+		"aria-label": label,
+		title: label,
+		onClick
+	}, /* @__PURE__ */ React.createElement("svg", {
+		viewBox: "0 0 16 16",
+		width: "18",
+		height: "18",
+		"aria-hidden": "true",
+		focusable: "false"
+	}, /* @__PURE__ */ React.createElement("path", {
+		d: "M4 4l8 8M12 4l-8 8",
+		stroke: "currentColor",
+		strokeWidth: "1.6",
+		strokeLinecap: "round",
+		fill: "none"
+	})));
+}
 // node_modules/diff/libesm/patch/line-endings.js
 function unixToWin(patch) {
 	if (Array.isArray(patch)) return patch.map((p) => unixToWin(p));
@@ -2670,7 +2693,7 @@ function createScratchBlocksDiffRenderer(options) {
 init_objectSpread2();
 var focusable = "button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex=\"0\"]";
 /** A modal that lays project comparisons side by side in sections and asks the user to choose an action. */
-function ProjectComparisonDialog({ title, description, notes = [], sections, actions, closeLabel = "Close", renderBlock, locale = "en", onChoose }) {
+function ProjectComparisonDialog({ title, description, notes = [], sections, actions, closeLabel, renderBlock, locale = "en", onChoose }) {
 	const dialog = useRef(null);
 	const first = useRef(null);
 	useEffect(() => {
@@ -2707,10 +2730,10 @@ function ProjectComparisonDialog({ title, description, notes = [], sections, act
 		"aria-modal": "true",
 		"aria-label": title,
 		onKeyDown: keyDown
-	}, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h2", null, title), /* @__PURE__ */ React.createElement("button", {
-		type: "button",
+	}, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h2", null, title), /* @__PURE__ */ React.createElement(CloseButton, {
+		label: closeLabel !== null && closeLabel !== void 0 ? closeLabel : locale.startsWith("ja") ? "閉じる" : "Close",
 		onClick: () => onChoose(null)
-	}, closeLabel)), /* @__PURE__ */ React.createElement("div", { className: "twgit-comparison-body" }, description && /* @__PURE__ */ React.createElement("p", null, description), notes.map((note) => /* @__PURE__ */ React.createElement("p", {
+	})), /* @__PURE__ */ React.createElement("div", { className: "twgit-comparison-body" }, description && /* @__PURE__ */ React.createElement("p", null, description), notes.map((note) => /* @__PURE__ */ React.createElement("p", {
 		key: note,
 		role: "note"
 	}, note)), sections.map((section) => /* @__PURE__ */ React.createElement("section", {
@@ -2743,4 +2766,4 @@ function openProjectComparison(document, options) {
 		render(/* @__PURE__ */ React.createElement(ProjectComparisonDialog, _objectSpread2(_objectSpread2({}, options), {}, { onChoose: choose })), root);
 	});
 }
-export { parseProjectSource as C, createProjectSourceDiff as S, usePreviewSync as _, openProjectSourceTabs as a, useCostumeImage as b, gitHubRepositoryFromOrigin as c, assetFileName as d, organizeProjectChanges as f, createPreviewSync as g, BlockPreview as h, createScratchBlocksDiffLocator as i, ProjectSourceComparison as l, compareProjectForReview as m, openProjectComparison as n, PullRequestError as o, projectPropertyLabel as p, createScratchBlocksDiffRenderer as r, createGitHubPullRequests as s, ProjectComparisonDialog as t, ProjectSourceReview as u, currentCostume as v, readProjectSourceDiff as w, compareProjectBlocks as x, useAssetImage as y };
+export { parseProjectSource as C, createProjectSourceDiff as S, CloseButton as T, usePreviewSync as _, openProjectSourceTabs as a, useCostumeImage as b, gitHubRepositoryFromOrigin as c, assetFileName as d, organizeProjectChanges as f, createPreviewSync as g, BlockPreview as h, createScratchBlocksDiffLocator as i, ProjectSourceComparison as l, compareProjectForReview as m, openProjectComparison as n, PullRequestError as o, projectPropertyLabel as p, createScratchBlocksDiffRenderer as r, createGitHubPullRequests as s, ProjectComparisonDialog as t, ProjectSourceReview as u, currentCostume as v, readProjectSourceDiff as w, compareProjectBlocks as x, useAssetImage as y };

package/dist/project-comparison.d.ts

@@ -18,6 +18,7 @@ export interface ProjectComparisonOptions {
     sections: readonly ProjectComparisonSection[];
     /** The first action is the one the dialog focuses. Closing the dialog or pressing Escape chooses none. */
     actions: readonly ProjectComparisonAction[];
+    /** The tooltip and accessible name of the X button that closes the dialog. By default, "Close" in the locale. */
     closeLabel?: string;
     renderBlock: ProjectBlockRenderer;
     locale?: string;

package/dist/project-source-diff.js

@@ -1,4 +1,4 @@
-import { S as createProjectSourceDiff, _ as usePreviewSync, a as openProjectSourceTabs, c as gitHubRepositoryFromOrigin, d as assetFileName, f as organizeProjectChanges, g as createPreviewSync, h as BlockPreview, i as createScratchBlocksDiffLocator, l as ProjectSourceComparison, m as compareProjectForReview, n as openProjectComparison, p as projectPropertyLabel, r as createScratchBlocksDiffRenderer, s as createGitHubPullRequests, t as ProjectComparisonDialog, u as ProjectSourceReview, v as currentCostume, w as readProjectSourceDiff, x as compareProjectBlocks } from "./project-comparison-MU0qD2wo.js";
+import { S as createProjectSourceDiff, _ as usePreviewSync, a as openProjectSourceTabs, c as gitHubRepositoryFromOrigin, d as assetFileName, f as organizeProjectChanges, g as createPreviewSync, h as BlockPreview, i as createScratchBlocksDiffLocator, l as ProjectSourceComparison, m as compareProjectForReview, n as openProjectComparison, p as projectPropertyLabel, r as createScratchBlocksDiffRenderer, s as createGitHubPullRequests, t as ProjectComparisonDialog, u as ProjectSourceReview, v as currentCostume, w as readProjectSourceDiff, x as compareProjectBlocks } from "./project-comparison-1rggIJse.js";
 import { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 // src/project-source-diff.tsx

package/dist/style.css

@@ -124,6 +124,10 @@
 .twgit-panel { width: 94vw; height: 90vh; display: flex; flex-direction: column; background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 8px; box-shadow: 0 12px 48px #0005; font: 14px/1.5 system-ui, sans-serif; overflow: hidden; }
 .twgit-panel > header { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid GrayText; }
 .twgit-panel > header h2 { margin: 0 auto 0 0; font-size: 18px; }
+.twgit-panel .twgit-close, .twgit-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
+    border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
+.twgit-panel .twgit-close:hover, .twgit-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
+.twgit-panel .twgit-close:focus-visible, .twgit-close:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
 .twgit-panel h3 { font-size: 14px; margin: 12px 0 5px; }
 .twgit-panel button { color: inherit; background: Canvas; border: 1px solid GrayText; border-radius: 4px; padding: 4px 8px; cursor: pointer; font: inherit; text-align: start; }
 .twgit-panel button:disabled { opacity: .5; cursor: default; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-git",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Read-only local Git panel for TurboWarp Plus Editor",
   "type": "module",
   "license": "MPL-2.0",

package/src/close-button.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+/** A button drawn as an X, named by `label` for screen readers and in its tooltip. */
+export function CloseButton({label, onClick}: {label: string; onClick(): void}) {
+    return <button type="button" className="twgit-close" aria-label={label} title={label} onClick={onClick}>
+        <svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true" focusable="false">
+            <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none"/>
+        </svg>
+    </button>;
+}

package/src/index.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {createPortal, render, unmountComponentAtNode} from 'react-dom';
+import {CloseButton} from './close-button.js';
 import {FileDiffView} from './file-diff-view.js';
 import {findElement, ProjectChangeListView, ProjectElementView, projectChangeLabels, useProjectChanges} from './project-change-list.js';
 import type {ChangedFile} from './project-change-model.js';
@@ -485,7 +486,7 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                 {!review && state.project !== null && <button disabled={state.busy} onClick={() => void openProject(state.project!)}>{labels.reload}</button>}
                 {state.repository && host.renderReviewBlock && <button type="button" disabled={state.busy}
                     onClick={() => setReview(!review)}>{review ? labels.localChanges : labels.pullRequests}</button>}
-                <button onClick={closePanel}>{labels.close}</button>
+                <CloseButton label={labels.close} onClick={closePanel}/>
             </header>
             <div className="twgit-context">
                 <span>{labels.repository} · {state.repository?.root.name || '—'}</span>

package/src/project-comparison.tsx

@@ -1,4 +1,5 @@
 import React, {useEffect, useRef} from 'react';
+import {CloseButton} from './close-button.js';
 import {render, unmountComponentAtNode} from 'react-dom';
 import {ProjectSourceComparison} from './project-source-review.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
@@ -21,6 +22,7 @@ export interface ProjectComparisonOptions {
     sections: readonly ProjectComparisonSection[];
     /** The first action is the one the dialog focuses. Closing the dialog or pressing Escape chooses none. */
     actions: readonly ProjectComparisonAction[];
+    /** The tooltip and accessible name of the X button that closes the dialog. By default, "Close" in the locale. */
     closeLabel?: string;
     renderBlock: ProjectBlockRenderer;
     locale?: string;
@@ -32,7 +34,7 @@ export interface ProjectComparisonDialogProps extends ProjectComparisonOptions {
 const focusable = 'button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex="0"]';
 
 /** A modal that lays project comparisons side by side in sections and asks the user to choose an action. */
-export function ProjectComparisonDialog({title, description, notes = [], sections, actions, closeLabel = 'Close',
+export function ProjectComparisonDialog({title, description, notes = [], sections, actions, closeLabel,
     renderBlock, locale = 'en', onChoose}: ProjectComparisonDialogProps) {
     const dialog = useRef<HTMLDivElement>(null);
     const first = useRef<HTMLButtonElement>(null);
@@ -55,7 +57,7 @@ export function ProjectComparisonDialog({title, description, notes = [], section
             aria-label={title} onKeyDown={keyDown}>
             <header>
                 <h2>{title}</h2>
-                <button type="button" onClick={() => onChoose(null)}>{closeLabel}</button>
+                <CloseButton label={closeLabel ?? (locale.startsWith('ja') ? '閉じる' : 'Close')} onClick={() => onChoose(null)}/>
             </header>
             <div className="twgit-comparison-body">
                 {description && <p>{description}</p>}

package/src/style.css

@@ -2,6 +2,10 @@
 .twgit-panel { width: 94vw; height: 90vh; display: flex; flex-direction: column; background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 8px; box-shadow: 0 12px 48px #0005; font: 14px/1.5 system-ui, sans-serif; overflow: hidden; }
 .twgit-panel > header { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid GrayText; }
 .twgit-panel > header h2 { margin: 0 auto 0 0; font-size: 18px; }
+.twgit-panel .twgit-close, .twgit-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
+    border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
+.twgit-panel .twgit-close:hover, .twgit-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
+.twgit-panel .twgit-close:focus-visible, .twgit-close:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
 .twgit-panel h3 { font-size: 14px; margin: 12px 0 5px; }
 .twgit-panel button { color: inherit; background: Canvas; border: 1px solid GrayText; border-radius: 4px; padding: 4px 8px; cursor: pointer; font: inherit; text-align: start; }
 .twgit-panel button:disabled { opacity: .5; cursor: default; }