@navette-js/panels 0.0.0-stage → 1.0.0-beta.2

package/resources/filament/packages/forms/resources/css/components/rich-editor.css

@@ -0,0 +1,666 @@
+.fi-fo-rich-editor {
+    --rich-editor-toolbar-height: 0px;
+    --rich-editor-sticky-offset: 0px;
+
+    .fi-topbar-ctn ~ * & {
+        --rich-editor-sticky-offset: var(--topbar-height, 4rem);
+    }
+
+    .fi-modal & {
+        /* Resolve the measured header height inside the editor's `wire:ignore` element. */
+        --rich-editor-sticky-offset: initial;
+    }
+
+    & .fi-fo-rich-editor-toolbar.fi-fo-rich-editor-sticky-toolbar {
+        @apply sticky z-5 rounded-t-lg bg-white dark:bg-gray-900;
+        top: var(
+            --rich-editor-sticky-offset,
+            var(--rich-editor-modal-header-height, 0px)
+        );
+    }
+
+    & .fi-fo-rich-editor-uploading-file {
+        @apply pointer-events-none cursor-wait opacity-50;
+    }
+
+    & .fi-fo-rich-editor-toolbar {
+        @apply relative flex flex-wrap gap-x-3 gap-y-1 border-b border-gray-200 px-2.5 py-2 dark:border-white/10;
+    }
+
+    & .fi-fo-rich-editor-floating-toolbar {
+        @apply invisible absolute z-5 -mt-1 flex max-w-full flex-wrap gap-x-3 gap-y-1 rounded-lg border border-gray-300 bg-white p-1 shadow dark:border-gray-600 dark:bg-gray-800;
+    }
+
+    & .fi-fo-rich-editor-toolbar,
+    & .fi-fo-rich-editor-floating-toolbar {
+        &:has(.fi-fo-rich-editor-dropdown-tool-trigger[aria-expanded='true']) {
+            @apply z-20;
+        }
+    }
+
+    & .fi-fo-rich-editor-toolbar-group {
+        @apply flex gap-x-1;
+    }
+
+    & .fi-fo-rich-editor-dropdown-tool {
+        @apply relative inline-flex;
+
+        &:not(.fi-fo-rich-editor-dropdown-tool-textual) {
+            & .fi-fo-rich-editor-dropdown-tool-panel {
+                @apply divide-y-0;
+            }
+        }
+    }
+
+    & .fi-fo-rich-editor-dropdown-tool-trigger {
+        @apply flex h-8 cursor-pointer items-center justify-center gap-0.5 rounded-lg border-none bg-transparent px-1 text-sm font-semibold text-gray-700 transition duration-75 outline-none hover:bg-gray-50 focus-visible:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+        &.fi-active {
+            @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
+        }
+    }
+
+    & .fi-fo-rich-editor-dropdown-tool-chevron {
+        @apply h-3 w-3 text-gray-400 dark:text-gray-500;
+    }
+
+    & .fi-fo-rich-editor-dropdown-tool-panel {
+        @apply z-30 w-max max-w-none! rounded-lg border border-gray-300 bg-white p-1 shadow-lg ring-0 dark:border-gray-600 dark:bg-gray-800;
+    }
+
+    & .fi-fo-rich-editor-dropdown-tool-menu {
+        @apply flex gap-1;
+    }
+
+    & .fi-fo-rich-editor-dropdown-tool-option {
+        @apply flex h-8 w-auto min-w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 text-sm font-semibold text-gray-700 transition duration-75 outline-none hover:bg-gray-50 focus-visible:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+        & > .fi-icon {
+            @apply text-current;
+        }
+
+        &[aria-disabled='true'] {
+            @apply cursor-default opacity-70;
+        }
+
+        &.fi-active {
+            @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
+        }
+    }
+
+    & .fi-fo-rich-editor-dropdown-tool-textual {
+        & .fi-fo-rich-editor-dropdown-tool-menu {
+            @apply min-w-32 flex-col;
+        }
+
+        & .fi-fo-rich-editor-dropdown-tool-option {
+            @apply min-w-0 justify-start gap-2 px-2 py-1 text-[0.8125rem] font-normal whitespace-nowrap;
+
+            &.fi-active {
+                @apply text-primary-700 dark:text-primary-400;
+            }
+        }
+    }
+
+    & .fi-fo-rich-editor-tool {
+        @apply flex h-8 min-w-8 items-center justify-center rounded-lg text-sm font-semibold text-gray-700 transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+        &[disabled] {
+            @apply pointer-events-none cursor-default opacity-70;
+        }
+
+        &.fi-active {
+            @apply text-primary-600 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
+        }
+
+        &.fi-fo-rich-editor-tool-with-label {
+            @apply items-center gap-x-1 px-1.5;
+        }
+    }
+
+    & .fi-fo-rich-editor-tool,
+    & .fi-fo-rich-editor-dropdown-tool-trigger,
+    & .fi-fo-rich-editor-dropdown-tool-option {
+        &:focus-visible {
+            @apply outline-primary-600 dark:outline-primary-400 outline-2 outline-offset-1 outline-solid;
+        }
+    }
+
+    & .fi-fo-rich-editor-uploading-file-message {
+        @apply flex items-center gap-x-3 border-b border-gray-200 bg-gray-50 px-5 py-1.5 text-sm leading-6 font-medium text-gray-700 dark:border-white/10 dark:bg-white/5 dark:text-gray-200;
+
+        & .fi-loading-indicator {
+            @apply text-gray-400 dark:text-gray-500;
+        }
+    }
+
+    & .fi-fo-rich-editor-file-validation-message {
+        @apply border-danger-200 bg-danger-50 text-danger-700 dark:text-danger-200 flex items-center gap-x-3 border-b px-5 py-1.5 text-sm leading-6 font-medium dark:border-white/10 dark:bg-white/5;
+    }
+
+    & .fi-fo-rich-editor-main {
+        @apply flex flex-col-reverse;
+    }
+
+    & .fi-fo-rich-editor-content {
+        @apply relative flex min-h-12 w-full flex-1 flex-col px-5 py-3;
+    }
+
+    &[style*='--min-height'] .fi-fo-rich-editor-content {
+        min-height: var(--min-height);
+    }
+
+    &[style*='--max-height'] .fi-fo-rich-editor-content {
+        @apply overflow-y-auto;
+        scrollbar-gutter: stable;
+        max-height: var(--max-height);
+    }
+
+    &[style*='--max-height'] .fi-fo-rich-editor-content[role='region'] {
+        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 outline-none focus-visible:ring-2 focus-visible:ring-inset;
+    }
+
+    & span[data-type='mergeTag'] {
+        @apply my-0 inline-block whitespace-nowrap;
+
+        &::before {
+            @apply me-1 font-normal opacity-60;
+            content: '{{';
+        }
+
+        &::after {
+            @apply ms-1 font-normal opacity-60;
+            content: '}}';
+        }
+    }
+
+    & span[data-type='mention'] {
+        @apply bg-primary-50 text-primary-700 dark:bg-primary-400/10 dark:text-primary-400 my-0 inline-block rounded px-1 font-medium whitespace-nowrap;
+    }
+
+    & .fi-fo-rich-editor-panels {
+        @apply w-full overflow-clip border-b border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-gray-900/30;
+    }
+
+    & .fi-fo-rich-editor-panel-header {
+        @apply flex items-start gap-3 px-4 py-3;
+    }
+
+    & .fi-fo-rich-editor-panel-heading {
+        @apply flex-1 text-sm font-semibold text-gray-950 dark:text-white;
+    }
+
+    & .fi-fo-rich-editor-panel-close-btn-ctn {
+        @apply shrink-0;
+    }
+
+    & .fi-fo-rich-editor-panel {
+        @apply grid grid-cols-1 divide-y divide-gray-200 dark:divide-white/10;
+
+        &:has(.fi-fo-rich-editor-custom-blocks-ctn) {
+            @apply -mb-px;
+        }
+    }
+
+    & .fi-fo-rich-editor-merge-tags-list {
+        @apply flex flex-wrap gap-2 px-4 py-3;
+    }
+
+    & .fi-fo-rich-editor-merge-tag-btn {
+        @apply cursor-move rounded-lg bg-white p-1 text-start text-sm text-gray-600 ring-1 ring-gray-600/10 dark:bg-gray-400/10 dark:text-gray-200 dark:ring-gray-400/20;
+    }
+
+    & .fi-fo-rich-editor-custom-blocks-ctn {
+        @apply grid overflow-y-auto border-b border-gray-200 dark:border-white/10;
+    }
+
+    & .fi-fo-rich-editor-custom-blocks-group-header {
+        @apply sticky -top-px z-1 border-b border-gray-200 bg-gray-50 px-4 py-2 text-sm font-semibold text-gray-950 dark:border-white/10 dark:bg-gray-800 dark:text-white;
+
+        &:not(:first-child) {
+            @apply border-t;
+        }
+    }
+
+    & .fi-fo-rich-editor-custom-blocks-list {
+        @apply flex flex-wrap gap-2 px-4 py-3;
+    }
+
+    &:has(.fi-fo-rich-editor-custom-blocks-group-header)
+        .fi-fo-rich-editor-custom-blocks-list {
+        @apply bg-white dark:bg-gray-900;
+    }
+
+    & .fi-fo-rich-editor-custom-block-btn {
+        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 flex cursor-move items-center gap-1.5 rounded-lg bg-white px-2 py-1 text-start text-sm text-gray-600 ring-1 ring-gray-600/10 focus-visible:ring-2 focus-visible:outline-none dark:bg-gray-400/10 dark:text-gray-200 dark:ring-gray-400/20;
+
+        & .fi-fo-rich-editor-custom-block-icon,
+        & .fi-loading-indicator {
+            @apply size-4 shrink-0;
+        }
+
+        & .fi-fo-rich-editor-custom-block-icon .fi-icon {
+            @apply size-full;
+        }
+    }
+
+    &
+        .fi-fo-rich-editor-custom-blocks-list.fi-fo-rich-editor-custom-blocks-grid {
+        @apply grid grid-cols-2;
+    }
+
+    &
+        .fi-fo-rich-editor-custom-blocks-grid
+        > .fi-fo-rich-editor-custom-block-btn {
+        @apply min-h-20 flex-col justify-center gap-2 p-3 text-center text-xs;
+
+        & .fi-fo-rich-editor-custom-block-icon,
+        & .fi-loading-indicator {
+            @apply size-6;
+        }
+    }
+
+    & .fi-fo-rich-editor-custom-blocks-search {
+        @apply flex items-center gap-2 px-4 focus-within:inset-shadow-[0_-2px_0_var(--color-primary-600)] dark:focus-within:inset-shadow-[0_-2px_0_var(--color-primary-500)];
+
+        & > .fi-icon {
+            @apply size-4 shrink-0 text-gray-400 dark:text-gray-500;
+        }
+    }
+
+    & .fi-fo-rich-editor-custom-blocks-search-input {
+        @apply block min-w-0 flex-1 border-0 bg-transparent px-0 py-2.5 text-base text-gray-950 outline-none placeholder:text-gray-500 focus:ring-0 sm:text-sm dark:text-white dark:placeholder:text-gray-400;
+    }
+
+    & .fi-fo-rich-editor-custom-blocks-no-results {
+        @apply px-4 py-3 text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    & .tiptap {
+        @apply h-full flex-1;
+
+        &:focus {
+            @apply outline-none;
+
+            & .ProseMirror-selectednode {
+                div&[data-type='customBlock'],
+                img& {
+                    @apply ring-primary-600 dark:ring-primary-500 ring-2;
+                }
+            }
+        }
+
+        & p.is-editor-empty:first-child {
+            &::before {
+                @apply pointer-events-none float-start h-0 text-gray-400;
+                content: attr(data-placeholder);
+            }
+
+            &::after {
+                /* Reserve placeholder space without moving the caret from the first line. */
+                @apply pointer-events-none invisible -mt-[1lh] block min-h-[1lh];
+                content: attr(data-placeholder);
+            }
+
+            @variant dark {
+                &::before {
+                    @apply text-gray-500;
+                }
+            }
+        }
+
+        & [data-type='details'] {
+            @apply my-6 flex gap-1 rounded-md border border-gray-950/20 p-4 dark:border-white/20;
+
+            & > div:first-of-type {
+                @apply !mt-0;
+            }
+
+            & summary {
+                @apply list-none font-medium;
+            }
+
+            & > button {
+                @apply me-2 mt-px flex size-5 items-center justify-center rounded-md bg-transparent p-1 text-xs leading-none hover:bg-gray-950/5 dark:hover:bg-white/5;
+
+                &::before {
+                    content: '\25B6';
+                }
+
+                @variant rtl {
+                    &::before {
+                        content: '\25C0';
+                    }
+                }
+            }
+
+            &.is-open > button::before {
+                content: '\25BC';
+            }
+
+            & > div {
+                @apply flex w-full flex-col gap-4;
+
+                & > [data-type='detailsContent'] {
+                    @apply !mt-0;
+
+                    & > :last-child {
+                        @apply mb-4;
+                    }
+                }
+            }
+        }
+
+        & table {
+            @apply m-0 w-full table-fixed border-collapse overflow-hidden first:mt-0;
+
+            & td,
+            & th {
+                @apply relative min-w-[1em] border border-gray-300 !p-2 align-top dark:border-gray-600;
+
+                & > * {
+                    @apply mb-0;
+                }
+            }
+
+            & th {
+                @apply bg-gray-100 text-start font-bold dark:bg-gray-800 dark:text-white;
+            }
+
+            & .selectedCell {
+                &::after {
+                    @apply pointer-events-none absolute start-0 end-0 top-0 bottom-0 z-2 bg-gray-200/80 content-[''];
+                }
+
+                @variant dark {
+                    &::after {
+                        @apply bg-gray-800/80;
+                    }
+                }
+            }
+
+            & .column-resize-handle {
+                @apply bg-primary-600 pointer-events-none absolute end-0 top-0 bottom-0 !m-0 w-1;
+            }
+        }
+
+        & .tableWrapper {
+            @apply overflow-x-auto;
+        }
+
+        & li > .tableWrapper:where(:not(.fi-not-prose, .fi-not-prose *)) {
+            @apply my-4 first:mt-0 last:mb-0;
+        }
+
+        &.resize-cursor {
+            @apply cursor-col-resize cursor-ew-resize;
+        }
+
+        & .grid-layout > .grid-layout-col {
+            @apply rounded-md border border-gray-950/20 p-4 dark:border-white/20;
+        }
+
+        [data-resize-handle] {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.8);
+            border-radius: 2px;
+            z-index: 1;
+
+            &:hover {
+                background: rgba(0, 0, 0, 0.8);
+            }
+
+            &[data-resize-handle] {
+                margin: 0 !important;
+            }
+            &[data-resize-handle='top-left'],
+            &[data-resize-handle='top-right'],
+            &[data-resize-handle='bottom-left'],
+            &[data-resize-handle='bottom-right'] {
+                width: 8px;
+                height: 8px;
+            }
+
+            &[data-resize-handle='top-left'] {
+                top: -4px;
+                left: -4px;
+                cursor: nwse-resize;
+            }
+
+            &[data-resize-handle='top-right'] {
+                top: -4px;
+                right: -4px;
+                cursor: nesw-resize;
+            }
+
+            &[data-resize-handle='bottom-left'] {
+                bottom: -4px;
+                left: -4px;
+                cursor: nesw-resize;
+            }
+
+            &[data-resize-handle='bottom-right'] {
+                bottom: -4px;
+                right: -4px;
+                cursor: nwse-resize;
+            }
+
+            &[data-resize-handle='top'],
+            &[data-resize-handle='bottom'] {
+                height: 6px;
+                left: 8px;
+                right: 8px;
+            }
+
+            &[data-resize-handle='top'] {
+                top: -3px;
+                cursor: ns-resize;
+            }
+
+            &[data-resize-handle='bottom'] {
+                bottom: -3px;
+                cursor: ns-resize;
+            }
+
+            &[data-resize-handle='left'],
+            &[data-resize-handle='right'] {
+                width: 6px;
+                top: 8px;
+                bottom: 8px;
+            }
+
+            &[data-resize-handle='left'] {
+                left: -3px;
+                cursor: ew-resize;
+            }
+
+            &[data-resize-handle='right'] {
+                right: -3px;
+                cursor: ew-resize;
+            }
+        }
+
+        [data-resize-state='true'] [data-resize-wrapper] {
+            @apply relative;
+            outline: 1px solid rgba(0, 0, 0, 0.25);
+            border-radius: 0.125rem;
+        }
+    }
+
+    &.fi-disabled {
+        [data-resize-handle] {
+            @apply hidden;
+        }
+
+        [data-resize-state='true'] [data-resize-wrapper] {
+            outline: none;
+        }
+    }
+
+    & .tiptap.ProseMirror {
+        /* https://defensivecss.dev/tip/input-zoom-safari */
+        @supports (-webkit-touch-callout: none) {
+            @apply text-base;
+        }
+    }
+
+    & img {
+        @apply inline-block;
+    }
+
+    & div[data-type='customBlock'] {
+        @apply grid divide-y divide-gray-200 overflow-hidden rounded-lg shadow-sm ring-1 ring-gray-950/10 dark:divide-white/10 dark:ring-white/20;
+    }
+
+    & .fi-fo-rich-editor-custom-block-header {
+        @apply flex items-start gap-3 bg-gray-50 px-4 py-3 dark:bg-gray-900/30;
+    }
+
+    & .fi-fo-rich-editor-custom-block-heading {
+        @apply flex-1 text-sm font-semibold text-gray-950 dark:text-white;
+    }
+
+    & .fi-fo-rich-editor-custom-block-edit-btn-ctn {
+        @apply shrink-0;
+    }
+
+    & .fi-fo-rich-editor-custom-block-delete-btn-ctn {
+        @apply shrink-0;
+    }
+
+    & .fi-fo-rich-editor-custom-block-preview {
+        @apply px-4 py-3;
+    }
+
+    & div[data-type='customBlock'].fi-fo-rich-editor-custom-block-minimal {
+        @apply relative grid-cols-1 divide-y-0 shadow-none ring-0;
+
+        &:has(> .fi-fo-rich-editor-custom-block-header .fi-icon-btn) {
+            @apply grid-cols-[minmax(0,1fr)_auto] gap-x-2;
+        }
+
+        & > .fi-fo-rich-editor-custom-block-header {
+            @apply col-start-2 row-start-1 flex-col gap-1 self-start border-0 bg-transparent p-0;
+
+            &:not(:has(.fi-icon-btn)) {
+                @apply sr-only;
+            }
+
+            & > .fi-fo-rich-editor-custom-block-heading {
+                @apply sr-only;
+            }
+
+            & > .fi-fo-rich-editor-custom-block-edit-btn-ctn,
+            & > .fi-fo-rich-editor-custom-block-delete-btn-ctn {
+                & > .fi-icon-btn {
+                    @apply m-0 size-8 focus-visible:bg-gray-50 focus-visible:ring-inset dark:focus-visible:bg-white/5;
+
+                    @media (hover: hover) {
+                        @apply hover:bg-gray-50 dark:hover:bg-white/5;
+                    }
+
+                    @media (pointer: coarse) {
+                        @apply size-11;
+                    }
+                }
+            }
+        }
+
+        & > .fi-fo-rich-editor-custom-block-preview {
+            @apply col-start-1 row-start-1 min-w-0 self-center border-0 p-0;
+        }
+    }
+
+    @supports (container-type: inline-size) {
+        @apply @container;
+
+        & .fi-fo-rich-editor-main {
+            @apply @2xl:flex-row;
+        }
+
+        & .fi-fo-rich-editor-panels {
+            @apply @2xl:max-w-3xs @2xl:rounded-ee-lg @2xl:border-s @2xl:border-b-0;
+        }
+
+        &
+            .fi-fo-rich-editor-panels.fi-fo-rich-editor-sticky-panels
+            > .fi-fo-rich-editor-panel {
+            @apply @2xl:sticky @2xl:overflow-y-auto;
+
+            & .fi-fo-rich-editor-custom-blocks-ctn {
+                @apply @2xl:overflow-visible;
+            }
+
+            @container (min-width: 42rem) {
+                top: calc(
+                    var(
+                            --rich-editor-sticky-offset,
+                            var(--rich-editor-modal-header-height, 0px)
+                        ) +
+                        var(--rich-editor-toolbar-height, 0px)
+                );
+                max-height: calc(
+                    var(--rich-editor-modal-viewport-height, 100dvh) -
+                        var(
+                            --rich-editor-sticky-offset,
+                            var(--rich-editor-modal-header-height, 0px)
+                        ) -
+                        var(--rich-editor-toolbar-height, 0px) -
+                        var(--rich-editor-modal-footer-height, 0px)
+                );
+            }
+        }
+    }
+
+    @supports not (container-type: inline-size) {
+        & .fi-fo-rich-editor-main {
+            @apply md:flex-row;
+        }
+
+        & .fi-fo-rich-editor-panels {
+            @apply md:max-w-3xs md:rounded-ee-lg md:border-s md:border-b-0;
+        }
+
+        &
+            .fi-fo-rich-editor-panels.fi-fo-rich-editor-sticky-panels
+            > .fi-fo-rich-editor-panel {
+            @apply md:sticky md:overflow-y-auto;
+
+            & .fi-fo-rich-editor-custom-blocks-ctn {
+                @apply md:overflow-visible;
+            }
+
+            @media (min-width: 48rem) {
+                top: calc(
+                    var(
+                            --rich-editor-sticky-offset,
+                            var(--rich-editor-modal-header-height, 0px)
+                        ) +
+                        var(--rich-editor-toolbar-height, 0px)
+                );
+                max-height: calc(
+                    var(--rich-editor-modal-viewport-height, 100dvh) -
+                        var(
+                            --rich-editor-sticky-offset,
+                            var(--rich-editor-modal-header-height, 0px)
+                        ) -
+                        var(--rich-editor-toolbar-height, 0px) -
+                        var(--rich-editor-modal-footer-height, 0px)
+                );
+            }
+        }
+    }
+}
+
+& .fi-fo-rich-editor-text-color-select-option {
+    @apply flex items-center gap-2;
+
+    & .fi-fo-rich-editor-text-color-select-option-preview {
+        @apply h-5 w-5 shrink-0 rounded-full bg-(--color) dark:bg-(--dark-color);
+    }
+}
+
+[x-sortable]:has(.fi-sortable-ghost) .fi-fo-rich-editor {
+    pointer-events: none;
+}

package/resources/filament/packages/forms/resources/css/components/select.css

@@ -0,0 +1,13 @@
+.fi-fo-select {
+    & .fi-hidden {
+        @apply hidden;
+    }
+}
+
+.fi-fo-select-wrp {
+    &.fi-fo-field-has-inline-label {
+        & .fi-fo-field-label-col {
+            @apply sm:pt-1.5;
+        }
+    }
+}