@flowdular/sdk 0.2.4 → 0.3.0

package/packages/ui/src/styles/components.css

@@ -2,6 +2,21 @@
    classes and the components in @flowdular/sdk/ui; module CSS should only
    add module-specific layout, never restyle primitives. */
 
+/* Text a screen reader must read and the page must not show: the description
+   of a refused action, for one. Clipped rather than hidden, because
+   display:none and visibility:hidden are read by nobody. */
+.ui-visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+
 /* Icon sizing is controlled by the Icon component via width/height. */
 .ui-icon {
 	flex: 0 0 auto;
@@ -237,6 +252,376 @@
 	color: var(--danger);
 }
 
+/* Date fields. The native control keeps the ISO value; the reading beside it
+   is the same instant in the reader's locale, since the browser picks the
+   format inside the control and no page can change it. */
+.ui-datefield {
+	display: flex;
+	min-width: 0;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 6px 10px;
+}
+
+/* The native control never shrinks below its own readable width: in a
+   two-column row inside a drawer the reading moves under it instead. */
+.ui-datefield > .ui-input {
+	width: auto;
+	min-width: min(100%, 190px);
+	flex: 1 1 auto;
+}
+
+.ui-datefield__reading {
+	display: inline-flex;
+	min-width: 0;
+	flex: 0 1 auto;
+	align-items: center;
+	gap: 6px;
+	overflow: hidden;
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+	white-space: nowrap;
+}
+
+.ui-datefield__reading .ui-icon {
+	color: var(--ink-4);
+}
+
+.ui-daterange {
+	display: grid;
+	min-width: 0;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+/* The group name sits above two labelled fields, so it takes the uppercase
+   label scale to stay above them in the hierarchy. */
+.ui-daterange > legend {
+	padding: 0;
+	font-size: var(--text-xs);
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--ink-3);
+}
+
+.ui-daterange__row {
+	display: grid;
+	min-width: 0;
+	gap: 12px;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+/* The calendar picker. The native inputs keep the ISO value; the popover holds
+   the presets and one month grid for both ends of a range. */
+.ui-datepicker {
+	position: relative;
+}
+
+.ui-datepicker__row {
+	display: flex;
+	min-width: 0;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: 8px;
+}
+
+.ui-datepicker__row > .ui-datefield {
+	min-width: 0;
+	flex: 1 1 190px;
+}
+
+.ui-datepicker__trigger {
+	display: inline-flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	width: var(--control-h);
+	height: var(--control-h);
+	color: var(--ink-2);
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r);
+	transition: border-color var(--t-fast) var(--ease);
+}
+
+.ui-datepicker__trigger:hover:not(:disabled) {
+	color: var(--ink);
+	border-color: var(--ink-4);
+}
+
+.ui-datepicker__trigger[aria-expanded='true'] {
+	color: var(--primary);
+	border-color: var(--primary);
+}
+
+.ui-datepicker__trigger:disabled {
+	color: var(--ink-4);
+	background: var(--surface-2);
+	cursor: not-allowed;
+}
+
+.ui-datepicker__scrim {
+	position: fixed;
+	inset: 0;
+	z-index: 30;
+}
+
+/* Placed against the viewport by the component: a drawer body is an overflow
+   box, and an absolutely placed popover inside one is clipped by it. */
+.ui-datepicker__popover {
+	position: fixed;
+	z-index: 31;
+	display: flex;
+	max-width: min(92vw, 460px);
+	max-height: min(460px, calc(100vh - 16px));
+	overflow: auto;
+	gap: 14px;
+	padding: 14px;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: var(--shadow-lg);
+	animation: ui-datepicker-in var(--t-fast) var(--ease);
+}
+
+.ui-datepicker__presets {
+	display: grid;
+	align-content: start;
+	min-width: 120px;
+	gap: 2px;
+	padding-right: 14px;
+	border-right: 1px solid var(--line-2);
+}
+
+.ui-datepicker__preset {
+	padding: 6px 10px;
+	font-size: var(--text-sm);
+	color: var(--ink-2);
+	text-align: left;
+	background: none;
+	border: 0;
+	border-radius: var(--r-sm);
+}
+
+.ui-datepicker__preset:hover {
+	color: var(--ink);
+	background: var(--surface-2);
+}
+
+.ui-datepicker__preset[aria-pressed='true'] {
+	font-weight: 500;
+	color: var(--primary);
+	background: var(--primary-tint);
+}
+
+.ui-datepicker__calendar {
+	display: grid;
+	gap: 8px;
+}
+
+.ui-datepicker__head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.ui-datepicker__month {
+	font-size: var(--text-md);
+}
+
+.ui-datepicker__step {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	color: var(--ink-2);
+	background: none;
+	border: 0;
+	border-radius: var(--r-sm);
+}
+
+.ui-datepicker__step:hover {
+	color: var(--ink);
+	background: var(--surface-2);
+}
+
+.ui-datepicker__grid {
+	border-collapse: collapse;
+}
+
+.ui-datepicker__grid th {
+	padding-bottom: 4px;
+	font-size: var(--text-xs);
+	font-weight: 500;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--ink-4);
+}
+
+.ui-datepicker__grid td {
+	padding: 1px;
+}
+
+.ui-datepicker__day {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	font-size: var(--text-sm);
+	font-variant-numeric: tabular-nums;
+	color: var(--ink);
+	background: none;
+	border: 0;
+	border-radius: var(--r-sm);
+}
+
+.ui-datepicker__day:hover:not(:disabled) {
+	background: var(--surface-2);
+}
+
+.ui-datepicker__day--outside {
+	color: var(--ink-4);
+}
+
+.ui-datepicker__day[aria-current='date'] {
+	box-shadow: inset 0 0 0 1px var(--primary);
+}
+
+/* The band between the two ends squares off, so a range reads as one run. */
+.ui-datepicker__day--between {
+	background: var(--primary-tint);
+	border-radius: 0;
+}
+
+.ui-datepicker__day--on {
+	color: var(--ink-0);
+	background: var(--primary);
+}
+
+.ui-datepicker__day:disabled {
+	cursor: not-allowed;
+	opacity: 0.4;
+}
+
+@keyframes ui-datepicker-in {
+	from {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ui-datepicker__popover {
+		animation: none;
+	}
+}
+
+@media (max-width: 560px) {
+	.ui-datepicker__popover {
+		flex-direction: column;
+	}
+
+	.ui-datepicker__presets {
+		padding-right: 0;
+		padding-bottom: 10px;
+		border-right: 0;
+		border-bottom: 1px solid var(--line-2);
+	}
+}
+
+/* The file control. The native input stays the focus stop, so the picker opens
+   from the keyboard without a button of our own. */
+.ui-fileupload__control {
+	display: flex;
+	min-width: 0;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+
+.ui-fileupload__input {
+	width: auto;
+	min-width: min(100%, 220px);
+	flex: 1 1 auto;
+	padding: 5px 10px;
+}
+
+.ui-fileupload__input::file-selector-button {
+	margin-right: 10px;
+	padding: 3px 10px;
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--ink-2);
+	background: var(--surface-2);
+	border: 1px solid var(--line);
+	border-radius: var(--r-sm);
+	cursor: pointer;
+}
+
+.ui-fileupload__input::file-selector-button:hover {
+	color: var(--ink);
+	border-color: var(--ink-4);
+}
+
+.ui-fileupload__clear {
+	flex: 0 0 auto;
+	height: var(--button-h);
+	padding: 0 10px;
+	font-size: var(--text-sm);
+	color: var(--ink-2);
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r);
+}
+
+.ui-fileupload__clear:hover:not(:disabled) {
+	color: var(--ink);
+	border-color: var(--ink-4);
+}
+
+/* Tabs: one row of sections inside a view. The active tab carries the only
+   accent, so a tablist never competes with the page actions. */
+.ui-tabs {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	border-bottom: 1px solid var(--line-2);
+}
+
+.ui-tabs__tab {
+	height: var(--control-h);
+	padding: 0 12px;
+	font-size: var(--text-md);
+	font-weight: 500;
+	color: var(--ink-3);
+	background: none;
+	border: 0;
+	border-bottom: 2px solid transparent;
+	transition:
+		color var(--t-fast) var(--ease),
+		border-color var(--t-fast) var(--ease);
+}
+
+.ui-tabs__tab:hover:not(:disabled) {
+	color: var(--ink);
+}
+
+.ui-tabs__tab--on {
+	color: var(--primary);
+	border-bottom-color: var(--primary);
+}
+
+.ui-tabs__tab:disabled {
+	color: var(--ink-4);
+	cursor: not-allowed;
+}
+
 .ui-checkbox {
 	display: flex;
 	align-items: center;
@@ -884,6 +1269,56 @@
 	gap: 6px;
 }
 
+/* Carries the title of a refused action: a disabled button fires no pointer
+   events of its own, so the tooltip has to hang on something around it. */
+.ui-table-action {
+	display: inline-flex;
+}
+
+/* Row selection: the leading checkbox column and the bulk bar that sits
+   above the table only while something is selected. */
+.ui-table th.ui-table__select,
+.ui-table td.ui-table__select {
+	padding: 0 4px 0 16px;
+	text-align: left;
+}
+
+.ui-table .ui-table__select input {
+	display: block;
+	width: 16px;
+	height: 16px;
+	margin: 0;
+	accent-color: var(--primary);
+	cursor: pointer;
+}
+
+.ui-table .ui-table__select input:disabled {
+	cursor: not-allowed;
+}
+
+.ui-table__bulk {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 16px;
+	background: var(--primary-tint);
+	border-bottom: 1px solid var(--line-2);
+}
+
+.ui-table__bulk-count {
+	flex: 1 1 auto;
+	min-width: 0;
+	font-size: var(--text-sm);
+	font-weight: 500;
+	font-variant-numeric: tabular-nums;
+	color: var(--ink-2);
+}
+
+.ui-table__bulk .ui-table-action-buttons {
+	justify-content: flex-start;
+}
+
 .ui-table__state {
 	display: inline-flex;
 	align-items: center;
@@ -917,6 +1352,81 @@
 	padding: 40px 16px;
 }
 
+/* Sortable header. The button fills the cell so the whole header is the
+   target, and inherits the head type so sorting changes nothing but the
+   indicator. The cell hands its inset to the button for that reason. */
+.ui-table th:has(> .ui-table__sort) {
+	padding: 0;
+}
+
+.ui-table th > .ui-table__sort {
+	display: inline-flex;
+	width: 100%;
+	height: 100%;
+	align-items: center;
+	gap: 6px;
+	margin: 0;
+	padding: 0 16px;
+	font: inherit;
+	letter-spacing: inherit;
+	text-transform: inherit;
+	color: inherit;
+	background: none;
+	border: 0;
+}
+
+.ui-table th > .ui-table__sort:hover {
+	color: var(--ink-2);
+}
+
+.ui-table th.num > .ui-table__sort {
+	flex-direction: row-reverse;
+}
+
+.ui-table__sort-icon {
+	display: inline-flex;
+	color: var(--ink-4);
+	transition: transform var(--t-fast) var(--ease);
+}
+
+.ui-table__sort-icon--on {
+	color: var(--primary);
+}
+
+.ui-table__sort-icon--asc {
+	transform: rotate(180deg);
+}
+
+/* Pager under a table, inside the card. */
+.ui-pagination {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 16px;
+	border-top: 1px solid var(--line-2);
+}
+
+.ui-pagination__summary {
+	flex: 1 1 auto;
+	min-width: 0;
+	font-size: var(--text-sm);
+	font-variant-numeric: tabular-nums;
+	color: var(--ink-3);
+}
+
+.ui-pagination__size {
+	width: auto;
+	height: var(--button-h);
+	flex: 0 0 auto;
+}
+
+.ui-pagination__pages {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
 .ui-cell {
 	display: grid;
 	gap: 1px;
@@ -1857,3 +2367,91 @@
 	font-size: var(--text-sm);
 	color: var(--ink-3);
 }
+
+/* Toasts: transient confirmations above every surface, including a drawer and
+   a dialog. The region keeps its place while empty and takes no pointer, so
+   only a live toast is clickable. The reduced-motion rule in base.css already
+   neutralises the entry animation. */
+.ui-toasts {
+	position: fixed;
+	right: 16px;
+	bottom: 16px;
+	z-index: 80;
+	display: grid;
+	width: min(380px, calc(100vw - 32px));
+	gap: 8px;
+	justify-items: stretch;
+	pointer-events: none;
+}
+
+.ui-toast {
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 12px 12px 12px 14px;
+	font-size: var(--text-md);
+	color: var(--ink);
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-left: 3px solid var(--ink-4);
+	border-radius: var(--r-md);
+	box-shadow: var(--shadow-md);
+	pointer-events: auto;
+	animation: ui-toast-in var(--t-base) var(--ease);
+}
+
+.ui-toast--success {
+	border-left-color: var(--success);
+}
+
+.ui-toast--success > .ui-icon {
+	color: var(--success);
+}
+
+.ui-toast--error {
+	border-left-color: var(--danger);
+}
+
+.ui-toast--error > .ui-icon {
+	color: var(--danger);
+}
+
+.ui-toast--info {
+	border-left-color: var(--primary);
+}
+
+.ui-toast--info > .ui-icon {
+	color: var(--primary);
+}
+
+.ui-toast__message {
+	flex: 1 1 auto;
+	min-width: 0;
+	line-height: 1.45;
+}
+
+.ui-toast__close {
+	display: inline-flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	color: var(--ink-4);
+	background: none;
+	border: 0;
+	border-radius: var(--r-sm);
+}
+
+.ui-toast__close:hover {
+	color: var(--ink-2);
+	background: var(--surface-2);
+}
+
+@keyframes ui-toast-in {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+}

package/modules/automations-workflows-integration/module.json

@@ -1,27 +0,0 @@
-{
-	"$schema": "../../packages/contracts/schemas/module.schema.json",
-	"schemaVersion": 1,
-	"id": "automations-workflows.integration",
-	"package": "@flowdular/module-automations-workflows-integration",
-	"version": "0.1.0",
-	"profile": "integration",
-	"capabilities": ["integration"],
-	"platform": {
-		"server": true,
-		"client": false
-	},
-	"dependencies": [
-		{
-			"id": "automations.core",
-			"range": "0.4.0"
-		},
-		{
-			"id": "workflows.core",
-			"range": "0.3.0"
-		}
-	],
-	"tenancy": "required",
-	"locales": ["en", "pl"],
-	"stability": "experimental",
-	"platformApi": "0.1.0"
-}