@ddtcorex/dsh-maestro-review 0.11.1 → 0.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/client.js
CHANGED
|
@@ -360,7 +360,16 @@ var REVIEW_CSS = `
|
|
|
360
360
|
and a wrapped one reads as a third column. */
|
|
361
361
|
[data-review-row] { flex-direction: column; align-items: stretch; gap: 8px; }
|
|
362
362
|
[data-review-row-text] { padding-right: 0; }
|
|
363
|
-
|
|
363
|
+
/* Every field takes the full row width, with or without a Save button: the
|
|
364
|
+
button stays on the same row and the input takes the rest. */
|
|
365
|
+
[data-review-control] { justify-content: flex-start; width: 100%; }
|
|
366
|
+
[data-review-control] input[type="text"], [data-review-control] input[type="password"], [data-review-control] select { flex: 1 1 auto; min-width: 0; width: 100%; }
|
|
367
|
+
[data-review-secret-group] { width: 100%; min-width: 0; }
|
|
368
|
+
/* A checkbox row does not stack: label and hint stay left, the box is held
|
|
369
|
+
right as a 44px tap target on the same line. Stacked, it left a lone 16px
|
|
370
|
+
box on a line of its own under the label. */
|
|
371
|
+
[data-review-row]:has(> [data-review-control] > input[type="checkbox"]:only-child) { flex-direction: row; align-items: center; gap: 12px; }
|
|
372
|
+
[data-review-row]:has(> [data-review-control] > input[type="checkbox"]:only-child) [data-review-control] { flex: none; width: auto; min-width: 44px; min-height: 44px; justify-content: center; }
|
|
364
373
|
}
|
|
365
374
|
|
|
366
375
|
@media (max-width: 480px) {
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
* magnifies the viewport for a focused field below that size, and a magnified
|
|
8
8
|
* sheet never blurs back.
|
|
9
9
|
*/
|
|
10
|
-
export declare const REVIEW_CSS = "\n[data-review-root], [data-review-root] * { box-sizing: border-box; }\n[data-review-root] {\n display: flex; flex-direction: column; gap: 12px;\n color: var(--dsw-alias-label-primary);\n font-size: 13px; line-height: 1.5;\n min-width: 0; width: 100%; max-width: 640px;\n}\n\n/* House header: badge + title + one-line status. */\n[data-review-header] { display: flex; gap: 10px; align-items: flex-start; padding: 2px 2px 8px; }\n[data-review-heading] { display: flex; flex-direction: column; min-width: 0; }\n[data-review-title] { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; }\n[data-review-status] { font-size: 12px; line-height: 16px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }\n[data-review-status] [data-review-notice] { margin: 0; }\n[data-review-status] [data-review-notice][data-tone=\"ok\"] { color: var(--dsw-alias-state-success-primary); }\n[data-review-status] [data-review-notice][data-tone=\"bad\"] { color: var(--dsw-alias-state-error-primary); }\n\n[data-review-actions] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n[data-review-actions] button {\n min-height: 32px; padding: 0 12px; border-radius: 8px;\n border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1);\n color: inherit; font: inherit; cursor: pointer;\n}\n[data-review-actions] button:disabled { opacity: 0.55; cursor: default; }\n[data-review-actions] button:focus-visible { outline: 2px solid var(--dsw-alias-border-l2); outline-offset: 2px; }\n\n/* House row: label and hint left, control held right, hairline between. */\n[data-review-row] {\n display: flex; align-items: center; gap: 8px;\n padding: 16px 0; border-bottom: 1px solid var(--dsw-alias-border-l2); min-width: 0;\n}\n[data-review-row]:last-of-type { border-bottom: none; }\n[data-review-row-text] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 48px; }\n[data-review-control] { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 36px; }\n/* Declared once. These two rules previously existed twice \u2014 the 12px/600 pair\n sat AFTER the house values and won on source order at equal specificity, so\n the whole tab rendered at the old weight and the old hint size. */\n[data-review-label] { font-size: 14px; font-weight: 400; line-height: 22px; color: var(--dsw-alias-label-primary); }\n[data-review-hint] { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }\n\n/* A secret whose value is committed by a button: input and save travel\n together on ONE row. The button used to sit on a row of its own below the\n field \u2014 the group was a column and the button was align-self: flex-end \u2014\n which orphaned it from the control it saves. It stays disabled until the\n field holds something, so proximity to that field is the point. */\n[data-review-secret-group] { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 220px; }\n[data-review-secret-group] input { flex: 1 1 auto; min-width: 0; }\n[data-review-secret-group] button {\n flex: none; align-self: center; min-height: 44px; padding: 0 12px; border-radius: 8px;\n border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1);\n color: inherit; font: inherit; cursor: pointer;\n}\n[data-review-secret-group] button:disabled { opacity: 0.55; cursor: default; }\n[data-review-secret-group] button:focus-visible { outline: 2px solid var(--dsw-alias-border-l2); outline-offset: 2px; }\n\n/* Every row control gets the same box \u2014 the shared settings field box, copied\n from the host's own form primitive (ui-primitives ConfigField) so this tab\n follows the shell instead of carrying a geometry of its own. Only\n min-height: 44px is Maestro's: it is the touch target AGENTS.md requires,\n which the host's line-box sizing does not give.\n The password type belongs in this list: without it the two secret fields\n rendered at the UA default \u2014 21px tall, no radius \u2014 beside their neighbours\n in the same column. */\n[data-review-control] input[type=\"text\"], [data-review-control] input[type=\"password\"], [data-review-control] select {\n min-height: 44px; padding: 6px 12px; border: 0.5px solid var(--dsw-alias-border-l4);\n border-radius: var(--dsw-radius-md); background: var(--dsw-alias-bg-layer-3);\n color: var(--dsw-alias-label-primary); font: inherit;\n}\n[data-review-control] input:focus-visible, [data-review-control] select:focus-visible {\n outline: 2px solid var(--dsw-alias-border-l2); outline-offset: 2px;\n}\n/* The checkbox is the one control the harness draws at its own size; without\n this it rendered at the UA's 13px. Same values as the reference row. */\n[data-review-control] input[type=\"checkbox\"] {\n width: 16px; height: 16px; margin: 0; flex: none;\n accent-color: var(--dsw-alias-brand-primary, #0A84FF);\n}\n\n[data-review-pin], [data-review-lan] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n[data-review-pin] code, [data-review-lan] code {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n padding: 2px 6px; border-radius: 6px; background: var(--dsw-alias-bg-layer-2);\n}\n[data-review-pin] button, [data-review-lan] button {\n min-height: 32px; padding: 0 10px; border-radius: 8px;\n border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1);\n color: inherit; font: inherit; cursor: pointer;\n}\n\n@media (max-width: 640px) {\n /* Below the measure the row stacks: a right-held control has no room left,\n and a wrapped one reads as a third column. */\n [data-review-row] { flex-direction: column; align-items: stretch; gap: 8px; }\n [data-review-row-text] { padding-right: 0; }\n [data-review-control] { justify-content: flex-start; }\n}\n\n@media (max-width: 480px) {\n [data-review-actions] button { flex: 1 1 auto; min-height: 40px; }\n}\n\n/* iOS 16px field floor: the magnifier fires below this on a focused field. */\n@media (max-width: 1023px) and (pointer: coarse) {\n html[data-mobile-nav-ios] [data-review-root] input,\n html[data-mobile-nav-ios] [data-review-root] select { font-size: 16px !important; }\n}\n";
|
|
10
|
+
export declare const REVIEW_CSS = "\n[data-review-root], [data-review-root] * { box-sizing: border-box; }\n[data-review-root] {\n display: flex; flex-direction: column; gap: 12px;\n color: var(--dsw-alias-label-primary);\n font-size: 13px; line-height: 1.5;\n min-width: 0; width: 100%; max-width: 640px;\n}\n\n/* House header: badge + title + one-line status. */\n[data-review-header] { display: flex; gap: 10px; align-items: flex-start; padding: 2px 2px 8px; }\n[data-review-heading] { display: flex; flex-direction: column; min-width: 0; }\n[data-review-title] { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; }\n[data-review-status] { font-size: 12px; line-height: 16px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }\n[data-review-status] [data-review-notice] { margin: 0; }\n[data-review-status] [data-review-notice][data-tone=\"ok\"] { color: var(--dsw-alias-state-success-primary); }\n[data-review-status] [data-review-notice][data-tone=\"bad\"] { color: var(--dsw-alias-state-error-primary); }\n\n[data-review-actions] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n[data-review-actions] button {\n min-height: 32px; padding: 0 12px; border-radius: 8px;\n border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1);\n color: inherit; font: inherit; cursor: pointer;\n}\n[data-review-actions] button:disabled { opacity: 0.55; cursor: default; }\n[data-review-actions] button:focus-visible { outline: 2px solid var(--dsw-alias-border-l2); outline-offset: 2px; }\n\n/* House row: label and hint left, control held right, hairline between. */\n[data-review-row] {\n display: flex; align-items: center; gap: 8px;\n padding: 16px 0; border-bottom: 1px solid var(--dsw-alias-border-l2); min-width: 0;\n}\n[data-review-row]:last-of-type { border-bottom: none; }\n[data-review-row-text] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 48px; }\n[data-review-control] { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 36px; }\n/* Declared once. These two rules previously existed twice \u2014 the 12px/600 pair\n sat AFTER the house values and won on source order at equal specificity, so\n the whole tab rendered at the old weight and the old hint size. */\n[data-review-label] { font-size: 14px; font-weight: 400; line-height: 22px; color: var(--dsw-alias-label-primary); }\n[data-review-hint] { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }\n\n/* A secret whose value is committed by a button: input and save travel\n together on ONE row. The button used to sit on a row of its own below the\n field \u2014 the group was a column and the button was align-self: flex-end \u2014\n which orphaned it from the control it saves. It stays disabled until the\n field holds something, so proximity to that field is the point. */\n[data-review-secret-group] { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 220px; }\n[data-review-secret-group] input { flex: 1 1 auto; min-width: 0; }\n[data-review-secret-group] button {\n flex: none; align-self: center; min-height: 44px; padding: 0 12px; border-radius: 8px;\n border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1);\n color: inherit; font: inherit; cursor: pointer;\n}\n[data-review-secret-group] button:disabled { opacity: 0.55; cursor: default; }\n[data-review-secret-group] button:focus-visible { outline: 2px solid var(--dsw-alias-border-l2); outline-offset: 2px; }\n\n/* Every row control gets the same box \u2014 the shared settings field box, copied\n from the host's own form primitive (ui-primitives ConfigField) so this tab\n follows the shell instead of carrying a geometry of its own. Only\n min-height: 44px is Maestro's: it is the touch target AGENTS.md requires,\n which the host's line-box sizing does not give.\n The password type belongs in this list: without it the two secret fields\n rendered at the UA default \u2014 21px tall, no radius \u2014 beside their neighbours\n in the same column. */\n[data-review-control] input[type=\"text\"], [data-review-control] input[type=\"password\"], [data-review-control] select {\n min-height: 44px; padding: 6px 12px; border: 0.5px solid var(--dsw-alias-border-l4);\n border-radius: var(--dsw-radius-md); background: var(--dsw-alias-bg-layer-3);\n color: var(--dsw-alias-label-primary); font: inherit;\n}\n[data-review-control] input:focus-visible, [data-review-control] select:focus-visible {\n outline: 2px solid var(--dsw-alias-border-l2); outline-offset: 2px;\n}\n/* The checkbox is the one control the harness draws at its own size; without\n this it rendered at the UA's 13px. Same values as the reference row. */\n[data-review-control] input[type=\"checkbox\"] {\n width: 16px; height: 16px; margin: 0; flex: none;\n accent-color: var(--dsw-alias-brand-primary, #0A84FF);\n}\n\n[data-review-pin], [data-review-lan] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n[data-review-pin] code, [data-review-lan] code {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n padding: 2px 6px; border-radius: 6px; background: var(--dsw-alias-bg-layer-2);\n}\n[data-review-pin] button, [data-review-lan] button {\n min-height: 32px; padding: 0 10px; border-radius: 8px;\n border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1);\n color: inherit; font: inherit; cursor: pointer;\n}\n\n@media (max-width: 640px) {\n /* Below the measure the row stacks: a right-held control has no room left,\n and a wrapped one reads as a third column. */\n [data-review-row] { flex-direction: column; align-items: stretch; gap: 8px; }\n [data-review-row-text] { padding-right: 0; }\n /* Every field takes the full row width, with or without a Save button: the\n button stays on the same row and the input takes the rest. */\n [data-review-control] { justify-content: flex-start; width: 100%; }\n [data-review-control] input[type=\"text\"], [data-review-control] input[type=\"password\"], [data-review-control] select { flex: 1 1 auto; min-width: 0; width: 100%; }\n [data-review-secret-group] { width: 100%; min-width: 0; }\n /* A checkbox row does not stack: label and hint stay left, the box is held\n right as a 44px tap target on the same line. Stacked, it left a lone 16px\n box on a line of its own under the label. */\n [data-review-row]:has(> [data-review-control] > input[type=\"checkbox\"]:only-child) { flex-direction: row; align-items: center; gap: 12px; }\n [data-review-row]:has(> [data-review-control] > input[type=\"checkbox\"]:only-child) [data-review-control] { flex: none; width: auto; min-width: 44px; min-height: 44px; justify-content: center; }\n}\n\n@media (max-width: 480px) {\n [data-review-actions] button { flex: 1 1 auto; min-height: 40px; }\n}\n\n/* iOS 16px field floor: the magnifier fires below this on a focused field. */\n@media (max-width: 1023px) and (pointer: coarse) {\n html[data-mobile-nav-ios] [data-review-root] input,\n html[data-mobile-nav-ios] [data-review-root] select { font-size: 16px !important; }\n}\n";
|
|
11
11
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/client/review/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/client/review/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,6jOAoHtB,CAAA"}
|
package/package.json
CHANGED
|
@@ -102,7 +102,16 @@ export const REVIEW_CSS = `
|
|
|
102
102
|
and a wrapped one reads as a third column. */
|
|
103
103
|
[data-review-row] { flex-direction: column; align-items: stretch; gap: 8px; }
|
|
104
104
|
[data-review-row-text] { padding-right: 0; }
|
|
105
|
-
|
|
105
|
+
/* Every field takes the full row width, with or without a Save button: the
|
|
106
|
+
button stays on the same row and the input takes the rest. */
|
|
107
|
+
[data-review-control] { justify-content: flex-start; width: 100%; }
|
|
108
|
+
[data-review-control] input[type="text"], [data-review-control] input[type="password"], [data-review-control] select { flex: 1 1 auto; min-width: 0; width: 100%; }
|
|
109
|
+
[data-review-secret-group] { width: 100%; min-width: 0; }
|
|
110
|
+
/* A checkbox row does not stack: label and hint stay left, the box is held
|
|
111
|
+
right as a 44px tap target on the same line. Stacked, it left a lone 16px
|
|
112
|
+
box on a line of its own under the label. */
|
|
113
|
+
[data-review-row]:has(> [data-review-control] > input[type="checkbox"]:only-child) { flex-direction: row; align-items: center; gap: 12px; }
|
|
114
|
+
[data-review-row]:has(> [data-review-control] > input[type="checkbox"]:only-child) [data-review-control] { flex: none; width: auto; min-width: 44px; min-height: 44px; justify-content: center; }
|
|
106
115
|
}
|
|
107
116
|
|
|
108
117
|
@media (max-width: 480px) {
|