@ssebastien/tcmd 0.1.3 → 0.1.4

package/public/style.css

@@ -0,0 +1,901 @@
+/* Project: TinyCommand
+ * Author:  Sebastien Pierre
+ * License: BSD
+ * Created: 2026-09-27
+ *
+ * Styling for the web view (`public/index.html`). The class names are the
+ * contract between the shared components and `web/theme.js`; layout only, the
+ * component logic never reads styles.
+ */
+
+/* Palette mirrors tui/theme.js DARK: night-blue surfaces, gold accents,
+   saturated orange marks. */
+:root {
+	--bg: #0d1526;
+	--bg-panel: #111b31;
+	--bg-raised: #18233d;
+	--bg-cursor: #274a9e;
+	--bg-cursor-inactive: #1b2a51;
+	--bg-marked: #4a2a0c;
+	/* The command panel's argument value fields. */
+	--bg-field: #1b2a51;
+	--border: #33508f;
+	--text: #e6ecff;
+	--text-dim: #8fa3d9;
+	--accent: #ffc233;
+	--accent-soft: #2b3f78;
+	--dir: #5c8cff;
+	--link: #4fc3ff;
+	--dev: #b48eff;
+	--mark: #ff7a1a;
+	--error: #ff4d5e;
+	--warning: #ffb020;
+	--tip: #a78bfa;
+	/* Brand identity bar gradients (kept in sync with tui/theme.js):
+	   Tiny stays blue, Cmd gold→saturated orange. */
+	--brand-tiny-from: #4088ff;
+	--brand-tiny-to: #7cd0ff;
+	--brand-cmd-from: #ffc233;
+	--brand-cmd-to: #ff7a1a;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+	height: 100%;
+	margin: 0;
+}
+
+body {
+	background: var(--bg);
+	color: var(--text);
+	font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+}
+
+.app {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	outline: none;
+}
+
+/* Header --------------------------------------------------------------- */
+
+.app-header {
+	display: flex;
+	align-items: baseline;
+	flex: none;
+	padding: 0.1rem 0.6rem;
+	border-bottom: 1px solid var(--border);
+	background: var(--bg-panel);
+	color: var(--text);
+	font-weight: 600;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Right-hand trail: the view mode and version, dimmer than the brand. */
+.app-header-status {
+	flex: none;
+	margin-left: auto;
+	padding-left: 0.75rem;
+	color: var(--text-dim);
+	font-weight: 400;
+}
+
+/* The mode word shimmers like the brand: explorer along the Tiny blues,
+   commander along the Cmd oranges. */
+.app-header-mode {
+	font-weight: 600;
+}
+
+.app-header-mode.mode-explorer {
+	background: linear-gradient(90deg, var(--brand-tiny-from), var(--brand-tiny-to));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+.app-header-mode.mode-commander {
+	background: linear-gradient(90deg, var(--brand-cmd-from), var(--brand-cmd-to));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+/* The brand and host give way (ellipsis) instead of pushing the trail off. */
+.app-header > span:not(.app-header-status) {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Brand: "Tiny" shimmers along a blue gradient, "Cmd" along a brighter
+   orange than the mark accent. */
+.app-header .brand-tiny {
+	background: linear-gradient(90deg, var(--brand-tiny-from), var(--brand-tiny-to));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+.app-header .brand-cmd {
+	background: linear-gradient(90deg, var(--brand-cmd-from), var(--brand-cmd-to));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+/* Panes ---------------------------------------------------------------- */
+
+.panes {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	gap: 1px;
+	background: var(--border);
+}
+
+.pane {
+	display: flex;
+	flex: 1 1 0;
+	flex-direction: column;
+	min-width: 0;
+	min-height: 0;
+	background: var(--bg-panel);
+	border: 1px solid var(--border);
+}
+
+.pane.is-active {
+	border-color: var(--accent);
+}
+
+/* Explorer mode: the middle (current) column carries the extra width, the
+   parent and preview columns stay even. */
+.pane.is-major {
+	flex-grow: 1.35;
+}
+
+.pane-header {
+	display: flex;
+	align-items: baseline;
+	gap: 0.35rem;
+	min-width: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	font-size: 12px;
+	flex: none;
+	min-height: 1.8rem;
+	padding: 0 0.45rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.pane.is-active .pane-header {
+	border-bottom-color: var(--accent);
+}
+
+.pane-header > div {
+	min-width: 0;
+	flex: 1;
+}
+
+.pane > [data-slot="list"] {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
+/* Breadcrumbs ---------------------------------------------------------- */
+
+.breadcrumbs {
+	flex: none;
+	display: flex;
+	align-items: center;
+	gap: 0.15rem;
+	padding: 0.3rem 0.1rem;
+	overflow: hidden;
+	white-space: nowrap;
+	font-size: 12px;
+}
+
+.crumb {
+	color: var(--text-dim);
+	text-decoration: none;
+}
+
+.crumb:hover {
+	color: var(--accent);
+}
+
+.crumb.is-root {
+	color: var(--text-dim);
+}
+
+.crumb .crumb-sep {
+	color: var(--border);
+}
+
+.crumb-sep:empty {
+	display: none;
+}
+
+/* File list ------------------------------------------------------------ */
+
+.file-list {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	margin: 0;
+	padding: 0.15rem 0;
+}
+
+.file-list ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.file-list p {
+	color: var(--text-dim);
+	white-space: pre;
+}
+
+.file-row {
+	display: grid;
+	grid-template-columns: 1.1rem minmax(0, 1fr) auto;
+	gap: 0.4rem;
+	align-items: baseline;
+	padding: 0 0.35rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.file-row:hover {
+	background: var(--bg-raised);
+}
+
+.file-row.is-current {
+	background: var(--bg-cursor);
+}
+
+.file-row.is-current[data-active="false"] {
+	background: var(--bg-cursor-inactive);
+}
+
+.file-row[data-marked="true"]:not(.is-current) {
+	background: var(--bg-marked);
+}
+
+.marker {
+	color: var(--accent);
+	white-space: pre;
+}
+
+.file-row[data-marked="true"] .marker {
+	color: var(--mark);
+}
+
+.name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.name.is-dir {
+	color: var(--dir);
+	font-weight: 600;
+}
+
+.file-row[data-kind="link"] .name {
+	color: var(--link);
+}
+
+.file-row[data-kind="dev"] .name {
+	color: var(--dev);
+}
+
+.file-row.is-current .name {
+	color: var(--text);
+}
+
+.file-row[data-marked="true"] .name {
+	color: var(--mark);
+}
+
+.size {
+	color: var(--text-dim);
+	font-variant-numeric: tabular-nums;
+}
+
+/* Entry detail ---------------------------------------------------------- */
+
+.entry-detail {
+	border-top: 1px solid var(--border);
+	padding: 0.2rem 0.45rem 0;
+}
+
+.entry-detail-line {
+	display: flex;
+	min-width: 0;
+	white-space: pre;
+	overflow: hidden;
+}
+
+.entry-detail-line > span {
+	flex: none;
+}
+
+.entry-detail-line .entry-detail-spacer {
+	flex: 1;
+	min-width: 1ch;
+}
+
+.entry-detail-sep {
+	color: var(--text-dim);
+}
+
+.entry-detail-type.is-directory {
+	color: var(--dir);
+}
+
+.entry-detail-type.is-symlink {
+	color: var(--link);
+}
+
+.entry-detail-type.is-device {
+	color: var(--dev);
+}
+
+.entry-detail-mode {
+	color: var(--accent);
+}
+
+.entry-detail-marked {
+	color: var(--mark);
+}
+
+/* Summary -------------------------------------------------------------- */
+
+.summary {
+	flex: none;
+	padding: 0.25rem 0.45rem;
+	color: var(--text-dim);
+	white-space: pre;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Filter bar ----------------------------------------------------------- */
+
+.filter-bar {
+	flex: none;
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+	padding: 0.2rem 0.1rem;
+	color: var(--text-dim);
+	font-size: 11px;
+}
+
+.filter-prompt {
+	flex: none;
+	color: var(--text-dim);
+}
+
+.filter-label {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--accent);
+}
+
+.filter-alert {
+	flex: none;
+	color: var(--error);
+}
+
+.filter-input {
+	flex: 1;
+	min-width: 0;
+	background: transparent;
+	border: none;
+	outline: none;
+	color: var(--text);
+	font: inherit;
+	font-size: 12px;
+}
+
+/* Preview -------------------------------------------------------------- */
+
+[data-slot="inspector"] {
+	display: flex;
+	flex: 1 1 0;
+	min-width: 0;
+	min-height: 0;
+}
+
+/* The maximized inspector (`⇧V`): the preview fills the whole pane row. */
+.preview-max {
+	display: flex;
+	flex: 1 1 0;
+	min-width: 0;
+	min-height: 0;
+}
+
+.preview {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	min-width: 0;
+	min-height: 0;
+	padding: 0.35rem 0.5rem;
+	background: var(--bg);
+	border: 1px solid var(--border);
+}
+
+.preview > header {
+	color: var(--text);
+	border-bottom: 1px solid var(--border);
+	padding-bottom: 0.3rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* The inspector's directory column: breadcrumbs over the listing, laid out
+   like a pane header so a previewed directory reads as a pane. */
+.preview > .pane-header {
+	flex: none;
+	border-bottom: 1px solid var(--border);
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.preview-list {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
+.preview-text,
+.preview-card {
+	flex: 1;
+	min-height: 0;
+	margin: 0;
+	overflow: auto;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font: inherit;
+	font-size: 12px;
+}
+
+.preview-card {
+	color: var(--text-dim);
+}
+
+.preview-actions {
+	flex: none;
+	/* The rule that separates the shortcuts from the contents above them. */
+	border-top: 1px solid var(--border);
+	padding-top: 0.35rem;
+	color: var(--text-dim);
+	font-size: 11px;
+}
+
+/* Command bar ---------------------------------------------------------- */
+
+.command-bar {
+	flex: none;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+	min-height: 1.9rem;
+	padding: 0.25rem 0.6rem;
+	border-top: 1px solid var(--border);
+	background: var(--bg-panel);
+	overflow: hidden;
+}
+
+.command-bar-keys {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.45rem;
+}
+
+.command-key {
+	background: var(--bg-raised);
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	color: var(--text-dim);
+	cursor: pointer;
+	font: inherit;
+	font-size: 11px;
+	padding: 0.05rem 0.4rem;
+}
+
+.command-key:hover {
+	color: var(--text);
+	border-color: var(--accent-soft);
+}
+
+.command-key:disabled {
+	background: transparent;
+	border-color: transparent;
+	cursor: default;
+}
+
+button:focus-visible,
+input:focus-visible {
+	outline: 1px solid var(--accent);
+	outline-offset: 2px;
+}
+
+.command-bar .is-error {
+	color: var(--error);
+}
+
+.command-bar [data-kind="warning"] {
+	color: var(--warning);
+}
+
+.command-bar [data-kind="tip"] {
+	color: var(--tip);
+}
+
+/* Confirm -------------------------------------------------------------- */
+
+.confirm {
+	position: fixed;
+	inset: 0;
+	z-index: 20;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgb(0 0 0 / 45%);
+}
+
+.confirm p {
+	max-width: min(560px, 90vw);
+	margin: 0;
+	padding: 0.6rem 0.9rem;
+	background: var(--bg-panel);
+	border: 1px solid var(--error);
+	border-radius: 6px;
+	pointer-events: auto;
+}
+
+/* Modal presentations -------------------------------------------------- */
+
+.command-panel,
+.bookmark-list,
+.help,
+.viewer {
+	position: fixed;
+	inset: 0;
+	z-index: 15;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	background: rgb(0 0 0 / 45%);
+}
+
+.help {
+	z-index: 30;
+}
+
+.command-dialog,
+.bookmark-dialog,
+.help-dialog {
+	display: flex;
+	flex-direction: column;
+	width: min(900px, 95vw);
+	max-height: 85vh;
+	min-height: 0;
+	padding: 0.6rem;
+	border: 1px solid var(--accent);
+	border-radius: 6px;
+	background: var(--bg-panel);
+}
+
+.command-dialog {
+	height: 72vh;
+}
+
+.bookmark-dialog,
+.help-dialog {
+	width: min(640px, 95vw);
+}
+
+.command-dialog > header,
+.help-dialog > header,
+.bookmark-dialog h2 {
+	color: var(--text);
+	font: inherit;
+	font-weight: 600;
+	margin: 0 0 0.4rem;
+}
+
+.panel-query-line,
+.panel-value-line,
+.bookmark-dialog > header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.3rem 0;
+}
+
+/* The left pane: the `:` filter over the grouped command list. */
+.panel-command-column {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.panel-query,
+.panel-value {
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+	min-width: 2ch;
+}
+
+/* The right pane's header: the selected command's name. */
+.panel-command-name {
+	margin: 0;
+	padding: 0.3rem 0.6rem;
+	color: var(--text);
+	font-weight: 600;
+}
+
+/* The resolved command, dim, at the foot of the argument pane. */
+.panel-runs {
+	margin-top: auto;
+	padding: 0.4rem 0.6rem 0.2rem;
+	color: var(--text-dim);
+	overflow: auto;
+	max-height: 20vh;
+	border-top: 1px solid var(--border);
+}
+
+.panel-runs pre {
+	margin: 0;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font: inherit;
+}
+
+/* The argument pane's rows: an aligned label + boxed value field for an
+   argument, and a bordered list of selected paths under a selection. */
+.panel-row[data-type="arg"] .panel-name {
+	white-space: pre;
+	color: var(--text-dim);
+}
+
+.panel-row[data-type="arg"].is-focused .panel-name {
+	color: var(--accent);
+}
+
+.panel-field {
+	display: inline-flex;
+	align-items: baseline;
+	flex: 1;
+	min-width: 0;
+	background: var(--bg-field);
+	border-radius: 3px;
+	padding: 0 0.25rem;
+}
+
+.panel-field-bracket {
+	color: var(--text-dim);
+}
+
+.panel-field-value {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: pre;
+	color: var(--text);
+}
+
+.panel-field .panel-value {
+	flex: 1;
+	min-width: 0;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+}
+
+.panel-list-indent {
+	white-space: pre;
+}
+
+.panel-list-box {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	flex: 1;
+	min-width: 0;
+	border-left: 1px solid var(--border);
+	border-right: 1px solid var(--border);
+	padding: 0 0.4rem;
+}
+
+.panel-row.is-list-top .panel-list-box {
+	border-top: 1px solid var(--border);
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+}
+
+.panel-row.is-list-bottom .panel-list-box {
+	border-bottom: 1px solid var(--border);
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+.panel-query,
+.panel-value,
+.bookmark-query {
+	flex: 1;
+	min-width: 0;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+}
+
+.panel-columns {
+	display: grid;
+	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+	flex: 1;
+	min-height: 0;
+	border-top: 1px solid var(--border);
+	border-bottom: 1px solid var(--border);
+}
+
+.panel-ops,
+.panel-args,
+.bookmark-rows {
+	list-style: none;
+	margin: 0;
+	padding: 0.3rem 0;
+	overflow: auto;
+	min-height: 0;
+}
+
+/* The argument column: an empty state (a TinyCmd action binds no arguments)
+   above the rows, with the divider on the column rather than the list so both
+   stay visible. */
+.panel-args-column {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	border-left: 1px solid var(--border);
+}
+
+.panel-args-empty {
+	margin: 0;
+	padding: 0.3rem 0.6rem;
+	color: var(--text-dim);
+	font-style: italic;
+}
+
+/* File picker sub-mode: the browsed path, its filter, then the entry rows
+   (which reuse `.panel-row` through the shared arg-row map). */
+.panel-picker {
+	display: flex;
+	flex-direction: column;
+	gap: 0.15rem;
+	padding: 0.3rem 0.6rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.panel-picker-path {
+	margin: 0;
+	color: var(--text-dim);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.panel-picker-line {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.panel-picker-query {
+	flex: 1;
+	min-width: 0;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+}
+
+.panel-row,
+.bookmark-row {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	padding: 0.15rem 0.3rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.panel-row.is-focused,
+.bookmark-row.is-selected {
+	background: var(--accent-soft);
+}
+
+.panel-marker,
+.bookmark-marker {
+	color: var(--accent);
+	white-space: pre;
+}
+
+.panel-summary,
+.bookmark-path {
+	color: var(--text-dim);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.panel-row.is-focused .panel-name {
+	color: var(--accent);
+}
+
+.panel-row[data-risk="destructive"] .panel-name {
+	color: var(--error);
+}
+
+.panel-row[data-risk="caution"] .panel-name {
+	color: var(--warning);
+}
+
+.panel-row[data-selected="true"]:not(.is-focused) .panel-name {
+	color: var(--mark);
+}
+
+.command-dialog > footer,
+.bookmark-dialog > footer,
+.help-dialog > footer,
+.bookmark-target,
+.bookmark-empty {
+	color: var(--text-dim);
+	padding-top: 0.3rem;
+}
+
+.help-dialog pre {
+	font: inherit;
+	overflow: auto;
+	min-height: 0;
+}
+
+.viewer > .preview {
+	flex: none;
+	width: 90%;
+	height: 90%;
+}
+
+.resize-hint {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	color: var(--text-dim);
+}
+
+/* EOF */