wings-plugin-sdk 0.4.0 → 0.6.0

package/ui-css.js

@@ -1,709 +0,0 @@
-// The wings-plugin-sdk/ui styles, for Wings versions whose plugin-ui.css doesn't have them yet. Wings' own copy
-// in plugin-ui.css wins whenever it's there, so a Wings update restyles every plugin. Keep both the same.
-
-/** The version of the classes this package renders. Wings' plugin-ui.css sets it as `--wings-ui`. */
-export const UI_VERSION = 2;
-
-export const fallbackCss = `/* wings-ui 2 start
-   The classes wings-plugin-sdk/ui renders, a public contract: the names and data attributes stay, and Wings may
-   restyle them. wings-plugin-sdk carries a copy of this block for older Wings without --wings-ui, so keep the
-   two the same (apps/desktop/src/lib/plugin-ui.test.ts checks). Bump --wings-ui when a class is added, and only add
-   rules: on an older Wings the SDK's copy loads before Wings' own, so a changed rule would lose to the old one. */
-
-/* Raised layers, like a list of suggestions or a menu, as Wings' own menus draw them. */
-:root {
-  --wings-menu-bg: rgb(32 29 35);
-  --wings-menu-ring: rgb(236 233 228 / 0.1);
-  --wings-menu-active: rgb(255 255 255 / 0.08);
-  --wings-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-/* The page's place: a sidebar, popover, view (modal, window or tab) or settings page. */
-.w-shell {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px;
-}
-.w-shell[data-place="popover"] {
-  gap: 12px;
-  padding: 12px 14px 14px;
-}
-.w-shell[data-place="settings"] {
-  gap: 12px;
-}
-/* A page that lays itself out edge to edge, like a canvas, fills the frame and scrolls on its own. */
-.w-shell[data-fill] {
-  height: 100vh;
-  gap: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-/* Layout. */
-.w-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-.w-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 0;
-}
-:is(ul, ol):is(.w-row, .w-stack, .w-card) {
-  margin: 0;
-  list-style: none;
-}
-:is(ul, ol):is(.w-row, .w-stack) {
-  padding: 0;
-}
-:is(.w-row, .w-stack)[data-gap="none"] {
-  gap: 0;
-}
-:is(.w-row, .w-stack)[data-gap="xs"] {
-  gap: 2px;
-}
-:is(.w-row, .w-stack)[data-gap="s"] {
-  gap: 4px;
-}
-:is(.w-row, .w-stack)[data-gap="l"] {
-  gap: 12px;
-}
-.w-row[data-align="start"] {
-  align-items: flex-start;
-}
-.w-row[data-align="baseline"] {
-  align-items: baseline;
-}
-.w-row[data-justify="end"] {
-  justify-content: flex-end;
-}
-.w-row[data-justify="between"] {
-  justify-content: space-between;
-}
-.w-row[data-wrap] {
-  flex-wrap: wrap;
-}
-:is(.w-row, .w-stack, .w-text)[data-grow] {
-  flex: 1;
-  min-width: 0;
-}
-
-/* Text. */
-.w-text[data-tone="muted"] {
-  color: var(--wings-muted);
-}
-.w-text[data-tone="info"] {
-  color: var(--wings-info);
-}
-.w-text[data-tone="success"] {
-  color: var(--wings-success);
-}
-.w-text[data-tone="warn"] {
-  color: var(--wings-warning);
-}
-.w-text[data-tone="danger"] {
-  color: var(--wings-danger);
-}
-.w-text[data-size="small"] {
-  font-size: 12px;
-}
-.w-text[data-size="tiny"] {
-  font-size: 11px;
-}
-.w-text[data-weight="medium"] {
-  font-weight: 500;
-}
-.w-text[data-weight="strong"] {
-  font-weight: 600;
-}
-.w-text[data-mono] {
-  font-family: var(--wings-mono);
-}
-.w-text[data-numeric] {
-  font-variant-numeric: tabular-nums;
-}
-.w-text[data-truncate] {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.w-text[data-clamp] {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-:is(.w-row, .w-list-item, .w-list-button) > .w-text[data-truncate] {
-  min-width: 0;
-}
-
-/* A page's or a card's title. */
-.w-title {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-.w-title[data-size="large"] {
-  font-size: 15px;
-}
-/* A title cut to one line with an ellipsis, like Text truncate. */
-.w-title[data-truncate] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-:is(.w-row, .w-list-item, .w-list-button) > .w-title[data-truncate] {
-  min-width: 0;
-}
-
-/* A section heading, with its controls on the right. */
-.w-heading {
-  margin-top: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--wings-muted);
-}
-.w-heading-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-.w-heading-row > .w-heading {
-  flex: 1;
-  min-width: 0;
-}
-
-/* A card, and the quieter one for a summary line. */
-.w-card {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-width: 0;
-  padding: 10px 12px;
-  border: 1px solid var(--wings-hairline);
-  border-radius: var(--wings-radius);
-  background: var(--wings-surface);
-}
-.w-card[data-size="compact"] {
-  gap: 6px;
-  padding: 8px 10px;
-  font-size: 12px;
-}
-
-/* A labelled bar, and the bar on its own. --w-value is how full it is. */
-.w-gauge {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 4px 8px;
-  font-size: 12px;
-}
-.w-gauge-value {
-  font-variant-numeric: tabular-nums;
-  font-weight: 500;
-}
-.w-gauge-note {
-  grid-column: 1 / -1;
-  color: var(--wings-muted);
-}
-.w-meter {
-  grid-column: 1 / -1;
-  height: 4px;
-  border-radius: 2px;
-  background: var(--wings-hairline-strong);
-  overflow: hidden;
-}
-.w-meter-fill {
-  display: block;
-  width: var(--w-value, 0%);
-  height: 100%;
-  border-radius: 2px;
-  background: var(--wings-info);
-}
-.w-meter[data-tone="warn"] > .w-meter-fill {
-  background: var(--wings-warning);
-}
-.w-meter[data-tone="danger"] > .w-meter-fill {
-  background: var(--wings-danger);
-}
-
-/* A row of small figures, label over value. */
-.w-stats {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, 1fr);
-  gap: 8px;
-  margin: 0;
-  padding: 10px 12px;
-  border: 1px solid var(--wings-hairline);
-  border-radius: var(--wings-radius);
-  background: var(--wings-surface);
-}
-.w-stat-label {
-  font-size: 11px;
-  color: var(--wings-muted);
-}
-.w-stat-value {
-  margin: 2px 0 0;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.w-stat-value[data-tone="warn"] {
-  color: var(--wings-warning);
-}
-.w-stat-value[data-tone="danger"] {
-  color: var(--wings-danger);
-}
-
-/* Label and value pairs, like a work item's fields. */
-.w-props {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin: 0;
-}
-.w-prop {
-  display: grid;
-  grid-template-columns: 92px minmax(0, 1fr);
-  gap: 8px;
-  align-items: start;
-  font-size: 12px;
-  line-height: 22px;
-}
-.w-prop-label {
-  color: var(--wings-muted);
-}
-.w-prop-value {
-  min-width: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-/* Lists: rows that light up under the pointer, or rows that are a button. */
-.w-list {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  font-size: 12px;
-}
-.w-list-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  padding: 4px 6px;
-  border-radius: 6px;
-}
-.w-list[data-density="compact"] > .w-list-item {
-  padding: 0 6px;
-}
-.w-list-item[data-align="start"] {
-  align-items: flex-start;
-}
-.w-list-item:hover {
-  background: var(--wings-hover);
-}
-.w-list-item:has(> .w-list-button) {
-  display: block;
-  padding: 0;
-}
-.w-list-item:has(> .w-list-button):hover {
-  background: none;
-}
-.w-list-button {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-  height: auto;
-  padding: 5px 6px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  font-size: inherit;
-  font-weight: inherit;
-  text-align: left;
-}
-.w-list-button[data-align="baseline"] {
-  align-items: baseline;
-}
-.w-list-button:hover {
-  background: var(--wings-hover);
-}
-.w-list-button:active {
-  transform: none;
-}
-
-/* Status: a dot, a spinner, a filled pill and an outlined tag. */
-.w-dot {
-  flex: none;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--wings-success);
-}
-.w-dot[data-tone="muted"] {
-  background: var(--wings-muted);
-}
-.w-dot[data-tone="info"] {
-  background: var(--wings-info);
-}
-.w-dot[data-tone="warn"] {
-  background: var(--wings-warning);
-}
-.w-dot[data-tone="danger"] {
-  background: var(--wings-danger);
-}
-/* A colour from the plugin's data, like a work item type's, in --w-color. */
-.w-dot[data-color] {
-  background: var(--w-color);
-}
-.w-spinner {
-  flex: none;
-  width: 10px;
-  height: 10px;
-  border: 2px solid var(--wings-hairline-strong);
-  border-top-color: var(--wings-fg);
-  border-radius: 50%;
-  animation: w-spin 0.8s linear infinite;
-}
-.w-spinner[data-size="large"] {
-  width: 14px;
-  height: 14px;
-}
-@keyframes w-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.w-pill {
-  flex: none;
-  padding: 0 6px;
-  border-radius: 999px;
-  background: var(--wings-hover);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 18px;
-  white-space: nowrap;
-}
-.w-pill[data-tone="info"] {
-  color: var(--wings-info);
-  background: color-mix(in srgb, var(--wings-info) 14%, transparent);
-}
-.w-pill[data-tone="success"] {
-  color: var(--wings-success);
-  background: color-mix(in srgb, var(--wings-success) 14%, transparent);
-}
-.w-pill[data-tone="warn"] {
-  color: var(--wings-warning);
-  background: color-mix(in srgb, var(--wings-warning) 14%, transparent);
-}
-.w-pill[data-tone="danger"] {
-  color: var(--wings-danger);
-  background: color-mix(in srgb, var(--wings-danger) 14%, transparent);
-}
-.w-tag {
-  flex: none;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 5px;
-  border: 1px solid var(--wings-hairline-strong);
-  border-radius: 5px;
-  font-size: 10.5px;
-  line-height: 15px;
-  color: var(--wings-muted);
-}
-.w-tag[data-tone="info"] {
-  border-color: color-mix(in srgb, var(--wings-info) 45%, transparent);
-  color: var(--wings-info);
-}
-.w-tag[data-tone="success"] {
-  border-color: color-mix(in srgb, var(--wings-success) 45%, transparent);
-  color: var(--wings-success);
-}
-.w-tag[data-tone="warn"] {
-  border-color: color-mix(in srgb, var(--wings-warning) 45%, transparent);
-  color: var(--wings-warning);
-}
-.w-tag[data-tone="danger"] {
-  border-color: color-mix(in srgb, var(--wings-danger) 45%, transparent);
-  color: var(--wings-danger);
-}
-
-/* Nothing to show yet, or nothing at all. */
-.w-loading {
-  color: var(--wings-muted);
-}
-.w-empty {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 24px 4px;
-  text-align: center;
-}
-.w-empty-detail {
-  color: var(--wings-muted);
-}
-
-/* Buttons. Plain buttons already look like Wings; these add the variants and sizes. */
-.w-button[data-variant="primary"] {
-  border-color: transparent;
-  background: var(--wings-primary);
-  color: var(--wings-primary-fg);
-}
-.w-button[data-variant="primary"]:hover {
-  background: color-mix(in srgb, var(--wings-primary) 85%, transparent);
-}
-.w-button[data-variant="danger"] {
-  border-color: transparent;
-  background: color-mix(in srgb, var(--wings-danger) 85%, transparent);
-  color: #1b0f0d;
-}
-.w-button[data-variant="ghost"] {
-  border-color: transparent;
-  background: transparent;
-}
-.w-button[data-variant="ghost"]:hover {
-  background: var(--wings-hover);
-}
-/* Busy: it keeps focus, unlike a disabled button, and looks like one. */
-.w-button[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: default;
-}
-.w-button[aria-disabled="true"]:active {
-  transform: none;
-}
-.w-button[data-size="small"] {
-  height: 24px;
-  padding: 0 8px;
-  font-size: 12px;
-}
-/* A busy button's spinner takes the button's text colour, so it shows on primary, danger, ghost and default alike. */
-.w-button .w-spinner {
-  border-color: color-mix(in srgb, currentColor 25%, transparent);
-  border-top-color: currentColor;
-}
-
-/* Chips: small quiet buttons, and a group of them that filters what shows. */
-.w-chips {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  min-width: 0;
-}
-.w-chip {
-  height: 22px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  font-size: 11px;
-  color: var(--wings-muted);
-}
-.w-chip:hover,
-.w-chip[aria-pressed="true"] {
-  background: var(--wings-pressed);
-}
-.w-chip[aria-pressed="true"] {
-  color: var(--wings-fg);
-}
-
-/* Tabs over a panel. */
-.w-tabs {
-  display: flex;
-  gap: 2px;
-  border-bottom: 1px solid var(--wings-hairline);
-}
-.w-tab {
-  height: 28px;
-  padding: 0 10px;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
-  background: none;
-  font-size: 12px;
-  color: var(--wings-muted);
-}
-.w-tab:hover {
-  background: none;
-  color: var(--wings-fg);
-}
-.w-tab:active {
-  transform: none;
-}
-.w-tab[aria-selected="true"] {
-  border-bottom-color: var(--wings-fg);
-  color: var(--wings-fg);
-}
-
-/* Form fields. Inputs, selects and text areas already look like Wings. */
-.w-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.w-field-label {
-  font-size: 12px;
-  font-weight: 500;
-}
-.w-field[data-layout="inline"] > .w-field-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-.w-field-row > .w-field-label {
-  flex: none;
-}
-.w-field-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.w-field-group > legend {
-  margin-bottom: 4px;
-  padding: 0;
-}
-.w-field-hint {
-  font-size: 12px;
-  color: var(--wings-muted);
-}
-.w-field-hint[data-tone="danger"] {
-  color: var(--wings-danger);
-}
-.w-check {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  font-size: 12px;
-  cursor: pointer;
-}
-.w-check > input {
-  flex: none;
-  width: auto;
-  height: auto;
-  margin: 0;
-}
-
-/* A field with suggestions under it, and a menu under a button: raised lists of options. */
-.w-combobox,
-.w-menu-root {
-  position: relative;
-  min-width: 0;
-}
-.w-menu-root {
-  display: inline-block;
-}
-.w-listbox,
-.w-menu {
-  position: absolute;
-  z-index: 10;
-  top: calc(100% + 4px);
-  left: 0;
-  max-height: 240px;
-  margin: 0;
-  padding: 4px;
-  overflow: auto;
-  list-style: none;
-  border-radius: var(--wings-radius);
-  background: var(--wings-menu-bg);
-  box-shadow:
-    0 0 0 1px var(--wings-menu-ring),
-    var(--wings-shadow);
-}
-.w-listbox {
-  right: 0;
-}
-.w-listbox > ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.w-menu {
-  min-width: 100%;
-  width: max-content;
-}
-.w-menu[data-align="end"] {
-  left: auto;
-  right: 0;
-}
-.w-listbox[hidden],
-.w-menu[hidden] {
-  display: none;
-}
-.w-option,
-.w-menu-item {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 4px 6px;
-  border-radius: 8px;
-  cursor: default;
-}
-.w-option[aria-selected="true"],
-.w-menu-item:focus {
-  background: var(--wings-menu-active);
-}
-/* Like Wings' own menus, the highlight shows where focus is. */
-.w-menu-item:focus-visible {
-  outline: none;
-}
-.w-menu-item[data-tone="danger"] {
-  color: var(--wings-danger);
-}
-.w-option-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.w-option-detail {
-  flex: none;
-  max-width: 45%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  color: var(--wings-muted);
-}
-.w-option-empty {
-  padding: 4px 6px;
-  color: var(--wings-muted);
-}
-
-/* More behind a summary line. */
-.w-disclosure > summary {
-  padding: 4px 6px;
-  font-size: 12px;
-  color: var(--wings-muted);
-  cursor: pointer;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .w-spinner {
-    animation: none;
-  }
-}
-/* wings-ui 2 end */
-`;